Teksti-puhe -ominaisuuden lisääminen millä tahansa Web-sivulla

teksti puheeksi ominaisuus viittaa tekstin puhuttu kertomus näkyy laitteessa. Tällä hetkellä laitteet, kuten kannettavat tietokoneet, tabletit ja matkapuhelimet on jo tämä ominaisuus. Kaikki näissä laitteissa toimivat sovellukset, kuten web-selain, voivat hyödyntää sitä, ja laajentaa sen toimivuutta. Kerronta-ominaisuus voi olla sopiva apu sovellukseen näyttää runsaasti tekstiä, kuten se tarjoaa mahdollisuuden kuunnella verkkosivuston kävijöille.

Web-puheen API

Web Speech JavaScript API on portti käyttää teksti-puhe-toimintoa selaimella. Jos siis haluat ottaa käyttöön tekstin puheeksi -toiminnon tekstiraskaalla verkkosivulla, ja lukijat voivat kuunnella sisältöä, voit käyttää tätä kätevää sovellusliittymää, tai tarkemmin sanottuna sen SpeechSynthesis liitäntä.

Alkuperäisen koodin ja tuen tarkistus

Aloita luomalla verkkosivu, jossa on Minulla on esimerkkiteksti, josta kerrotaan, ja kolme painiketta.

     
  Jänis monia ystäviä
  Jänis oli erittäin suosittu… 
 Mutta hän kieltäytyi ja totesi, että… 
  Tarinan opetus…

Painikkeet ovat ohjausta. Nyt meidän on varmistettava, että UA tukee SpeechSynthesis käyttöliittymä. Voit tehdä tämän tarkistamalla JavaScriptin nopeasti, jos ikkuna objektilla on 'SpeechSynthesis' omaisuus, tai ei.

 onload = toiminto () if ('puheSynteesi' ikkunassa) / * puhesynteesi tuettu * / other / * puhesynteesiä ei tueta * /

Jos speechSynthesis on saatavilla, ensin me luo viite speechSynthesis että annamme syntetisaattori muuttuja. Me myös aloittaa lipun kanssa väärä arvo (näemme sen tarkoituksen myöhemmin postissa) ja me luo viittauksia ja napsauta tapahtumakäsittelijöitä kolmelle painikkeelle (toisto, tauko, pysäytys).

Kun käyttäjä napsauttaa jotakin painiketta, sen vastaava toiminto (onClickPlay (), onClickPause (), onClickStop ()) kutsutaan.

 jos ('puheSynteesi' ikkunassa) var synth = puheSynteesi; var flag = false; / * viittaukset painikkeisiin * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * klikkaa tapahtumakäsittelijöitä painikkeille * / playEle.addEventListener ('klikkaa', onClickPlay); pauseEle.addEventListener ('napsauta', onClickPause); stopEle.addEventListener ('klikkaa', onClickStop); toiminto onClickPlay ()  -toiminto onClickPause ()  -toiminto onClickStop ()

Luo mukautetut toiminnot

Nyt rakentaa napsautustoiminnot kolmesta yksittäisestä painikkeesta, jotka tapahtuman käsittelijät kutsuvat.

1. Toista / jatka

Kun Play-painiketta napsautetaan, ensin Tarkista lippu. Jos se on väärä, asetimme sen totta, joten jos painiketta napsautetaan myöhemmin, koodi sen sisällä ensimmäinen jos ehto ei toteudu (ei ennen kuin lippu on väärä uudelleen).

Sitten me luo uusi esimerkki SpeechSynthesisUtterance käyttöliittymä, joka pitää tietoa puheesta, kuten luettavasta tekstistä, puheen äänenvoimakkuudesta, puhetusta äänestä, nopeudesta, puheesta ja puheen kielestä. Lisäämme artikkelin tekstin konstruktorin parametrina, ja määritä se lausahdus muuttuja.

 toiminto onClickPlay () if (! flag) flag = totta; lausunto = uusi SpeechSynthesisUtterance (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = toiminto () flag = false; ; synth.speak (ilmaisu);  if (synth.paused) / * unpause / resume narration * / synth.resume ();

Käytämme SpeechSynthesis.getVoices () menetelmä nimetä puheeksi ääni käyttäjän laitteessa käytettävissä olevista äänistä. Koska tämä menetelmä palauttaa joukon kaikkia käytettävissä olevia ääniasetuksia laitteessa, me määritä ensimmäinen käytettävissä oleva äänen ääni käyttämällä utterance.voice = synth.getVoices () [0]; selvitys.

lopussa ominaisuus edustaa tapahtumakäsittelijää suoritetaan, kun puhe on valmis. Sen sisällä muutamme arvon lippu muuttuja takaisin vääriin niin että koodi, joka aloittaa puheen voidaan suorittaa kun painike on napsautettiin uudelleen.

Sitten me kutsumme SpeechSynthesis.speak () menetelmää aloita kertomus. Meidän on myös tarkistettava jos kertomus on keskeytetty, jota käytämme vain luku -tilassa SpeechSynthesis.paused omaisuutta. Jos kerronta on keskeytetty, meidän täytyy jatka kertomusta painikkeella, jonka voimme saavuttaa käyttämällä SpeechSynthesis.resume () menetelmä.

2. Keskeytä

Luo nyt onClickPause () toiminto, jossa tarkastamme ensin jos kerronta on käynnissä eikä sitä ole keskeytetty. Voimme testata näitä ehtoja hyödyntämällä SpeechSynthesis.speaking ja SpeechSynthesis.paused ominaisuudet. Jos molemmat ehdot ovat totta, meidän onClickPause () toimia keskeyttää puheen soittamalla SpeechSynthesis.pause () menetelmä.

 toiminto onClickPause () if (synth.speaking &&! synth.paused) / * tauko kerronta * / synth.pause ();

3. Lopeta

onClickStop () toiminto on rakennettu samalla tavalla onClickPause (). Jos puhe on käynnissä, me lopeta soittamalla SpeechSynthesis.cancel () menetelmä poistaa kaikki sanat.

 toiminto onClickStop () if (synth.speaking) / * lopettaa kertomuksen * / / * safarille * / flag = false; synth.cancel ();

Huomaa, että puhelun peruuttamisessa lopussa tapahtuma käynnistetään automaattisesti, ja olimme jo lisänneet lipun nollauskoodin sen sisälle. kuitenkin, Safarin selaimessa on virhe joka estää tämän tapahtuman ampumisen, siksi palautimme lipun onClickStop () toimia. Sinun ei tarvitse tehdä sitä, jos et halua tukea Safaria.

Selaimen tuki

Kaikki uusimmat versiot nykyisistä selaimista tukevat täysin tai osittain puhesynteesin API: lle. Webkit-selaimet eivät toista puhetta useista välilehdistä, tauko on buginen (toimii mutta buginen), ja puhe ei palautu, kun käyttäjä lataa sivun Webkit-selaimissa.

Työskentelyesitys

Tutustu alla olevaan live-esittelyyn tai tutustu koko koodiin Githubissa.

Katso kynää Ã ° Â ° Ã… Â¸Ã¢Â? Â Â Â Â Â Â Â £ teksti puheeksi - JavaScript by HONGKIAT (@hkdc) CodePenissä.