Oživení webového obsahu pomocí nativního převodu textu na řeč v prohlížeči

Věděli jste, že moderní prohlížeče mají zabudovanou funkci převodu textu na řeč? Je to neuvěřitelně užitečný nástroj, zejména pro uživatele s postižením, kteří se při navigaci na webových stránkách spoléhají na čtečky obrazovky. Kromě přístupnosti je to však také zábavný způsob, jak učinit obsah interaktivnějším.

V tomto článku vám ukážu, jak vytvořit jednoduchou čtečku příspěvků na blogu pomocí rozhraní API SpeechSynthesis v JavaScriptu. Pojďme proměnit naše webové stránky v mluvící dinosaury!

Jak to funguje?

K hlasitému čtení obsahu webové stránky můžeme využít rozhraní API speechSynthesis. Funguje to tak, že se vyberou konkrétní prvky na stránce, extrahují se jejich texty a vše převede se do řeči.

Zde je úryvek JavaScriptu, který jsem použil k vytvoření čtečky příspěvků na blogu:

speachStatus: '',
isSpeechSynthesisSupported() {
   return 'speechSynthesis' in window && 'SpeechSynthesisUtterance' in window;
},
pauseSpeach() {
   this.speachStatus = 'pause';
   speechSynthesis.pause();
},
playSpeach() {
   speechSynthesis.cancel();
   this.speakText(this.getSpeachText());
   this.speachStatus = 'speach';
},
resumeSpeach() {
   if (this.speachStatus == '') {
       this.playSpeach();
   } else {
       this.speachStatus = 'speach';
       speechSynthesis.resume();
   }
},
stopSpeach() {
   this.speachStatus = '';
   speechSynthesis.cancel();
},
getSpeachText() {
   const elements = document.querySelectorAll(".speach");
   const text = Array.from(elements).map(el => el.innerText).join(". ");
   return text.trim();
},
speakText(text, lang = null) {
   const utterance = new SpeechSynthesisUtterance(text);
   if (lang === null) {
       lang = document.documentElement.lang || "en-US";
   }
   utterance.lang = lang;
   speechSynthesis.speak(utterance);
}

Vysvětlění

1. isSpeechSynthesisSupported() - Ověření, zda prohlížeč podporuje převod textu na řeč.
2. playSpeach() - Spustí syntézu řeči a nahlas přečte obsah nalezený pod prvky s třídou .speach.
3. pauseSpeach() - Pozastaví aktuální řeč.
4. resumeSpeach() - Obnoví řeč od místa, kde byla pozastavena.
5. stopSpeach() - Úplně zruší řeč.
6. getSpeachText() - Shromáždí všechny prvky s třídou .speach, extrahuje jejich text a spojí je tečkou (.), aby se zavedly přirozené pauzy.
7. speakText() - Převede extrahovaný text na řeč, přičemž použije výchozí jazyk webové stránky.

Vytvoření jednoduchého přehrávače řeči

Nyní, když máme vytvořenou logiku, můžeme vytvořit jednoduchý přehrávač s tlačítky pro přehrávání, pozastavení, obnovení a zastavení. Zde je příklad:

<button @click="playSpeach()">Play</button>
<button @click="pauseSpeach()">Pause</button>
<button @click="resumeSpeach()">Resume</button>
<button @click="stopSpeach()">Stop</button>

<div class="speach">Toto je testovací příspěvek na blogu. Užijte si jeho poslech!</div>

Proč je to užitečné

• Přístupnost - pomáhá zrakově postiženým uživatelům snadněji konzumovat obsah.
• Hands-free zážitek - Umožňuje uživatelům poslouchat při více činnostech.
• Pomůcka při učení - Lze ji použít ke zlepšení výslovnosti a jazykových dovedností.

• Zábava! - Koho by nebavilo nechat svou webovou stránku mluvit?

   

Doufám, že vás to nadchne stejně jako mě! Vyzkoušejte to a dejte mi vědět, jak převod textu na řeč používáte ve svých projektech.