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.

Beste Mobile Apps for Sensory Impairment [Infographic]

Til tross for måten vi misbruker teknologi, er et av dens mål å hjelpe oss med å forbedre vår livsstil. Dette inkluderer brukere som kan ha fysisk funksjonshemning eller sensorisk nedsatthet . I dette infografiske hjemmet til helsepersonellpasninger, ser vi på noen av de beste programmene for brukere som har nedsatt syn eller hørselshemmede.Disse

(Tekniske og design tips)

Administrer prosjektet ditt enkelt med teamet ditt med Solo

Å administrere et prosjektteam er ofte en utfordrende oppgave. Hvis gruppemedlemmene dine jobber eksternt fra forskjellige steder, kan det være vanskelig å ordne møter for å spore allas fremgang. Men det er noen gode verktøy som vil gjøre livet ditt mye enklere, for eksempel de som finnes i en fantastisk app, kalt Solo.Solo e

(Tekniske og design tips)