Come aggiungere la funzione Da testo a voce in qualsiasi pagina Web

La funzione Da testo a voce fa riferimento alla narrazione vocale di un testo visualizzato su un dispositivo. Al momento, dispositivi come laptop, tablet e telefoni cellulari dispongono già di questa funzionalità . Qualsiasi applicazione in esecuzione su questi dispositivi, come un browser Web, può farne uso ed estenderne le funzionalità . La funzione di narrazione può essere un aiuto adatto per un'applicazione che visualizza un testo abbondante, in quanto offre la possibilità di ascoltare i visitatori del sito web.

L'API di Web Speech

L' API JavaScript di Web Speech è il gateway per accedere alla funzione Text-to-Speech da un browser web . Quindi, se vuoi introdurre funzionalità text-to-speech in una pagina web pesante, e consentire ai tuoi lettori di ascoltare il contenuto, puoi utilizzare questa comoda API o, per essere più specifico, la sua interfaccia SpeechSynthesis .

Codice iniziale e controllo dell'assistenza

Per iniziare, creiamo una pagina Web con il mio testo di esempio da narrare e tre pulsanti .

 La lepre con molti amici 
Una lepre era molto popolare con ...
Ma ha rifiutato, affermando che ...
 Morale della storia... 

I pulsanti saranno i controlli per la narrazione . Ora dobbiamo assicurarci che l' UA supporti l'interfaccia SpeechSynthesis . Per fare ciò, controlliamo rapidamente con JavaScript se l' oggetto window ha la proprietà 'speechSynthesis' o no.

 onload = function () {if ('speechSynthesis' in window) {/ * sintesi vocale supportata * /} else {/ * sintesi vocale non supportata * /}} 

Se speechSynthesis è disponibile, per prima cosa creiamo un riferimento per speechSynthesis che assegniamo alla variabile synth . Iniziamo anche una bandiera con il valore false (vedremo il suo scopo più avanti nel post), e creiamo riferimenti e clic su gestori di eventi per i tre pulsanti (Riproduci, Pausa, Stop).

Quando l'utente fa clic su uno dei pulsanti, verrà richiamata la relativa funzione ( onClickPlay(), onClickPause(), onClickStop() ).

 if ('speechSynthesis' nella finestra) {var synth = speechSynthesis; var flag = false; / * riferimenti ai pulsanti * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * fa clic sui gestori di eventi per i pulsanti * / playEle.addEventListener ('clic', onClickPlay); pauseEle.addEventListener ('clic', onClickPause); stopEle.addEventListener ('click', onClickStop); function onClickPlay () {} function onClickPause () {} function onClickStop () {}} 

Crea le funzioni personalizzate

Ora costruiamo le funzioni di clic dei tre pulsanti singoli che verranno chiamati dai gestori di eventi.

1. Riproduci / Riprendi

Quando viene cliccato il pulsante Play, per prima cosa controlliamo la flag . Se è false, lo impostiamo su true, quindi se in qualsiasi momento il pulsante viene cliccato in seguito, il codice all'interno della prima condizione if non verrà eseguito (non finché il flag non sarà nuovamente false ).

Quindi creiamo una nuova istanza dell'interfaccia SpeechSynthesisUtterance che contiene informazioni sul parlato, come il testo da leggere, il volume del parlato, la voce parlata, la velocità, l'altezza e la lingua del discorso. Aggiungiamo il testo dell'articolo come parametro del costruttore e lo assegniamo alla variabile di utterance .

 function onClickPlay () {if (! flag) {flag = true; utterance = new SpeechSynthesisUtterance (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () {flag = false; }; synth.speak (espressione); } if (synth.paused) {/ * riattiva / riprende la narrazione * / synth.resume (); }} 

Usiamo il metodo SpeechSynthesis.getVoices() per designare una voce per il parlato dalle voci disponibili nel dispositivo dell'utente. Poiché questo metodo restituisce una matrice di tutte le opzioni vocali disponibili in un dispositivo, assegniamo la prima voce del dispositivo disponibile utilizzando utterance.voice = synth.getVoices()[0]; dichiarazione.

La proprietà onend rappresenta un gestore di eventi che viene eseguito quando il discorso è finito . Al suo interno, cambiamo il valore della variabile flag su false in modo che il codice che avvia il discorso possa essere eseguito quando si fa nuovamente clic sul pulsante.

Quindi chiamiamo il metodo SpeechSynthesis.speak() per iniziare la narrazione . Dobbiamo anche verificare se la narrazione è in pausa, per la quale utilizziamo la proprietà SpeechSynthesis.paused sola SpeechSynthesis.paused . Se la narrazione è in pausa, è necessario riprendere la narrazione sul clic del pulsante, che possiamo ottenere utilizzando il metodo SpeechSynthesis.resume() .

2. Pausa

Ora creiamo la funzione onClickPause() in cui prima controlliamo se la narrazione è in corso e non è in pausa . Possiamo testare queste condizioni facendo uso delle proprietà SpeechSynthesis.speaking e SpeechSynthesis.paused . Se entrambe le condizioni sono vere, la nostra funzione onClickPause() mette in pausa il discorso chiamando il metodo SpeechSynthesis.pause() .

 function onClickPause () {if (synth.speaking &&! synth.paused) {/ * pausa narration * / synth.pause (); }} 

3. Stop

La funzione onClickStop() è costruita in modo simile a onClickPause() . Se il discorso è in corso, lo fermiamo chiamando il metodo SpeechSynthesis.cancel() che rimuove tutti gli enunciati .

 function onClickStop () {if (synth.speaking) {/ * stop narration * / / * per safari * / flag = false; synth.cancel (); }} 

Nota che sulla cancellazione della voce, l' evento onend viene automaticamente onend e abbiamo già aggiunto il codice di ripristino flag all'interno di esso. Tuttavia, nel browser Safari c'è un bug che impedisce l' onClickStop() questo evento, ecco perché abbiamo reimpostato il flag nella funzione onClickStop() . Non devi farlo se non vuoi supportare Safari.

Supporto per il browser

Tutte le versioni più recenti dei browser moderni dispongono del supporto completo o parziale per l'API di sintesi vocale. I browser Webkit non riproducono la voce da più schede, la pausa è buggata (funziona ma con errori) e la voce non viene ripristinata quando l'utente ricarica la pagina nei browser Webkit.

Demo di lavoro

Dai un'occhiata alla demo live qui sotto, o controlla il codice completo su Github.

Vedi la penna ÃÂÂÂ Â Â Â Â Â Â Â Â Â Â Â £ Text to Speech - JavaScript di HONGKIAT (@hkdc) su CodePen.

Crea siti Web colorati a tema piatto con il kit di interfaccia utente Mint CSS

I kit di interfaccia utente open source open-source sono di gran moda nella comunità di sviluppo. Risparmiano tempo su tutti gli aspetti della disposizione delle griglie, sugli elementi della pagina di stile e sull'aggiunta di componenti dinamici come i menu a discesa.Ci sono molti kit che utilizzano un design piatto, ma pochi si avvicinano a CSS Mint .

(Consigli tecnici e di design)

Progettare per Natale: l'ultima pila di risorse che ti serve

Il Natale è dietro l'angolo . Per i designer e gli altri creativi, il Natale non è solo una stagione di dare e un'opportunità per trascorrere del tempo con parenti e amici, ma anche una grande occasione per divertenti progetti di design per le vacanze. Se hai difficoltà a cercare varie risorse natalizie per rendere più vivaci i tuoi progetti per le vacanze, non cercare oltre perché abbiamo fatto il lavoro per te.In qu

(Consigli tecnici e di design)