Kaip pridėti teksto į kalbą funkciją bet kuriame tinklalapyje

The iš rašto į kalbą funkcija reiškia sakytinis teksto pasakojimas rodomas įrenginyje. Šiuo metu įrenginiai, pavyzdžiui, nešiojamieji kompiuteriai, tabletės ir mobilieji telefonai jau turi šią funkciją. Bet kokia programa, kuri veikia šiuose įrenginiuose, pvz., Interneto naršyklėje, gali pasinaudoti, ir išplėsti jos funkcionalumą. Pasakojimo funkcija gali būti tinkama pagalba programai rodo gausų tekstą, kaip ji suteikia galimybę klausytis svetainės lankytojams.

Žiniatinklio kalbos API

The „Web Speech JavaScript“ API yra vartai į prieiti prie teksto į kalbą funkciją naudodami interneto naršyklę. Taigi, jei norite įvesti tekstą į kalbą tekstą sunkiu tinklalapiu ir leisti savo skaitytojams klausytis turinio, galite naudoti šią patogią API arba, tiksliau, Kalbėjimo sintezė sąsaja.

Pradinio kodo ir palaikymo patikrinimas

Norėdami pradėti, sukurkime tinklalapį su man pavyzdinis tekstas, kuris turi būti pasakojamas, ir trys mygtukai.

     
  Hare su daugeliu draugų
  Hare buvo labai populiarus ... 
 Bet jis atsisakė, teigdamas, kad… 
  Istorijos moralė…

Mygtukai bus naratyvo kontrolė. Dabar turime įsitikinti, ar UA palaiko Kalbėjimo sintezė sąsaja. Norėdami tai padaryti, mes greitai patikriname „JavaScript“, jei langas objektas turi „kalbos sintezė“ nuosavybė, arba ne.

 onload = function () if ('kalboje sintezė' lange) / * palaikoma kalba sintezė * / kitas / * kalbos sintezė nepalaikoma * /

Jei kalbaSintezė yra prieinama, pirmiausia mes sukurti nuorodą kalbaSintezė mes priskiriame sintezatorius kintamasis. Mes taip pat inicijuoti vėliavą su klaidinga vertė (vėliau matysime jo paskirtį), ir mes kurti nuorodas ir spustelėkite įvykių tvarkytojus už tris mygtukus („Play“, „Pause“, „Stop“), taip pat.

Kai vartotojas spusteli vieną iš mygtukų, atitinkama funkcija (onClickPlay (), onClickPause (), onClickStop ()) bus vadinama.

 jei („kalbosSintezė“ langelyje) var synth = voiceSynthesis; var flag = false; / * nuorodos į mygtukus * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector („# stop“); / * spustelėkite mygtukų * / playEle.addEventListener („spustelėkite“, „onClickPlay“) įvykių tvarkykles; pauseEle.addEventListener („spustelėkite“, „onClickPause“); stopEle.addEventListener („spustelėkite“, „onClickStop“); funkcija onClickPlay ()  funkcija onClickPause ()  funkcija onClickStop ()

Sukurkite pasirinktines funkcijas

Dabar tegul sukurti paspaudimo funkcijas iš trijų atskirų mygtukų, kuriuos vadins įvykių tvarkytojai.

1. Atkurti / tęsti

Paspaudus mygtuką „Play“, pirmiausia mes Patikrink vėliava. Jei tai yra klaidinga, mes jį nustatėme tiesa, taigi, jei bet kuriuo metu paspaudžiamas mygtukas vėliau, kodas viduje Pirmas jei sąlyga nebus vykdoma (ne iki vėliavos klaidinga dar kartą).

Tada mes sukurti naują. \ t SpeechSynthesisUtterance sąsaja, kurioje saugoma informacija apie kalbą, pvz., skaitytinas tekstas, kalbos apimtis, balsas, kuriuo kalbama, greitis, garsas ir kalbos kalba. Pridedame straipsnio tekstą kaip konstruktoriaus parametras, ir priskirti jį pasisakymas kintamasis.

 funkcija onClickPlay () if (! flag) flag = tiesa; pasisakymas = naujas SpeechSynthesisUtterance (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = funkcija () flag = false; ; synth.speak (pasisakymas);  if (synth.paused) / * unpause / resume narration * / synth.resume ();

Mes naudojame Kalbos sintezės.getVoices () metodas paskirti kalbai balsą iš vartotojo prietaiso galimų balsų. Kadangi šis metodas grąžina įrenginio visų galimų balso parinkčių masyvą, mes priskirkite pirmąjį galimą įrenginio balsą naudojant utterance.voice = synth.getVoices () [0]; pareiškimas.

The pabaigoje nuosavybė reiškia įvykio tvarkytoją kai kalbama baigiama. Jo viduje mes keičiame vertę vėliava kintamasis atgal į klaidingą kodą, kuris pradeda kalbą galima atlikti kai mygtukas yra vėl paspaudėte.

Tada mes vadiname „SpeechSynthesis.speak“ () metodas pradėti pasakojimą. Taip pat turime patikrinti jei pasakojimas yra sustabdytas, kuriam mes naudojame tik skaitymą SpeechSynthesis.paused nuosavybė. Jei pasakojimas yra sustabdytas, mums reikia atnaujinti pasakojimą mygtuko paspaudimu, kurį galime pasiekti naudojant SpeechSynthesis.resume () metodas.

2. Pauzė

Dabar sukurkime onClickPause () funkcija, kurioje mes pirmą kartą tikriname jei pasakojimas vyksta ir nėra sustabdytas. Mes galime išbandyti šias sąlygas naudodami SpeechSynthesis.speaking ir SpeechSynthesis.paused savybės. Jei abi sąlygos yra teisingos, mūsų onClickPause () funkcija pristabdo kalbą skambindami SpeechSynthesis.pause () metodas.

 funkcija onClickPause () if (synth.speaking &&! synth.paused) / * pauzės pasakojimas * / synth.pause ();

3. Sustabdyti

The onClickStop () funkcija yra pastatytas panašiai kaip onClickPause (). Jei kalba vyksta, mes sustabdyti skambindami Kalbėjimo sintezė. metodas pašalina visus žodžius.

 funkcija onClickStop () if (synth.speaking) / * sustabdyti pasakojimą * / / * safari * / flag = false; synth.cancel ();

Atkreipkite dėmesį, kad kalbėjimo atšaukimo metu pabaigoje įvykis automatiškai atleidžiamas, ir mes jau pridėjome vėliavos nustatymo kodą. Tačiau, „Safari“ naršyklėje yra klaida tai neleidžia šiam įvykiui šaudyti, todėl vėliavą perkėlėme į onClickStop () funkcija. Jūs neturite to daryti, jei nenorite palaikyti „Safari“.

Naršyklės palaikymas

Visos naujausios modernios naršyklės versijos turėti visišką ar dalinę paramą kalbėjimo sintezės API. „Webkit“ naršyklės nespėja kalbėti iš kelių skirtukų, pristabdymas yra klaidingas (veikia, bet buggy), o kalba nėra atstatyta, kai vartotojas įkelia puslapį į Webkit naršykles.

Darbo demo

Pažvelkite į žemiau pateiktą demonstraciją arba patikrinkite visą kodą „Github“.

Žr. Švirkštimo priemonę?¸Ã¢Â? Â Â Â Â £ Tekstas į kalbą - JavaScript pagal HONGKIAT (@hkdc) dėl CodePen.