Kako dodati značajku Tekst u govor na bilo kojoj web stranici

tekst u govor Značajka se odnosi na govorna naracija teksta prikazan na uređaju. Trenutno, uređaji poput prijenosnih računala, tableta i mobilnih telefona već imate tu značajku. Bilo koja aplikacija koja se izvodi na tim uređajima, kao što je web-preglednik, može iskoristiti ga, i proširiti njegovu funkcionalnost. Značajka naracije može biti prikladna pomoć za aplikaciju prikazuje obilan tekst, kao što je to nudi mogućnost slušanja posjetiteljima web-lokacije.

API web govora

JavaScript API za web-govor je ulaz u pristupite značajki Text-to-Speech u web-pregledniku. Dakle, ako želite uvesti tekst-u-govor funkcionalnost na tekstualno tešku web stranicu, i omogućiti svojim čitateljima da slušaju sadržaj, možete iskoristiti ovaj zgodan API ili, konkretnije, njegovu SpeechSynthesis sučelje.

Početna šifra i provjera podrške

Da biste započeli, izradimo web-stranicu s ja uzorak teksta koji će biti ispričan, i tri gumba.

     
  Zec s mnogo prijatelja
  Zec je bio vrlo popularan… 
 Ali on je odbio, tvrdeći da ... 
  Pouka priče…

Gumbi će biti kontrole naracije. Sada moramo biti sigurni da li je UA podržava SpeechSynthesis sučelje. Da bismo to učinili, brzo ćemo provjeriti s JavaScriptom ako prozor objekt ima 'SpeechSynthesis' svojstvo, ili ne.

 onload = function () if ('speechSynthesis' u prozoru) / * podržana sinteza govora * / else / * sinteza govora nije podržana * /

Ako speechSynthesis je na raspolaganju, prvo mi stvorite referencu za speechSynthesis koje dodjeljujemo synth promjenjiva. Mi također pokrenuti zastavu s lažan vrijednost (vidjet ćemo njezinu svrhu kasnije u postu), a mi stvoriti reference i klik rukovatelje događajima za tri gumba (Play, Pause, Stop).

Kada korisnik klikne jedan od gumba, njegova funkcija (onClickPlay (), onClickPause (), onClickStop ()) će biti pozvani.

 if ('speechSynthesis' u prozoru) var synth = speechSynthesis; var flag = false; / * reference na gumbe * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * kliknuti na rukovatelje događajima za gumbe * / playEle.addEventListener ('klik', onClickPlay); pauseEle.addEventListener ('klik', onClickPause); stopEle.addEventListener ('klik', onClickStop); funkcija onClickPlay ()  funkcija onClickPause ()  funkcija onClickStop ()

Stvorite prilagođene funkcije

Sada ćemo izgradite funkcije klika od tri pojedinačna gumba koja će biti pozvana od strane rukovatelja događaja.

1. Reprodukcija / nastavak

Kada se klikne gumb Reproduciraj, najprije mi provjeri zastava. Ako je to lažan, postavili smo ga pravi, tako da ako se ikad klikne na gumb, kôd unutar prvi ako stanje se neće izvršiti (ne sve dok zastava nije lažan opet).

Onda mi stvoriti novu instancu SpeechSynthesisUtterance sučelje koje sadrži informacije o govoru, kao što je tekst koji se čita, glas, govor u glasu, brzina, visina i jezik govora. Dodamo tekst članka kao parametar konstruktora, i dodijelite ga izjava varijabla.

 funkcija onClickPlay () if (! flag) flag = true; utterance = new SpeechSynthesisUtterance (document.querySelector ('članak'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (iskaz);  if (synth.paused) / * ponavljanja / nastavka naracije * / synth.resume ();

Mi koristimo SpeechSynthesis.getVoices () metoda odredite glas za govor s glasova dostupnih na korisnikovom uređaju. Budući da ova metoda vraća niz svih dostupnih glasovnih opcija u uređaju, mi dodijeliti prvi raspoloživi glas uređaja pomoću utterance.voice = synth.getVoices () [0]; izjava.

na kraju svojstvo predstavlja rukovatelj događajima koji je izvršiti kada je govor završen. Unutar njega mijenjamo vrijednost zastava varijabla natrag na lažno tako da kod koji započinje govor može se izvršiti kada je gumb ponovno je kliknuo.

Onda zovemo SpeechSynthesis.speak () metoda kako bi započeti pripovijedanje. Također moramo provjeriti ako se pripovijest zaustavi, za koje koristimo samo za čitanje SpeechSynthesis.paused nekretnine. Ako se priča zaustavi, moramo to učiniti nastavak pripovijedanja na gumb klik, koji možemo postići pomoću SpeechSynthesis.resume () način.

2. Stanka

Sada kreirajmo onClickPause () funkcija u kojoj prvo provjeravamo ako je pripovijedanje u tijeku i nije zaustavljeno. Možemo testirati ove uvjete koristeći se SpeechSynthesis.speaking i SpeechSynthesis.paused svojstva. Ako su oba uvjeta istinita, naša onClickPause () funkcija pauzira govor pozivom na SpeechSynthesis.pause () način.

 funkcija onClickPause () if (synth.speaking &&! synth.paused) / * pauziranje naracije * / synth.pause ();

3. Zaustavite

onClickStop () je funkcija slično onClickPause (). Ako je govor u tijeku, mi prestani pozivom na SpeechSynthesis.cancel () metoda uklanja sve izjave.

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

Obratite pozornost na otkazivanje govora na kraju događaj se automatski otvara, i već smo dodali kôd za resetiranje zastavice unutar njega. Međutim, u pregledniku Safari postoji bug koji sprječava pucanje ovog događaja, zato smo resetirali zastavu u onClickStop () funkcija. Ne morate to učiniti ako ne želite podržavati Safari.

Podrška za preglednik

Sve najnovije verzije modernih preglednika imati punu ili djelomičnu potporu za API za sintezu govora. Webkit preglednici ne reproduciraju govor s više kartica, pauziranje je neispravno (funkcionira, ali je greškom), a govor se ne poništava kada korisnik ponovo učita stranicu u Webkit preglednicima.

Radni demo

Pogledajte demonstraciju ispod, ili pogledajte cijeli kod na Githubu.

Pogledajte olovku¸Ă¢Â? Â ?? Ã'Â £ Text to Speech - JavaScript by HONGKIAT (@hkdc) na CodePen.