Ako pridať funkciu Text-to-Speech na ľubovoľnej webovej stránke

prevod textu na reč funkcia odkazuje na hovorené rozprávanie textu na zariadení. V súčasnosti sa používajú zariadenia ako prenosné počítače, tablety a mobilné telefóny už majú túto funkciu. Každá aplikácia spustená na týchto zariadeniach, ako je napríklad webový prehliadač, môže využiť, a rozšíriť jeho funkčnosť. Funkcia rozprávania môže byť vhodnou pomôckou pre aplikáciu, ktorá zobrazuje hojný text, ako to ponúka možnosť počúvania návštevníkom webových stránok.

Rozhranie API pre webové reči

Aplikácia JavaScript API pre webové reči je brána do prístup k funkcii Text-to-Speech prostredníctvom webového prehliadača. Takže ak chcete zaviesť funkčnosť textu na reč na textovo náročnej webovej stránke a umožniť čitateľom počúvať obsah, môžete využiť tento praktický API alebo, ako presnejšie, jeho SpeechSynthesis rozhranie.

Počiatočný kód a podpora kontroly

Ak chcete začať, vytvorte webovú stránku vzorový text, ktorý sa má rozprávať, a tri tlačidlá.

     
  Zajac s mnohými priateľmi
  Zajačik bol veľmi obľúbený ... 
 Ale on odmietol a vyhlásil, že ... 
  Ponaučenie z príbehu…

Tlačítka budú kontroly pre rozprávanie. Teraz sa musíme uistiť, či UA podporuje SpeechSynthesis rozhranie. Ak to chcete urobiť, rýchlo skontrolovať pomocou JavaScript, ak okno objekt má 'SpeechSynthesis' vlastnosť, alebo nie.

 onload = funkcia () if ('speechSynthesis' v okne) / * podporovaná syntéza reči * / iná / * syntéza reči nie je podporovaná * /

ak speechSynthesis je k dispozícii, najprv my vytvoriť referenciu pre speechSynthesis ktoré pridelíme synth variabilné. Tiež spustite príznak s nepravdivý hodnota (uvidíme jeho účel neskôr v príspevku), a my vytvárať referencie a obsluha udalostí kliknutí pre tri tlačidlá (Play, Pause, Stop).

Keď používateľ klikne na jedno z tlačidiel, príslušnú funkciu (onClickPlay (), onClickPause (), onClickStop ()).

 if ('speechSynthesis' v okne) var synth = speechSynthesis; var flag = false; / * odkazy na tlačidlá * / var playEle = document.querySelector ('# play'); var pauzaEle = document.querySelector ('# pauza'); var stopEle = dokument.querySelector ('# stop'); / * klienti udalostí pre tlačidlá * / playEle.addEventListener ('click', onClickPlay); pauzaEle.addEventListener ('kliknite', onClickPause); stopEle.addEventListener ("kliknite", onClickStop); funkcia onClickPlay ()  funkcia onClickPause ()  funkcia onClickStop ()

Vytvorte vlastné funkcie

Teraz poďme vytvoriť funkcie kliknutia z troch jednotlivých tlačidiel, ktoré budú volané spracovateľmi udalostí.

1. Prehrať / Pokračovať

Keď kliknete na tlačidlo Play, najprv my skontrolovať vlajka. Ak je to nepravdivý, nastavili sme ho pravdivý, takže ak kedykoľvek stlačíte tlačidlo neskôr, kód vo vnútri najprv ak stav sa nespustí (nie až do príznaku nepravdivý opäť).

Potom my vytvoriť novú inštanciu SpeechSynthesisUtterance rozhranie, ktoré obsahuje informácie o reči, ako napríklad text, ktorý sa má čítať, hlasitosť hovoru, hlas hovorený, rýchlosť, rozstup a jazyk reči. Pridávame text článku ako parameter konštruktora, a priraďte ho výpoveď premenlivý.

 funkcia onClickPlay () if (! flag) flag = true; utterance = nová SpeechSynthesisUtterance (document.querySelector ('článok') textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = funkcia () flag = false; ; synth.speak (výpoveď);  ak (synth.paused) / * unpause / resume narration * / synth.resume ();

Používame SpeechSynthesis.getVoices () metóda na určiť hlas pre reč z hlasov dostupných v zariadení používateľa. Keďže táto metóda vracia pole všetkých dostupných hlasových možností v zariadení, my priradiť prvý dostupný hlas zariadenia pomocou utterance.voice = synth.getVoices () [0]; výkaz.

na konci vlastnosť predstavuje obsluhu udalosti, ktorá je vykonaná po ukončení reči. Vnútri toho zmeníme hodnotu vlajka premenlivý späť na falošné tak, že kód, ktorý začne reč možno vykonať keď je tlačidlo znova klikli.

Potom zavoláme SpeechSynthesis.speak () metóda, aby sa začať rozprávanie. Musíme tiež skontrolovať ak je rozprávanie pozastavené, pre ktoré používame len na čítanie SpeechSynthesis.paused vlastnosť. Ak je rozprávanie pozastavené, musíme to urobiť pokračovať v rozprávaní po kliknutí na tlačidlo, ktoré môžeme dosiahnuť použitím SpeechSynthesis.resume () metóda.

2. Pozastaviť

Teraz vytvoríme onClickPause () funkciu, v ktorej najskôr skontrolujeme ak rozprávanie prebieha a nie je pozastavené. Túto situáciu môžeme otestovať využitím SpeechSynthesis.speaking a SpeechSynthesis.paused Vlastnosti. Ak sú obe podmienky pravdivé, naša onClickPause () funkcie pozastaví reč zavolaním SpeechSynthesis.pause () metóda.

 funkcia onClickPause () if (synth.speaking &&! synth.paused) / * pauza naration * / synth.pause ();

3. Zastavte

onClickStop () funkcia je postavený podobne ako onClickPause (). Ak prebieha reč, my Prestaň zavolaním SpeechSynthesis.cancel () metóda odstráni všetky výroky.

 funkcia onClickStop () if (synth.speaking) / * stop narration * / / * pre safari * / flag = false; synth.cancel ();

Upozorňujeme, že pri zrušení prejavu na konci udalosť sa automaticky vypáli, a my sme už pridali vlajkový resetovací kód vnútri. však, v prehliadači Safari je chyba ktorý zabraňuje tomu, aby táto udalosť vystrelila, preto sme príznak vynulovali v priečinku onClickStop () Funkcie. Nemusíte to robiť, ak nechcete podporovať Safari.

Podpora prehliadača

Všetky najnovšie verzie moderných prehliadačov mať úplnú alebo čiastočnú podporu pre syntézu reči API. Prehliadače Webkit neprehrávajú reč z viacerých kariet, pozastavenie je buggy (funguje ale buggy) a reč nie je obnovená, keď používateľ načíta znovu stránku v prehliadačoch Webkit.

Pracovné demo

Pozrite sa na živé ukážku nižšie alebo si pozrite úplný kód v službe Github.

Pozri pero Ã? Â ° Ã ... Â¸Ã¢???????? Text to Speech - JavaScript od HONGKIAT (@ hkdc) na CodePen.