Szöveg-beszéd funkció hozzáadása bármely weblapon

A text-to-speech funkció a egy szöveg beszédes elbeszélése megjelenik egy eszközön. Jelenleg olyan eszközök, mint a laptopok, a tabletek és a mobiltelefonok már rendelkezik ezzel a funkcióval. Bármely ilyen eszközön futó alkalmazás, például egy webböngésző, képes használja ki, és kiterjeszti funkcionalitását. Az elbeszélés funkció alkalmas lehet egy alkalmazás számára bőséges szöveget jelenít meg, mivel lehetőséget nyújt a hallgatásra a látogatóknak.

A Web Speech API

A Web-beszéd JavaScript API az átjáró hozzáférjen a szöveg-beszéd funkcióhoz egy webböngésző segítségével. Tehát, ha szöveges beszéd funkciót szeretne bevezetni egy szöveges nehéz weboldalon, és lehetővé teszi, hogy az olvasók meghallgassák a tartalmat, használhatja ezt a praktikus API-t, vagy pontosabban, SpeechSynthesis felület.

Kezdeti kód és támogatás ellenőrzése

Az indításhoz hozzon létre egy weblapot nekem a szöveges szöveg, és három gomb.

     
  A nyúl sok barátjával
  A nyúl nagyon népszerű volt… 
 De visszautasította, hogy ... 
  Tanulság…

A gombok a az elbeszélés vezérlése. Most meg kell győződnünk arról, hogy a UA támogatja a SpeechSynthesis felület. Ehhez gyorsan ellenőrizzük a JavaScript-et, ha a ablak az objektum a 'SpeechSynthesis' ingatlan, vagy nem.

 onload = function () if ('beszédSynthesis' ablakban) / * támogatott beszédszintézis * /  * beszédszintézis nem támogatott * /

Ha speechSynthesis elérhető, először is referencia létrehozása speechSynthesis amit a szintetizátor változó. Mi is kezdeményezzen egy zászlót a ... val hamis érték (később látni fogjuk a célját), és mi hivatkozások és kattintson az eseménykezelőkre a három gombhoz (Lejátszás, Szünet, Leállítás) is.

Ha a felhasználó a gombok egyikére kattint, a megfelelő funkció (onClickPlay (), onClickPause (), onClickStop ()) hívják.

 if ('beszédSynthesis' ablakban) var synth =beszédSynthesis; var flag = false; / * hivatkozások a * / var playEle = document.querySelector ('# play') gombokra; var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * kattintson a * / playEle.addEventListener ('click', onClickPlay) gombok eseménykezelőire; pauseEle.addEventListener ('click', onClickPause); stopEle.addEventListener ('click', onClickStop); funkció onClickPlay ()  függvény onClickPause ()  függvény onClickStop ()

Hozzon létre egyéni funkciókat

Most nézzük a kattintási funkciók kiépítése az egyes kezelők által hívott három gomb közül.

1. Lejátszás / folytatás

Amikor a Play gombot megnyomja, először mi ellenőrizd a zászló. Ha ez hamis, beállítottuk igaz, így ha a gombot később rákattintják, akkor a kód a első ha a feltétel nem fog végrehajtani (addig, amíg a zászló nem lesz hamis újra).

Aztán mi hozzon létre egy új példányt a SpeechSynthesisUtterance interfész, amely információt tartalmaz a beszédről, mint például az olvasandó szövegről, a beszédkötetről, a beszédhangról, a sebességről, a hangmagasságról és a beszéd nyelvéről. Hozzáadjuk a cikk szöveget mint a konstruktor paramétere, és rendelje hozzá kifejezés változó.

 funkció onClickPlay () if (! flag) flag = true; kifejezés = új SpeechSynthesisUtterance (document.querySelector ('cikk'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = függvény () flag = false; ; synth.speak (megnyilatkozás);  if (synth.paused) / * unpause / resume narration * / synth.resume ();

Használjuk a SpeechSynthesis.getVoices () módszer jelölje ki a beszéd hangját a felhasználói eszközben elérhető hangokból. Mivel ez a módszer egy eszköz összes rendelkezésre álló hangbeállításának tömbjét adja vissza, mi hozzárendelje az első elérhető eszközhangot a utterance.voice = synth.getVoices () [0]; nyilatkozat.

A a végén A tulajdonság egy eseménykezelőt jelent a beszéd befejezése után hajtódik végre. A belsejében megváltoztatjuk a zászló változó vissza hamis úgy, hogy a beszédet elindító kód végrehajtható amikor a gomb van ismét rákattintott.

Aztán hívjuk SpeechSynthesis.speak () módszert kezdje el az elbeszélést. Ellenőrizni kell ha az elbeszélés szünetel, amelyre csak olvasható SpeechSynthesis.paused ingatlan. Ha az elbeszélés szünetel, meg kell folytassa az elbeszélést a gombnyomásra, amelyet a SpeechSynthesis.resume () eljárás.

2. Szünet

Most hozzuk létre a onClickPause () funkció, amelyben először ellenőrizzük ha az elbeszélés folyamatban van és nem szünetel. Ezeket a feltételeket tesztelhetjük a SpeechSynthesis.speaking és a SpeechSynthesis.paused tulajdonságait. Ha mindkét feltétel igaz, akkor onClickPause () funkció szünetelteti a beszédet hívja a SpeechSynthesis.pause () eljárás.

 funkció onClickPause () if (synth.speaking &&! synth.paused) / * szünet narráció * / synth.pause ();

3. Állítsa le

A onClickStop () funkció hasonlóan épült onClickPause (). Ha a beszéd folyamatban van, mi hagyd abba hívja a SpeechSynthesis.cancel () módszer eltávolítja az összes kijelentést.

 funkció onClickStop () if (synth.speaking) / * a narráció * / / * leállítása safari * / flag = false; synth.cancel ();

Ne feledje, hogy a beszéd törlésénél a a végén az esemény automatikusan kikapcsol, és már hozzáadtuk a bélyegző visszaállítási kódját. azonban, van egy hiba a Safari böngészőben ez megakadályozza, hogy ez az esemény lőjön, ezért újraindítottuk a zászlót a onClickStop () funkció. Nem kell tennie, ha nem akarja támogatni a Safari programot.

Böngésző támogatás

A legújabb böngészők legújabb verziói teljes vagy részleges támogatás a beszédszintézis API számára. A Webkit-böngészők nem játszanak több lapról beszédet, a szüneteltetés hibás (működik, de hibás), és a beszéd nem áll vissza, ha a felhasználó újratölti az oldalt a Webkit böngészőkben.

Működő demó

Nézd meg az alábbi élő bemutatót, vagy nézd meg a teljes kódot a Githubon.

Lásd a tollat Â Â ° Ã… Â¸Ã¢Â? Â Â Â Â Â Â Â £ a szöveg beszéd - JavaScript HONGKIAT (@hkdc) a CodePen.