Sådan tilføjes tekst-til-tale-funktion på enhver webside

Det tekst til tale funktion refererer til talet fortælling af en tekst vises på en enhed. På nuværende tidspunkt udstyr som bærbare computere, tabletter og mobiltelefoner Har allerede denne funktion. Enhver applikation, der kører på disse enheder, f.eks. En webbrowser, kan gøre brug af det, og udvide dets funktionalitet. Fortællingsfunktionen kan være en passende hjælp til en applikation der viser rigelig tekst, som det giver mulighed for at lytte til besøgende på webstedet.

Web-tale-API'en

Det Web-tale JavaScript API er indgangen til Få adgang til funktionen Tekst-til-tale ved hjælp af en webbrowser. Så hvis du vil introducere tekst-til-tale-funktionalitet på en tekst-tung webside og tillade dine læsere at lytte til indholdet, kan du gøre brug af denne praktiske API eller, for at være mere specifik, dens SpeechSynthesis grænseflade.

Indledende kode og support check

For at komme i gang, lad os oprette en webside med mig prøve tekst, der skal fortælles, og tre knapper.

     
  Haren med mange venner
  En hare var meget populær med ... 
 Men han afviste og sagde at ... 
  Moralen ved historien…

Knapperne vil være kontroller til fortællingen. Nu skal vi sørge for, om UA støtter SpeechSynthesis grænseflade. For at gøre det, kontrollerer vi hurtigt med JavaScript, hvis vindue objekt har 'SpeechSynthesis' ejendom, eller ikke.

 onload = funktion () if ('speechSynthesis' i vinduet) / * talesyntese understøttet * / else / * talesyntese understøttes ikke * /

Hvis speechSynthesis er tilgængelig, først vi lav en reference til speechSynthesis som vi tildeler til synth variabel. Vi også indlede et flag med falsk værdi (vi vil se dens formål senere i posten), og vi lav referencer og klik på begivenhedshåndteringsprogrammer for de tre knapper (Play, Pause, Stop) også.

Når brugeren klikker på en af knapperne, er den pågældende funktion (onClickPlay (), onClickPause (), onClickStop ()) vil blive kaldt.

 hvis ('speechSynthesis' i vinduet) var synth = speechSynthesis; var flag = false; / * referencer til knapperne * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * klik hændelseshåndtering til knapperne * / playEle.addEventListener ('klik', onClickPlay); pauseEle.addEventListener ('klik', onClickPause); stopEle.addEventListener ('klik', onClickStop); funktion onClickPlay ()  funktion onClickPause ()  funktion onClickStop ()

Opret de brugerdefinerede funktioner

Lad os nu bygge klikfunktionerne af de tre individuelle knapper, som vil blive kaldt af arrangementshåndtererne.

1. Afspil / Genoptag

Når knappen Play klikkes, først vi Tjek flag. Hvis det er falsk, vi satte det på rigtigt, så hvis en gang knappen trykkes senere, koden inde i først hvis tilstanden vil ikke udføres (ikke før flag er falsk igen).

Så vi Opret en ny forekomst af SpeechSynthesisUtterance grænseflade, der indeholder information om talen, som den tekst, der skal læses, talevolumen, talesalget, hastighed, tonehøjde og sprog i talen. Vi tilføjer artiklen tekst som parameter for konstruktøren, og tildele det til ytring variabel.

 funktion onClickPlay () if (! flag) flag = true; utterance = ny SpeechSynthesisUtterance (document.querySelector ('article') .textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (ytring);  hvis (synth.paused) / * unpause / genoptag fortælling * / synth.resume ();

Vi bruger SpeechSynthesis.getVoices () metode til udpege en stemme til talen fra de stemmer, der er tilgængelige i brugerens enhed. Da denne metode returnerer en række af alle de tilgængelige stemmeindstillinger i en enhed, så vi tildele den første tilgængelige enhedsstemme ved at bruge utterance.voice = synth.getVoices () [0]; udmelding.

Det onend ejendom repræsenterer en hændelseshandler, der er udføres, når talen er færdig. Inde i det ændrer vi værdien af flag variabel tilbage til falsk så den kode, der starter talen kan udføres når knappen er klikket igen.

Så kalder vi SpeechSynthesis.speak () metode for at start fortællingen. Vi skal også tjekke hvis fortællingen er pauset, som vi bruger skrivebeskyttet til SpeechSynthesis.paused ejendom. Hvis fortællingen er standset, skal vi genoptag beretningen på knappen klik, som vi kan opnå ved at bruge SpeechSynthesis.resume () metode.

2. Pause

Lad os nu oprette onClickPause () funktion, hvor vi først tjekker hvis fortællingen er vedvarende og ikke pauset. Vi kan teste disse betingelser ved at gøre brug af SpeechSynthesis.speaking og SpeechSynthesis.paused ejendomme. Hvis begge betingelser er sande, vores onClickPause () fungere pauser talen ved at ringe til SpeechSynthesis.pause () metode.

 funktion onClickPause () hvis (synth.speaking &&! synth.paused) / * pause fortælling * / synth.pause ();

3. Stop

Det onClickStop () funktion er bygget ligeledes til onClickPause (). Hvis talen går igang, vi stop det ved at ringe til SpeechSynthesis.cancel () metode det fjerner alle udtalelser.

 funktion onClickStop () hvis (synth.speaking) / * stop fortælling * / / * for safari * / flag = false; synth.cancel ();

Bemærk, at ved aflysning af tale onend Begivenheden afbrydes automatisk, og vi havde allerede tilføjet flag reset kode inde i den. Imidlertid, Der er en fejl i Safari-browseren der forhindrer denne begivenhed i at fyres, det er grunden til, at vi nulstillede flag i onClickStop () fungere. Du behøver ikke gøre det, hvis du ikke vil støtte Safari.

Browser support

Alle seneste versioner af moderne browsere har fuld eller delvis støtte til tale syntese API. Webkit-browsere afspiller ikke tale fra flere faner, pausering er buggy (fungerer men buggy), og tale er ikke nulstillet, når brugeren genindlæser siden i Webkit-browsere.

Arbejde demo

Se kig på live demoen nedenfor, eller tjek den fulde kode på Github.

Se pennen Â ° Ã ... Â¸EN¢Â ?? Â £ £ Tekst til tale - JavaScript af HONGKIAT (@hkdc) på CodePen.