Så här lägger du till text-till-tal-funktion på vilken webbsida som helst

De text till tal funktion hänvisar till talad berättande av en text visas på en enhet. För närvarande enheter som bärbara datorer, surfplattor och mobiltelefoner har redan den här funktionen. Alla program som körs på dessa enheter, till exempel en webbläsare, kan utnyttja det, och förlänga dess funktionalitet. Berättelsen kan vara ett lämpligt hjälpmedel för en applikation som visar riklig text, som det erbjuder möjlighet att lyssna till webbplats besökare.

Web-tal API

De JavaScript för JavaScript för JavaScript är porten till Gå till text-till-tal-funktionen med en webbläsare. Så om du vill presentera text-till-tal-funktionalitet på en text-tung webbsida och låta dina läsare lyssna på innehållet, kan du använda detta praktiska API eller, för att vara mer specifik, dess Talsyntes gränssnitt.

Initial code & support check

För att komma igång, låt oss skapa en webbsida med jag provtext ska berättas, och tre knappar.

     
  Haren med många vänner
  En hare var väldigt populär med ... 
 Men han nekade och uppgav att ... 
  Sensmoralen i historien…

Knapparna kommer att vara kontroller för berättelsen. Nu måste vi se till om UA stöder Talsyntes gränssnitt. För att göra det, kontrollerar vi snabbt med JavaScript om fönster objektet har 'talsyntes' fast egendom, eller inte.

 onload = function () if ('speechSynthesis' i fönstret) / * talssyntes stöds * / annat / * tal syntes inte stöds * /

Om talsyntes är tillgänglig, först vi skapa en referens för talsyntes som vi tilldelar till synth variabel. Vi också initiera en flagga med falsk värde (vi ser dess syfte senare i posten), och vi skapa referenser och klicka händelsehanterare för de tre knapparna (Spela, Pausa, Stopp) också.

När användaren klickar på en av knapparna, har den respektive funktionen (onClickPlay (), onClickPause (), onClickStop ()) kommer att ringas.

 om ('speechSynthesis' i fönstret) var synth = speechSynthesis; var flagga = false; / * referenser till knapparna * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * Klicka händelsehanterare för knapparna * / playEle.addEventListener ('click', onClickPlay); pauseEle.addEventListener ('click', onClickPause); stopEle.addEventListener ("click", onClickStop); funktion onClickPlay ()  funktion onClickPause ()  funktion onClickStop ()

Skapa anpassade funktioner

Nu låt oss bygga klickfunktionerna av de tre enskilda knapparna som kommer att hämtas av händelsehanterare.

1. Spela upp / Fortsätt

När knappen Play klickas, först vi kolla flagga. Om det är falsk, vi satte det på Sann, så om någon gång knappen klickas senare, koden inuti först om villkoret kommer inte att utföras (inte förrän flaggan är falsk igen).

Då vi skapa en ny instans av SpeechSynthesisUtterance gränssnitt som innehåller information om talet, till exempel texten som ska läsas, talvolymen, röst talad i, hastighet, tonhöjd och språk i talet. Vi lägger till artikelns text som parameter för konstruktören, och tilldela den till yttrande variabel.

 funktion onClickPlay () if (! flagga) flagga = true; utterance = ny SpeechSynthesisUtterance (document.querySelector ('article') .textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (utterance);  om (synth.paused) / * unpause / återuppta berättelse * / synth.resume ();

Vi använder SpeechSynthesis.getVoices () metod till ange en röst för talet från rösterna som är tillgängliga i användarens enhet. Eftersom denna metod returnerar en uppsättning av alla tillgängliga röstalternativ i en enhet, vi Tilldela den första tillgängliga enhetens röst genom att använda utterance.voice = synth.getVoices () [0]; påstående.

De i sträck egendom representerar en händelsehanterare som är exekveras när talet är klart. Inuti det ändrar vi värdet av flagga variabel tillbaka till falskt så att koden som startar talet kan utföras när knappen är klickade på igen.

Då kallar vi SpeechSynthesis.speak () metod för att starta berättelsen. Vi måste också kolla om berättelsen är pausad, för vilka vi använder skrivskyddad SpeechSynthesis.paused fast egendom. Om berättelsen är pausad måste vi återuppta berättelsen på knappen klicka, som vi kan uppnå genom att använda SpeechSynthesis.resume () metod.

2. Paus

Nu ska vi skapa onClickPause () funktion där vi först kontrollerar om berättelsen är pågående och inte pausad. Vi kan testa dessa villkor genom att använda SpeechSynthesis.speaking och den SpeechSynthesis.paused egenskaper. Om båda villkoren är sanna, vår onClickPause () fungera pausar talet genom att ringa SpeechSynthesis.pause () metod.

 funktion onClickPause () om (synth.speaking &&! synth.paused) / * pausberättelse * / synth.pause ();

3. Stoppa

De onClickStop () funktionen är byggd på samma sätt som onClickPause (). Om talet är igång, vi sluta genom att ringa SpeechSynthesis.cancel () metod som tar bort alla uttalanden.

 funktion onClickStop () if (synth.speaking) / * stoppa berättelse * / / * för safari * / flagga = false; synth.cancel ();

Observera att vid avbrytande av tal, i sträck händelsen avfyras automatiskt, och vi hade redan lagt till flaggåterställningskoden inuti den. dock, Det finns en bugg i Safari-webbläsaren som förhindrar att händelsen avfyrar, det är därför vi återställde flaggan i onClickStop () fungera. Du behöver inte göra det om du inte vill stödja Safari.

Webbläsarstöd

Alla senaste versioner av moderna webbläsare ha full eller delvis stöd för talsyntes API. Webkit-webbläsare spelar inte tal från flera flikar, pausar är buggy (fungerar men buggy) och talet återställs inte när användaren laddar om sidan i Webkit-webbläsare.

Arbeta demo

Ta en titt på live demo nedan, eller kolla in hela koden på Github.

Se Pennen Ã Â ° Ã ...¸EN¢Â ?? Â £ £ Text till tal - JavaScript av HONGKIAT (@hkdc) på CodePen.