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

Il text-to-speech caratteristica si riferisce al narrazione parlata di un testo visualizzato su un dispositivo. Allo stato attuale, dispositivi come laptop, tablet e telefoni cellulari hanno già questa caratteristica. Qualsiasi applicazione in esecuzione su questi dispositivi, come un browser Web, può farne uso, e estendere la sua funzionalità. La funzione di narrazione può essere un aiuto adatto per un'applicazione che visualizza un testo abbondante, come offre la possibilità di ascoltare ai visitatori del sito web.

L'API di Web Speech

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

Codice iniziale e controllo dell'assistenza

Per iniziare, creiamo una pagina web con io esempio di testo 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 il UA supporta il SpeechSynthesis interfaccia. Per fare ciò, controlliamo rapidamente con JavaScript se il finestra l'oggetto ha il 'SpeechSynthesis' proprietà, o no.

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

Se speechSynthesis è disponibile, prima noi creare un riferimento per speechSynthesis che assegniamo al synth variabile. Anche noi avviare una bandiera con il falso valore (vedremo il suo scopo più avanti nel post), e noi creare riferimenti e fare clic su gestori di eventi per i tre pulsanti (Play, Pause, Stop) pure.

Quando l'utente fa clic su uno dei pulsanti, la sua rispettiva funzione (onClickPlay (), onClickPause (), onClickStop ()) sarà chiamato.

 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 ('clic', onClickStop); function onClickPlay ()  function onClickPause ()  function onClickStop ()

Crea le funzioni personalizzate

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

1. Riproduci / Riprendi

Quando viene cliccato il pulsante Play, prima noi controlla il bandiera. Se è falso, abbiamo impostato a vero, quindi se in qualsiasi momento il pulsante viene cliccato in un secondo momento, il codice all'interno di primo Se la condizione non verrà eseguita (non fino a quando la bandiera è falso ancora).

Allora noi crea una nuova istanza di SpeechSynthesisUtterance interfaccia che contiene informazioni sul parlato, come il testo da leggere, il volume del parlato, la voce parlata, la velocità, l'intonazione e la lingua del discorso. Aggiungiamo il testo dell'articolo come parametro del costruttore, e assegnarlo al espressione variabile.

 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 ();

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

Il alla fine la proprietà rappresenta un gestore di eventi che è eseguito quando il discorso è finito. Al suo interno, cambiamo il valore di bandiera variabile torna a falso in modo che il codice che avvia il discorso può essere eseguito quando il pulsante è cliccato di nuovo.

Quindi chiamiamo il SpeechSynthesis.speak () metodo per inizia la narrazione. Dobbiamo anche controllare se la narrazione è in pausa, per il quale usiamo la sola lettura SpeechSynthesis.paused proprietà. Se la narrazione è in pausa, è necessario riprendi la narrazione sul pulsante clic, che possiamo ottenere utilizzando il SpeechSynthesis.resume () metodo.

2. Pausa

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

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

3. Stop

Il onClickStop () la funzione è costruito in modo simile a onClickPause (). Se il discorso è in corso, noi smettila chiamando il SpeechSynthesis.cancel () metodo che rimuove tutte le espressioni.

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

Si noti che sulla cancellazione della parola, il alla fine l'evento viene automaticamente attivato, e abbiamo già aggiunto il codice di ripristino flag al suo interno. però, c'è un bug nel browser Safari che impedisce a questo evento di sparare, ecco perché abbiamo reimpostato la bandiera nel onClickStop () funzione. Non devi farlo se non vuoi supportare Safari.

Supporto per il browser

Tutte le ultime versioni dei browser moderni avere 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 Ã ?? Â ° Ã ... Â¸UN¢Â Â Â Â Â Â £ Text to Speech - JavaScript di HONGKIAT (@hkdc) su CodePen.