Tekst-naar-spraakfunctie toevoegen op elke webpagina

De tekst naar spraak functie verwijst naar de gesproken vertelling van een tekst weergegeven op een apparaat. Op dit moment apparaten zoals laptops, tablets en mobiele telefoons heb deze functie al. Elke toepassing die op deze apparaten wordt uitgevoerd, zoals een webbrowser, kan maak er gebruik van, en breid zijn functionaliteit uit. De verhaalfunctie kan een geschikt hulpmiddel zijn voor een toepassing die geeft overvloedige tekst weer, zoals biedt de mogelijkheid om te luisteren voor bezoekers van de website.

De Web Speech API

De Web Speech JavaScript API is de toegangspoort tot toegang tot de Text-to-Speech-functie via een webbrowser. Dus als u tekst-naar-spraak-functionaliteit wilt introduceren op een webpagina met veel tekst en uw lezers naar de inhoud wilt laten luisteren, kunt u gebruikmaken van deze handige API, of, om meer specifiek te zijn, zijn Spraaksynthese interface.

Initiële code en ondersteuning controleren

Laten we om aan de slag te gaan een webpagina maken met ik voorbeeld tekst om te worden verteld, en drie knoppen.

 
    
 
 
De haas met veel vrienden
  
Een haas was erg populair bij ... 
 
Maar hij weigerde en verklaarde dat ... 
  
Moraal van het verhaal… 
 
 

De knoppen zijn de controles voor de vertelling. Nu moeten we ervoor zorgen als het UA ondersteunt de Spraaksynthese interface. Om dit te doen, controleren we snel met JavaScript of het venster object heeft de 'spraaksynthese' eigendom, of niet.

 onload = function () if ('speechSynthesis' in venster) / * spraaksynthese ondersteund * / else / * spraaksynthese niet ondersteund * / 

Als spraaksynthese is beschikbaar, eerst wij maak een referentie voor spraaksynthese die we toewijzen aan de synth variabel. Wij ook start een vlag met de vals waarde (we zullen het doel later in de post zien), en wij maak referenties en klik op event handlers voor de drie knoppen (afspelen, pauzeren, stoppen).

Wanneer de gebruiker op een van de knoppen klikt, wordt de bijbehorende functie (onClickPlay (), onClickPause (), onClickStop ()) zal gebeld worden.

 if ('speechSynthesis' in venster) var synth = speechSynthesis; var flag = false; / * verwijzingen naar de knoppen * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * klik op gebeurtenishandlers voor de knoppen * / playEle.addEventListener ('klik', onClickPlay); pauseEle.addEventListener ('klik', onClickPause); stopEle.addEventListener ('klik', onClickStop); functie onClickPlay ()  functie onClickPause ()  functie onClickStop ()  

Maak de aangepaste functies

Laten we nu bouw de klikfuncties van de drie afzonderlijke knoppen die door de gebeurtenishandlers worden aangeroepen.

1. Afspelen / hervatten

Wanneer op de knop Afspelen wordt geklikt, eerst controleer de vlag. Als het is vals, we hebben het ingesteld waar, dus als op een later tijdstip op de knop wordt geklikt, wordt de code in de eerste als voorwaarde wordt niet uitgevoerd (niet totdat de vlag is vals nog een keer).

Dan gaan we maak een nieuw exemplaar van de SpeechSynthesisUtterance interface met informatie over de spraak, zoals de te lezen tekst, het gesproken woordvolume, de gesproken stem, snelheid, toonhoogte en taal van de spraak. We voegen de artikeltekst toe als parameter van de constructor, en wijs het toe aan de uiting veranderlijk.

 function onClickPlay () if (! flag) flag = true; uitspreken = nieuwe SpeechSynthesis Uitwisseling (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (uitingen);  if (synth.paused) / * unpause / hervatten vertelling * / synth.resume ();  

Wij gebruiken de SpeechSynthesis.getVoices () methode om duid een stem aan voor de toespraak van de beschikbare stemmen op het apparaat van de gebruiker. Aangezien deze methode een array van alle beschikbare spraakopties in een apparaat retourneert, wij wijs de eerste beschikbare apparaatstem toe door de utterance.voice = synth.getVoices () [0]; uitspraak.

De eindeloos eigenschap vertegenwoordigt een gebeurtenishandler die dat wel is uitgevoerd wanneer de spraak is voltooid. Binnenin veranderen we de waarde van de vlag veranderlijk terug naar false zodat de code die de spraak start kan worden uitgevoerd wanneer de knop is klikte opnieuw.

Dan bellen we de SpeechSynthesis.speak () methode om start de vertelling. We moeten ook controleren als het verhaal is gepauzeerd, waarvoor we de alleen-lezen gebruiken SpeechSynthesis.paused eigendom. Als het verhaal is onderbroken, moeten we dit doen hervat de vertelling op de knop klikken, die we kunnen bereiken met behulp van de SpeechSynthesis.resume () methode.

2. Pauzeer

Laten we nu de onClickPause () functie waarin we eerst controleren als het verhaal aan de gang is en niet is gepauzeerd. We kunnen deze voorwaarden testen door gebruik te maken van de SpeechSynthesis.speaking en de SpeechSynthesis.paused eigenschappen. Als beide voorwaarden waar zijn, onze onClickPause () functie pauzeert de spraak door het te bellen SpeechSynthesis.pause () methode.

 function onClickPause () if (synth.speaking &&! synth.paused) / * pauzeer vertelling * / synth.pause ();  

3. Stop

De onClickStop () functie is op dezelfde manier gebouwd onClickPause (). Als de speech aan de gang is, wij stop er mee door het te bellen SpeechSynthesis.cancel () methode dat verwijdert alle uitingen.

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

Merk op dat bij het annuleren van spraak, de eindeloos evenement wordt automatisch geactiveerd, en we hebben de code voor het opnieuw instellen van de vlag al erin opgenomen. Echter, er is een fout in de Safari-browser die voorkomt dat deze gebeurtenis wordt geactiveerd, daarom hebben we de vlag in de onClickStop () functie. U hoeft het niet te doen als u Safari niet wilt ondersteunen.

Browserondersteuning

Alle nieuwste versies van moderne browsers volledige of gedeeltelijke ondersteuning hebben voor de API voor spraaksynthese. Webkit-browsers spelen geen spraak van meerdere tabbladen, pauzeren is buggy (werkt maar bugt) en spraak wordt niet gereset wanneer de gebruiker de pagina opnieuw laadt in Webkit-browsers.

Werkende demo

Bekijk de live demo hieronder, of bekijk de volledige code op Github.

Zie de Pen à ??  ° à ... ¸EEN¢Tekst naar spraak - JavaScript door HONGKIAT (@hkdc) op CodePen.