Kā pievienot teksta-runas funkciju jebkurā tīmekļa lapā

The No teksta uz izrunu iezīme attiecas uz runāts stāstījums par tekstu tiek parādīts ierīcē. Šobrīd tādas ierīces kā klēpjdatori, planšetdatori un mobilie tālruņi jau ir šī funkcija. Jebkura programma, kas darbojas šajās ierīcēs, piemēram, tīmekļa pārlūkprogrammā, var izmantot to, un paplašināt tās funkcionalitāti. Stāstījuma funkcija var būt piemērots palīglīdzeklis lietojumprogrammai parāda bagātīgu tekstu, kā tas piedāvā iespēju klausīties vietnes apmeklētājiem.

Web runas API

The Tīmekļa runas JavaScript API ir vārti uz piekļūt teksta-runas funkcijai, izmantojot tīmekļa pārlūkprogrammu. Tātad, ja vēlaties ieviest teksta-runas funkcionalitāti teksta smagā tīmekļa lapā, un ļaujiet lasītājiem uzklausīt saturu, varat izmantot šo ērto API vai, precīzāk, tās Runas sintēze saskarne.

Sākotnējā koda un atbalsta pārbaude

Lai sāktu darbu, izveidosim tīmekļa lapu ar man parauga teksts stāstāms, un trīs pogas.

     
  Zaķis ar daudziem draugiem
  Zaķis bija ļoti populārs ar… 
 Bet viņš atteicās, norādot, ka… 
  Stāsta morāle…

Pogas būs stāstījuma vadība. Tagad mums ir jāpārliecinās, vai UA atbalsta Runas sintēze saskarne. Lai to izdarītu, mēs ātri pārbaudām JavaScript, ja logu objektam ir “runas sinteze” īpašums, vai nē.

 onload = funkcija () if ('runas sinteze' logā) / * runas sintēze atbalstīta * / cits / * runas sintēze netiek atbalstīta * /

Ja runas sinteze ir pieejams, vispirms mēs izveidot atsauci runas sinteze ko mēs piešķiram sintezētājs mainīgais. Mēs arī uzsākt karogu Ar nepatiesa vērtība (mēs to redzēsim vēlāk postā), un mēs izveidot atsauces un noklikšķiniet uz notikumu apstrādes par trim pogām (Play, Pause, Stop).

Kad lietotājs noklikšķina uz vienas no pogām, tās atbilstošā funkcija (onClickPlay (), onClickPause (), onClickStop ()) tiks izsaukts.

 ja ('runas sinteze' logā) var synth = runSynthesis; var flag = false; / * atsauces uz pogām * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * noklikšķiniet uz notikumu apstrādes ar pogām * / playEle.addEventListener ('klikšķi', onClickPlay); pauseEle.addEventListener ('klikšķis', onClickPause); stopEle.addEventListener ('klikšķi', onClickStop); funkcija onClickPlay ()  funkcija onClickPause ()  funkcija onClickStop ()

Izveidojiet pielāgotās funkcijas

Tagad pieņemsim veidot klikšķa funkcijas no trim atsevišķām pogām, ko izsauks notikumu apstrādātāji.

1. Atskaņot / atsākt

Noklikšķinot uz pogas Atskaņot, vispirms mēs pārbaudiet karodziņš. Ja tas ir nepatiesa, mēs to uzstādām taisnība, tāpēc, ja jebkurā laikā poga tiek noklikšķināta vēlāk, kods iekšpusē vispirms ja stāvoklis netiks izpildīts (ne līdz brīdim, kad karogs ir nepatiesa atkal).

Tad mēs izveidot jaunu. \ t SpeechSynthesisUtterance interfeiss, kas satur informāciju par runu, piemēram, lasāmo tekstu, runas apjomu, balss, kas runā, ātrumu, skaņu un runas valodu. Mēs pievienojam raksta tekstu kā konstruktora parametru, un piešķir to izteikšana mainīgais.

 funkcija onClickPlay () if (! flag) flag = taisnība; izrunāšana = jauns SpeechSynthesisUtterance (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = funkcija () flag = false; ; synth.speak (izteikšana);  if (synth.paused) / * unpause / atsākt stāstījumu * / synth.resume ();

Mēs izmantojam SpeechSynthesis.getVoices () metode noteikt runu no balss, kas pieejamas lietotāja ierīcē. Tā kā šī metode atgriež ierīcē visas pieejamās balss opcijas, mēs piešķirt pirmās pieejamās ierīces balss izmantojot utterance.voice = synth.getVoices () [0]; paziņojums, apgalvojums.

The onend īpašums ir notikumu apstrādātājs izpildīts, kad runāšana ir pabeigta. Tās iekšpusē mēs mainām vērtību karodziņš mainīgais atpakaļ uz nepatiesu lai kods, kas sāk runu var izpildīt kad poga ir vēlreiz noklikšķinājis.

Tad mēs to saucam SpeechSynthesis.speak () metode, lai sākt stāstījumu. Mums ir arī jāpārbauda ja stāstījums ir apturēts, par kuru mēs izmantojam tikai lasāmu SpeechSynthesis.paused īpašums. Ja stāstījums ir apturēts, mums ir nepieciešams atsākt stāstījumu uz pogas klikšķa, ko mēs varam sasniegt, izmantojot SpeechSynthesis.resume () metodi.

2. Pauze

Tagad radīsim onClickPause () funkcija, kurā mēs vispirms pārbaudām ja stāstījums notiek un nav apturēts. Mēs varam pārbaudīt šos nosacījumus, izmantojot SpeechSynthesis.speaking un SpeechSynthesis.paused īpašības. Ja abi nosacījumi ir patiesi, mūsu onClickPause () funkciju aptur runu zvanot uz SpeechSynthesis.pause () metodi.

 funkcija onClickPause () if (synth.speaking &&! synth.paused) / * pauzes stāstījums * / synth.pause ();

3. Pārtraukt

The onClickStop () funkcija ir būvēts līdzīgi kā onClickPause (). Ja runas notiek, mēs beidz zvanot uz RunasSynthesis.cancel () metodi noņem visas izrunas.

 funkcija onClickStop () if (synth.speaking) / * pārtraukt stāstījumu * / / * safari * / flag = false; synth.cancel ();

Ņemiet vērā, ka runas atcelšanas gadījumā onend notikums tiek automātiski izslēgts, un mēs jau esam pievienojuši karoga atiestatīšanas kodu. Tomēr, Safari pārlūkprogrammā ir kļūda kas novērš šo notikumu šaušanu, tāpēc mēs pārcēlām karogu uz onClickStop () funkciju. Jums tas nav jādara, ja nevēlaties atbalstīt Safari.

Pārlūka atbalsts

Visas jaunākās mūsdienu pārlūkprogrammu versijas ir pilnīgs vai daļējs atbalsts runas sintēzes API. Webkit pārlūkprogrammas neatskaņo runu no vairākām cilnēm, pauzēšana ir buggy (darbojas, bet buggy), un runas nav atiestatītas, kad lietotājs pārlādē lapu Webkit pārlūkprogrammās.

Darba demonstrācija

Apskatiet tālāk redzamo tiešo demonstrāciju vai apskatiet pilnu kodu Github.

Skatiet pildspalvu â?¸Ã¢Â? Â Â Â Â Â Â £ Teksts uz runu - JavaScript ar HONGKIAT (@hkdc) par CodePen.