Slik legger du til tekst-til-tale-funksjon på hvilken som helst webside

De tekst til tale funksjonen refererer til muntlig fortelling av en tekst vises på en enhet. For tiden enheter som bærbare datamaskiner, tabletter og mobiltelefoner har allerede denne funksjonen. Ethvert program som kjører på disse enhetene, for eksempel en nettleser, kan gjøre bruk av det, og utvide sin funksjonalitet. Fortellingsfunksjonen kan være et egnet hjelpemiddel for en applikasjon som viser rikelig tekst, som det tilbyr muligheten til å lytte til besøkende på nettstedet.

Web-tale-API

De Web-tale JavaScript API er inngangsporten til Få tilgang til funksjonen Tekst-til-tale ved hjelp av en nettleser. Så hvis du vil introdusere tekst-til-tale-funksjonalitet på en tekst-tung nettside, og la leserne høre på innholdet, kan du bruke denne praktiske APIen, eller, for å være mer spesifikk, er dens SpeechSynthesis grensesnitt.

Innledende kode og støttekontroll

For å komme i gang, la oss lage en nettside med meg prøve tekst som skal fortelles, og tre knapper.

     
  Haren med mange venner
  En hare var veldig populær med ... 
 Men han nektet, og sa at ... 
  Moral of the story ...

Knappene vil være kontroller for fortellingen. Nå må vi sørge for at UA støtter SpeechSynthesis grensesnitt. For å gjøre det, sjekker vi raskt med JavaScript hvis vindu objektet har 'SpeechSynthesis' eiendom, eller ikke.

 onload = funksjon () if ('speechSynthesis' i vinduet) / * talesyntese støttes * / annet / * talesyntese støttes ikke * /

Hvis speechSynthesis er tilgjengelig, først vi opprett en referanse for speechSynthesis som vi tilordner til synth variabel. Vi også start et flagg med falsk verdi (vi ser sin hensikt senere i innlegget), og vi lag referanser og klikk hendelseshåndterere for de tre knappene (Spill, Pause, Stopp) også.

Når brukeren klikker en av knappene, har den respektive funksjonen (onClickPlay (), onClickPause (), onClickStop ()) vil bli kalt.

 hvis ('speechSynthesis' i vinduet) var synth = speechSynthesis; var flagg = false; / * referanser til knappene * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * klikk hendelsesbehandlere for knappene * / playEle.addEventListener ('klikk', onClickPlay); pauseEle.addEventListener ('klikk', onClickPause); stopEle.addEventListener ('klikk', onClickStop); funksjon onClickPlay ()  funksjon onClickPause ()  funksjon onClickStop ()

Lag de tilpassede funksjonene

La oss nå bygge klikkfunksjonene av de tre individuelle knappene som blir kalt av hendelsesbehandlerne.

1. Spill / Fortsett

Når Play-knappen klikkes, først vi Undersøk flagg. Hvis det er falsk, vi satte det på ekte, så hvis noen gang knappen klikkes senere, koden inne i først hvis tilstanden vil ikke utføres (ikke før flagget er falsk en gang til).

Da vi opprett en ny forekomst av SpeechSynthesisUtterance grensesnitt som inneholder informasjon om talen, for eksempel teksten som skal leses, talevolum, talespråk, hastighet, tonehøyde og språk i talen. Vi legger til artikkelen som parameter for konstruktøren, og tilordne den til ytring variabel.

 funksjon onClickPlay () if (! flagg) flag = true; utterance = ny SpeechSynthesisUtterance (document.querySelector ('article') .textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (ytring);  hvis (synth.paused) / * unpause / gjenoppta fortelling * / synth.resume ();

Vi bruker SpeechSynthesis.getVoices () metode til velg en stemme for talen fra stemmer tilgjengelig i brukerens enhet. Da denne metoden returnerer en rekke av alle tilgjengelige stemmealternativer i en enhet, vi tilordne den første tilgjengelige enheten stemmen ved å bruke utterance.voice = synth.getVoices () [0]; uttalelse.

De onend Egenskapen representerer en hendelsehandler som er utført når talen er ferdig. Innsiden av det endrer vi verdien av flagg variabel tilbake til falsk slik at koden som starter talen kan utføres når knappen er klikket på nytt.

Da kaller vi SpeechSynthesis.speak () metode for å start beretningen. Vi må også sjekke hvis fortellingen er pauset, som vi bruker skrivebeskyttet SpeechSynthesis.paused eiendom. Hvis beretningen er pauset, må vi gjenoppta fortellingen på knappeklikk, som vi kan oppnå ved å bruke SpeechSynthesis.resume () metode.

2. Pause

La oss nå lage onClickPause () funksjon der vi først sjekker hvis fortellingen er pågående og ikke stoppet. Vi kan teste disse forholdene ved å benytte seg av SpeechSynthesis.speaking og SpeechSynthesis.paused eiendommer. Hvis begge forholdene er sanne, vår onClickPause () funksjon pause talen ved å ringe SpeechSynthesis.pause () metode.

 funksjon onClickPause () hvis (synth.speaking &&! synth.paused) / * pause fortellelse * / synth.pause ();

3. Stopp

De onClickStop () funksjonen er bygget på samme måte som onClickPause (). Hvis talen fortsetter, vi slutt med det ved å ringe SpeechSynthesis.cancel () metode som fjerner alle utterances.

 funksjon onClickStop () hvis (synth.speaking) / * stopp fortelling * / / * for safari * / flagg = false; synth.cancel ();

Legg merke til at ved avbrudd av tale, vil onend hendelsen blir automatisk avbrutt, og vi hadde allerede lagt til flagg-reset-koden inni den. derimot, Det er en feil i Safari-nettleseren som forhindrer denne hendelsen fra å skyte, det er derfor vi tilbakestilt flagget i onClickStop () funksjon. Du trenger ikke å gjøre det hvis du ikke vil støtte Safari.

Nettleserstøtte

Alle siste versjoner av moderne nettlesere ha full eller delvis støtte for tale syntese API. Webkit-nettlesere spiller ikke tale fra flere faner, pause er buggy (fungerer men buggy), og tale tilbakestilles ikke når brukeren laster opp siden i Webkit-nettlesere.

Arbeidsdemo

Ta en titt på live-demoen under, eller sjekk ut hele koden på Github.

Se pennen Â ° Ã ... Â¸EN¢Â ?? Â £ £ Tekst til tale - JavaScript av HONGKIAT (@hkdc) på CodePen.