Dodajanje funkcije Besedilo v govor na kateri koli spletni strani

The besedilo v govor se nanaša na govorjeno besedilo besedila prikazane na napravi. Trenutno naprave, kot so prenosniki, tablični računalniki in mobilni telefoni že imate to funkcijo. Vse aplikacije, ki se izvajajo na teh napravah, kot je spletni brskalnik, lahko uporablja, in funkcionalnosti. Funkcija pripovedi je lahko primerna pomoč za aplikacijo prikaže obilno besedilo, kot je ponuja možnost poslušanja obiskovalcem spletnega mesta.

API spletnega govora

The API spletnega govora JavaScript je vrata v dostop do funkcije Besedilo v govor prek spletnega brskalnika. Torej, če želite uvesti funkcijo za pretvorbo besedila v govor na spletni strani, ki je težka za besedilo, in bralcem omogočiti, da poslušajo vsebino, lahko uporabite ta priročen API ali, bolj natančno, njegovo SpeechSynthesis vmesnik.

Začetna koda in preverjanje podpore

Če želite začeti, ustvarimo spletno stran s jaz vzorec besedila, ki ga bom pripovedoval, in trije gumbi.

     
  Hare z mnogimi prijatelji
  Zec je bil zelo priljubljen pri… 
 Toda zavrnil je, pri čemer je dejal: 
  Moral zgodbe ...

Gumbi bodo kontrole za pripovedovanje. Sedaj se moramo prepričati, če UA podpira SpeechSynthesis vmesnik. Če želite to narediti, bomo hitro preverili, ali je v JavaScriptu okno predmet ima "sinteza govora" nepremičnine, ali ne.

 onload = function () if ('speechSynthesis' v oknu) / * sinteza govora podprta * / else / * sinteza govora ni podprta * /

Če sinteza govora je na voljo, najprej ustvarite referenco za sinteza govora ki jih dodeljujemo Sint spremenljivko. Smo tudi sproži zastavo z false vrednost (bomo videli njen namen pozneje), in mi ustvarite sklice in upravljalnike dogodkov za tri gumbe (Play, Pause, Stop).

Ko uporabnik klikne enega od gumbov, svojo funkcijo (onClickPlay (), onClickPause (), onClickStop ()).

 if ('speechSynthesis' v oknu) var synth = speechSynthesis; var flag = false; / * sklici na gumbe * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * kliknemo rokovnike dogodkov za gumbe * / playEle.addEventListener ('klik', onClickPlay); pauseEle.addEventListener ('klik', onClickPause); stopEle.addEventListener ('klik', onClickStop); funkcija onClickPlay ()  funkcija onClickPause ()  funkcija onClickStop ()

Ustvarite funkcije po meri

Zdaj pa zgradite funkcije klikanja treh posameznih gumbov, ki jih bodo poklicali upravljavci dogodkov.

1. Predvajaj / Nadaljuj

Ko kliknemo gumb Predvajaj, najprej kliknemo preverite zastavo. Če je false, nastavili smo ga prav, tako da, če je kdaj kliknete gumb pozneje, koda znotraj prvi če pogoj ne bo izveden (ne dokler ni zastava false ponovno).

Potem pa mi ustvarite nov primerek SpeechSynthesisUtterance vmesnik, ki vsebuje informacije o govoru, kot so besedilo, ki ga je treba prebrati, glasnost govora, glas, ki se govori, hitrost, smer in jezik govora. Dodamo besedilo članka kot parameter konstruktorja, in jo dodelite izrek spremenljivko.

 funkcija onClickPlay () if (! flag) flag = true; utterance = novo SpeechSynthesisUtterance (document.querySelector ('članek'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (izrekanje);  if (synth.paused) / * sprožitev / nadaljevanje pripovedi * / synth.resume ();

Uporabljamo SpeechSynthesis.getVoices () metodo določite glas za govor od glasov, ki so na voljo v uporabniški napravi. Ker ta metoda vrne niz vseh razpoložljivih glasovnih možnosti v napravi, mi dodelite prvi glas, ki je na voljo z uporabo utterance.voice = synth.getVoices () [0]; izjavo.

The inend lastnost predstavlja upravljalnik dogodkov, ki je se izvede, ko je govor končan. V njem spreminjamo vrednost zastavo spremenljivko nazaj na false tako da kodo, ki začne govor lahko izvedete ko je gumb ponovno kliknil.

Potem pokličemo SpeechSynthesis.speak () metodo začnite pripovedovanje. Preveriti moramo tudi če se pripoved ustavi, za katere uporabljamo samo za branje SpeechSynthesis.paused nepremičnine. Če se pripoved ustavi, moramo to storiti nadaljevanje pripovedi na klik gumba, ki ga lahko dosežemo z uporabo SpeechSynthesis.resume () metodo.

2. Premor

Zdaj pa ustvarimo onClickPause () funkcijo, v kateri najprej preverimo če pripoved poteka in ni zaustavljena. Te pogoje lahko testiramo z uporabo SpeechSynthesis.speaking in SpeechSynthesis.paused lastnosti. Če sta oba pogoja resnična, naša onClickPause () funkcijo začasno ustavi govor s klicem SpeechSynthesis.pause () metodo.

 funkcija onClickPause () if (synth.speaking &&! synth.paused) / * pavza naracija * / synth.pause ();

3. Stop

The onClickStop () funkcija zgrajena podobno kot onClickPause (). Če govor poteka, mi prenehaj s klicem SpeechSynthesis.cancel () metodo odstrani vse izjave.

 funkcija onClickStop () if (synth.speaking) / * stop naracija * / / * za safari * / flag = false; synth.cancel ();

Upoštevajte, da o preklicu govora, inend dogodek samodejno sproži, in znotraj njega smo že dodali kodo za ponastavitev zastavice. Vendar pa, v brskalniku Safari je napaka ki preprečuje, da bi ta dogodek izstrelil, zato smo zastavo ponastavili v onClickStop () funkcijo. Ni vam treba storiti, če ne želite podpirati Safari.

Podpora za brskalnik

Vse najnovejše različice sodobnih brskalnikov imajo polno ali delno podporo za API za sintezo govora. Brskalniki Webkit ne predvajajo govora z več zavihkov, pavza je napačna (deluje, vendar je napaka) in govor se ne ponastavi, ko uporabnik ponovno naloži stran v brskalnikih Webkit.

Delovni demo

Oglejte si predstavitev v živo spodaj ali si oglejte celotno kodo na Githubu.

Oglejte si Pen Ã? Â ° Ã… Â¸Ã¢Â? Â ?? Ã'Â £ Text to Speech - JavaScript by HONGKIAT (@hkdc) na CodePen.