Cum se adaugă funcția Text-to-Speech pe orice pagină Web

text-to-speech caracteristică se referă la vorbire narativă a unui text afișate pe un dispozitiv. În prezent, dispozitive precum laptopuri, tablete și telefoane mobile aveți deja această caracteristică. Orice aplicație care rulează pe aceste dispozitive, cum ar fi un browser web, poate face uz de ea, și extind funcționalitatea acestuia. Caracteristica de narațiune poate fi un ajutor potrivit pentru o aplicație care afișează text abundent, ca atare oferă opțiunea de a asculta pentru vizitatorii site-ului.

API-ul Web Speech

Web Speech JavaScript API este poarta de acces către accesați funcția Text-to-Speech de la un browser web. Deci, dacă doriți să introduceți funcționalitatea text-to-speech pe o pagină Web cu conținut greu și permiteți cititorilor dvs. să asculte conținutul, puteți utiliza acest API util sau, mai precis, SpeechSynthesis interfață.

Cod inițial și verificare de asistență

Pentru a începe, să creăm o pagină web eu exemplul de text pentru a fi narat, și trei butoane.

 
    
 
 
Obiceiul cu mulți prieteni
  
Un iepure a fost foarte popular cu ... 
 
Dar a refuzat, declarând că ... 
  
Morala povestii… 
 
 

Butoanele vor fi controale pentru narațiune. Acum trebuie să ne asigurăm dacă UA sprijină SpeechSynthesis interfață. Pentru a face acest lucru, vom verifica rapid cu JavaScript dacă fereastră obiect are 'SpeechSynthesis' proprietate, sau nu.

 onload = funcția () if ('speechSynthesis' în fereastră) / * sinteza de vorbire acceptată * / altceva / * sinteza de vorbire nu este acceptată * / 

Dacă speechSynthesis este disponibil, mai întâi noi creați o referință pentru speechSynthesis pe care le atribuim Synth variabil. Noi Deasemenea iniția un steag cu fals (vom vedea scopul său mai târziu în post), și noi să creeze referințe și să manipuleze evenimentul pentru clicuri pentru cele trei butoane (Play, Pause, Stop).

Când utilizatorul dă clic pe unul dintre butoane, funcția sa respectivă (onClickPlay (), onClickPause (), onClickStop ()) va fi numit.

 dacă ('speechSynthesis' în fereastră) var synth = speechSynthesis; var flag = false; / * referințe la butoanele * / var playEle = document.querySelector ('# play'); var pauzăEle = document.querySelector ('pauză'); var stopEle = document.querySelector ('# stop'); / * click pentru gestionarea evenimentului pentru butoanele * / playEle.addEventListener ('click', onClickPlay); pauseEle.addEventListener ("clic", onClickPause); stopEle.addEventListener ("clic", onClickStop); funcția onClickPlay ()  funcția onClickPause ()  funcția onClickStop ()  

Creați funcțiile personalizate

Acum hai să construi funcțiile de clic din cele trei butoane individuale care vor fi chemați de către operatorii de evenimente.

1. Redare / Reluare

Când faceți clic pe butonul Redare, mai întâi vom verifică steag. Daca este fals, am stabilit-o Adevărat, astfel încât în ​​orice moment butonul să fie apăsat ulterior, codul din interiorul lui primul dacă condiția nu va fi executată (nu până când nu este steagul fals din nou).

Atunci noi creați o nouă instanță a SpeechSynthesisUtterance interfață care conține informații despre vorbire, cum ar fi textul care trebuie citit, volumul de vorbire, vocea vorbită, viteza, culoarea și limba discursului. Adăugăm textul articolului ca parametru al constructorului, și alocați-l enunț variabil.

 funcția onClickPlay () if (! flag) flag = true; utterance = noua SpeechSynthesisUtterance (document.querySelector ('articolul'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = funcția () flag = false; ; synth.speak (exprimare);  dacă (synth.paused) / * unpause / resume narration * / synth.resume ();  

Noi folosim SpeechSynthesis.getVoices () metoda de a desemnează o voce pentru discurs de la vocile disponibile în dispozitivul utilizatorului. Deoarece această metodă returnează o gamă de opțiuni de voce disponibile într-un dispozitiv, noi atribuiți vocea primului dispozitiv disponibil folosind utterance.voice = synth.getVoices () [0]; afirmație.

pe sfarsit proprietate reprezintă un manipulator de evenimente care este executat atunci când discursul este terminat. În interiorul acestuia, schimbăm valoarea steag variabil înapoi la fals astfel încât codul care începe discursul pot fi executate când este butonul clicuri din nou.

Atunci sunăm SpeechSynthesis.speak () metoda pentru a începerea narațiunii. De asemenea, trebuie să verificăm dacă narațiunea este întreruptă, pentru care folosim doar citirea SpeechSynthesis.paused proprietate. Dacă narațiunea este întreruptă, trebuie să o facem reluați povestirea pe butonul de pe buton, pe care îl putem obține folosind SpeechSynthesis.resume () metodă.

2. Întrerupeți

Acum să creăm onClickPause () în care verificăm mai întâi dacă narațiunea este în curs de desfășurare și nu este întreruptă. Putem testa aceste condiții utilizând SpeechSynthesis.speaking si SpeechSynthesis.paused proprietăți. Dacă ambele condiții sunt adevărate, onClickPause () funcţie întrerupe discursul prin apelarea SpeechSynthesis.pause () metodă.

 funcția onClickPause () if (synth.speaking &&! synth.paused) / * pauză narration * / synth.pause ();  

3. Opriți

onClickStop () funcția este construit similar cu onClickPause (). Dacă discursul este în desfășurare, noi Încetează prin apelarea SpeechSynthesis.cancel () această metodă îndepărtează toate declarațiile.

 funcția onClickStop () if (synth.speaking) / * stop narration * / / * pentru safari * / flag = false; synth.cancel ();  

Rețineți că în cazul anulării vorbirii, pe sfarsit evenimentul este declanșat automat, și am adăugat deja codul de resetare a pavilionului în interiorul acestuia. in orice caz, există un bug în browser-ul Safari care împiedică declanșarea acestui eveniment, de aceea am resetat pavilionul în onClickStop () funcţie. Nu trebuie să faceți asta dacă nu doriți să îl sprijiniți pe Safari.

Suport pentru browser

Toate cele mai recente versiuni ale browserelor moderne au sprijin total sau parțial pentru API de sinteză a vorbirii. Browserele Webkit nu redă vorbă de la mai multe file, pauza este buggy (funcționează dar buggy) și vorbirea nu este resetată când utilizatorul reîncarcă pagina în browserele Webkit.

Demo de lucru

Aruncați o privire la demo-ul live de mai jos sau verificați codul complet de pe Github.

A se vedea pen-ul? ??? ... ¸A¢Â                                                          Â.