Slik legger du til tekst-til-tale-funksjon på hvilken som helst webside

Tekst-til-tale- funksjonen refererer til den talte fortellingen av en tekst som vises på en enhet. For tiden har enheter som bærbare datamaskiner, tabletter og mobiltelefoner allerede denne funksjonen . Ethvert program som kjører på disse enhetene, for eksempel en nettleser, kan benytte seg av det og utvide funksjonaliteten . Fortellingsfunksjonen kan være et passende hjelpemiddel for et program som viser rikelig tekst, da det gir mulighet til å lytte til besøkende på nettstedet.

Web-tale-API

JavaScript-API for nettprat er inngangsporten for å få tilgang til tekst-til-tale-funksjonen av en nettleser . Så hvis du vil presentere tekst-til-tale-funksjonalitet på en tekst-tung nettside, og la leserne høre på innholdet, kan du gjøre bruk av denne praktiske API-en, eller, for å være mer spesifikk, er SpeechSynthesis grensesnittet .

Innledende kode og støtte sjekk

For å komme i gang, la oss lage en nettside med meg prøvetekst som skal fortelles, og tre knapper .

 Haren med mange venner 
En hare var veldig populær med ...
Men han nektet, og sa at ...
 Moral of the story ... 

Knappene vil være kontrollene for fortellingen . Nå må vi sørge for at UA støtter SpeechSynthesis grensesnittet. For å gjøre det, sjekker vi raskt med JavaScript hvis window objektet har egenskapen 'speechSynthesis', eller ikke.

 onload = funksjon () {if ('speechSynthesis' i vinduet) {/ * talesyntese støttes * /} annet {/ * talesyntese støttes ikke * /}} 

Hvis speechSynthesis er tilgjengelig, oppretter vi først en referanse for speechSynthesis som vi tilordner speechSynthesis . Vi starter også et flagg med den false verdien (vi ser formålet senere i innlegget), og vi lager referanser og klikker hendelsesbehandlere for de tre knappene (Spill, Pause, Stopp) også.

Når brukeren klikker på en av knappene, blir den aktuelle funksjonen ( onClickPlay(), onClickPause(), onClickStop() ) kalt.

 hvis ('speechSynthesis' i vinduet) {var synth = speechSynthesis; var flagg = false; / * referanser til knappene * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * klikk hendelsesbehandlere for knappene * / playEle.addEventListener ('klikk', onClickPlay); pauseEle.addEventListener ('klikk', onClickPause); stopEle.addEventListener ('klikk', onClickStop); funksjon onClickPlay () {} funksjon onClickPause () {} funksjon onClickStop () {}} 

Lag de tilpassede funksjonene

La oss nå bygge klikkfunksjonene til de tre individuelle knappene som blir kalt av hendelseshåndtererne.

1. Spill / Fortsett

Når Play-knappen klikkes, kontrollerer vi først flag . Hvis det er false, setter vi det til true, så hvis noen gang knappen klikkes senere, vil koden i den første if betingelsen ikke utføres (ikke til flagget er false igjen).

Deretter oppretter vi en ny forekomst av SpeechSynthesisUtterance grensesnittet som inneholder informasjon om talen, for eksempel teksten som skal leses, talevolum, talespråk, hastighet, tonehøyde og språk i talen. Vi legger til artikkelteksten som parameter for konstruktøren, og tilordner den til utterance .

 funksjon onClickPlay () {if (! flagg) {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 / gjenoppta fortelling * / synth.resume (); }} 

Vi bruker metoden SpeechSynthesis.getVoices() til å SpeechSynthesis.getVoices() en stemme for talen fra stemmeene som er tilgjengelige i brukerens enhet. Da denne metoden returnerer en rekke av alle tilgjengelige utterance.voice = synth.getVoices()[0]; i en enhet, tilordner vi den første tilgjengelige utterance.voice = synth.getVoices()[0]; ved å bruke utterance.voice = synth.getVoices()[0]; uttalelse.

onend egenskapen representerer en hendelseshåndterer som utføres når talen er ferdig . Innsiden av det endrer vi verdien av flag tilbake til falsk, slik at koden som starter talen kan utføres når knappen klikkes på nytt .

Da kaller vi SpeechSynthesis.speak() for å starte beretningen . Vi må også sjekke om beretningen er pauset, for hvilken vi bruker den SpeechSynthesis.paused egenskapen. Hvis beretningen er midlertidig stoppet, må vi gjenoppta fortellingen på knappeklikk, som vi kan oppnå ved å bruke metoden SpeechSynthesis.resume() .

2. Pause

La oss nå opprette onClickPause() -funksjonen der vi først kontrollerer om fortellingen er pågående og ikke stoppet . Vi kan teste disse betingelsene ved å benytte SpeechSynthesis.speaking og SpeechSynthesis.paused properties. Hvis begge forholdene er sanne, pauser funksjonen onClickPause() pausen ved å kalle metoden SpeechSynthesis.pause() .

 funksjon onClickPause () {hvis (synth.speaking &&! synth.paused) {/ * pause fortellelse * / synth.pause (); }} 

3. Stopp

onClickStop() -funksjonen er bygget på samme måte som onClickPause() . Hvis talen fortsetter, stopper vi det ved å ringe metoden SpeechSynthesis.cancel() som fjerner alle uttalene .

 funksjon onClickStop () {hvis (synth.speaking) {/ * stopp fortelling * / / * for safari * / flagg = false; synth.cancel (); }} 

Vær oppmerksom på at ved avbrudd av tale blir onend automatisk slått av, og vi hadde allerede lagt til flagget tilbakestilt kode inne i det. Det er imidlertid en feil i Safari-nettleseren som forhindrer denne hendelsen fra å skyte. Derfor tilbakestilte vi flagget i onClickStop() -funksjonen. Du trenger ikke å gjøre det hvis du ikke vil støtte Safari.

Nettleserstøtte

Alle siste versjoner av moderne nettlesere har full eller delvis støtte for talesyntese-API. Webkit-nettlesere spiller ikke tale fra flere faner, pause er buggy (fungerer men buggy), og tale tilbakestilles ikke når brukeren laster om siden i Webkit-nettlesere.

Arbeidsdemo

Ta en titt på live-demoen under, eller sjekk ut hele koden på Github.

Se pennen til à ... ø ¢ â,  "Ã,  £ Tekst til tale - JavaScript av HONGKIAT (@hkdc) på CodePen.

10 Minimal iOS-spill for å drepe kjedsomhet

Jeg må tilstå, jeg elsker minimal iOS-spill. Jeg nyter den smarte trengs for å skape noe engasjerende, men likevel så enkelt. Mens jeg liker forseggjorte spill som sivilisasjon, er det så mye innhold og dybde det virker faktisk lettere å gjøre noe bra. Med de begrensede ressursene og skjermbildet på iOS-enheter, er enklere, men godt laget spill i forkant. I denn

(Tekniske og design tips)

En introduksjon til CSS Scroll Snap Points

CSS Scroll Snap Module er en webstandard som gir oss litt kontroll over å bla på en nettside, slik at vi kan få brukere til å bla til bestemte deler av en side i stedet for å bare hvor som helst på den.Rulling er en av de mest utførte handlinger på et nettsted. Nettlesere, gjennom årene, har forbedret rullingsytelsen til å passe til brukerens smidige fingerstyrke. Og utvik

(Tekniske og design tips)