Jak přidat funkci převodu textu na řeč na libovolné webové stránce

text na řeč funkce odkazuje na mluvené vyprávění textu na přístroji. V současné době zařízení, jako jsou notebooky, tablety a mobilní telefony tuto funkci již mají. Každá aplikace spuštěná na těchto zařízeních, například ve webovém prohlížeči, může využít, a rozšířit jeho funkčnost. Funkce pro vyprávění může být vhodnou pomůckou pro aplikaci, která ji má zobrazí bohatý text, jako takový nabízí možnost poslechu návštěvníkům webových stránek.

Web Speech API

Rozhraní API jazyka Web Speech je brána přístup k funkci Text-to-Speech pomocí webového prohlížeče. Pokud tedy chcete zavést funkci převodu textu na řeč na webové stránce s těžkým textem a umožnit čtenářům, aby si poslechli obsah, můžete využít tohoto praktického rozhraní API nebo konkrétněji jeho SpeechSynthesis rozhraní.

Kontrola počátečního kódu a podpory

Chcete-li začít, vytvořte webovou stránku pomocí mi ukázkový text, který má být vyprávěn, a tři tlačítka.

     
  Zajíc s mnoha přáteli
  Zajíc byl velmi oblíbený u… 
 Odmítl však, že… 
  Morální příběh…

Tlačítka budou kontroly vyprávění. Nyní se musíme ujistit, zda UA podporuje SpeechSynthesis rozhraní. Chcete-li tak učinit, rychle zkontrolujeme JavaScript, pokud okno objekt má 'řečiSynthesis' vlastnictví, nebo ne.

 onload = function () if ('speechSynthesis' v okně) / * syntéza řeči podporována * / else / * syntéza řeči není podporována * /

Li speechSynthesis je k dispozici, nejprve vytvořit odkaz pro speechSynthesis které přidělujeme synth proměnná. My také zahájit vlajku s Nepravdivé hodnotu (uvidíme její účel později v příspěvku) a my vytvořit odkazy a obslužné rutiny události click pro tři tlačítka (Play, Pause, Stop).

Když uživatel klikne na jedno z tlačítek, jeho příslušná funkce (onClickPlay (), onClickPause (), onClickStop ()).

 if ('speechSynthesis' v okně) var synth = speechSynthesis; var flag = false; / * odkazy na tlačítka * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * obslužné rutiny události pro tlačítka * / playEle.addEventListener ('click', onClickPlay); pauseEle.addEventListener ('click', onClickPause); stopEle.addEventListener ('click', onClickStop); funkce onClickPlay ()  funkce onClickPause ()  funkce onClickStop ()

Vytvořte vlastní funkce

Tak pojďme vytvořit funkce pro klepnutí ze tří jednotlivých tlačítek, která budou volána obsluhou události.

1. Přehrát / Pokračovat

Když kliknete na tlačítko Přehrát, nejprve zkontrolovat vlajka. Jestli je to Nepravdivé, nastavili jsme to skutečný, takže pokud je tlačítko kdykoliv kliknuto, kód uvnitř První -li podmínka nebude provedena (ne dokud vlajka není Nepravdivé znovu).

Potom jsme vytvořit novou instanci SpeechSynthesisUtance rozhraní, které obsahuje informace o řeči, jako je text, který má být čten, hlasitost řeči, hlas mluvený, rychlost, hřiště a jazyk řeči. Přidáme text článku jako parametr konstruktoru, a přiřadit jej k promluva proměnná.

 funkce onClickPlay () if (! flag) flag = true; utterance = nová SpeechSynthesisUtterance (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (promluva);  if (synth.paused) / * unpause / resume vyprávění * / synth.resume ();

Používáme SpeechSynthesis.getVoices () metodu určit hlas pro řeč z hlasu dostupného v zařízení uživatele. Protože tato metoda vrací pole všech dostupných možností hlasu v zařízení, my přiřadit první dostupný hlas zařízení pomocí utterance.voice = synth.getVoices () [0]; prohlášení.

na konci vlastnost představuje obslužnou rutinu události po dokončení hovoru. Uvnitř to změníme hodnotu vlajka proměnná zpět na false tak, aby kód, který začíná řeči lze provést když je tlačítko znovu klikli.

Pak zavoláme SpeechSynthesis.speak () způsob, jak začněte vyprávět. Musíme také zkontrolovat pokud je vyprávění pozastaveno, pro které používáme pouze pro čtení SpeechSynthesis.paused vlastnictví. Pokud je vyprávění pozastaveno, musíme pokračujte ve vyprávění kliknutím na tlačítko, které můžeme dosáhnout pomocí SpeechSynthesis.resume () metoda.

2. Pozastavení

Nyní vytvořme onClickPause () funkci, ve které nejprve zkontrolujeme pokud vyprávění probíhá a není pozastaveno. Tyto podmínky můžeme otestovat pomocí SpeechSynthesis.speaking a SpeechSynthesis.paused vlastnosti. Pokud jsou obě podmínky pravdivé, naše onClickPause () funkce pozastaví řeč voláním SpeechSynthesis.pause () metoda.

 funkce onClickPause () if (synth.speaking &&! synth.paused) / * pauza vyprávění * / synth.pause ();

3. Zastavte

onClickStop () funkce je postaven podobně onClickPause (). Pokud řeč pokračuje, my přestaň voláním SpeechSynthesis.cancel () metodu, která odstraní všechny promluvy.

 funkce onClickStop () if (synth.speaking) / * stop naration * / / * pro safari * / flag = false; synth.cancel ();

Všimněte si, že na zrušení řeči na konci událost je automaticky aktivována, a my jsme do něj již přidali kód pro reset vlajky. nicméně, v prohlížeči Safari je chyba To zabrání této události z palby, proto jsme resetovali vlajku v onClickStop () funkce. Nemusíte to dělat, pokud nechcete podporovat Safari.

Podpora prohlížeče

Všechny nejnovější verze moderních prohlížečů plnou nebo částečnou podporu pro API syntézy řeči. Prohlížeče Webkit nepřehrávají řeči z více karet, pozastavení je buggy (funguje, ale buggy), a řeč není resetována, když uživatel znovu načte stránku v prohlížečích Webkit.

Pracovní demo

Podívejte se na živé demo níže, nebo se podívejte na celý kód na Github.

Viz Pen Ã Â ° °¸A¢Â ?? Â ?? â'Â £ Text na řeč - JavaScript by HONGKIAT (@ hkdc) na CodePen.