Zdrojový kód pre čítačku textu
(Text-to-Speech)

Otázka na Gemini: "Vieš mi vytvoriť zdrojový kód čítačky textu, ktorý by som umiestnil na stránky svojho webu s textom? Chcem zlepšiť podmienky použiteľnosti stránky pre zrakovo postihnutých." Odpoveď: "Samozrejme, Rasťo, môžeme vytvoriť zdrojový kód pre čítačku textu (Text-to-Speech, TTS), ktorú môžeš umiestniť na každú stránku. Toto riešenie využije Web Speech API, ktoré je dostupné vo väčšine moderných prehliadačov, a teda nevyžaduje externé knižnice ani platené služby. Nižšie nájdeš tri časti kódu: HTML pre tlačidlá a obalenie obsahu, JavaScript pre funkcionalitu a CSS pre základný vzhľad."

Text-to-Speech

Nápad umiestniť čítačku textu do stránky zvýši prístupnosť a používateľský komfort. Mnoho ľudí ocení možnosť nechať si články prečítať hlasom digitálneho moderátora, najmä ak sú na cestách alebo majú zrakové postihnutie. Na realízaciu tejto funkcionality budete potrebovať tri základné zdrojové kódy: 1. HTML, 2. JavaScript, 3. CSS, ktoré si môžete stiahnuť nižšie:

Zdrojový kód pre čítačku textu (Text-to-Speech)

1. HTML štruktúra

Túto časť HTML kódu vlož na začiatok alebo nad obsah každého článku, kde chceš mať tlačidlo čítačky. Extrémne dôležité je, aby celý text článku, ktorý chceš nechať prečítať, bol umiestnený vo vnútri div elementu s id="articleContent". Ak už máš hlavný kontajner pre článok s iným ID, jednoducho ho zmeň v JavaScriptovom kóde. 

        
HTML

        

<div class="text-to-speech-controls">
  <button id="readArticleBtn" aria-label="Prečítať článok">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play">
      <polygon points="5 3 19 12 5 21 5 3"></polygon>
    </svg>
    Prečítať článok
  </button>
  <button id="stopReadingBtn" aria-label="Zastaviť čítanie" style="display: none;">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-square">
      <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
    </svg>
    Zastaviť čítanie
  </button>
</div>

<div id="articleContent">
<!-- Sem pôjde obsah článku, ktorý bude čítaný -->
</div>

 

2. JavaScript funkcionalita

Tento JavaScript kód umiestniš ideálne na koniec <body> tagu, tesne pred </body>, alebo do externého .js súboru, ktorý sa pripojí ku všetkým stránkam. 

        
JavaScript

        

<script>document.addEventListener('DOMContentLoaded', () => { // Zabezpečí, že skript sa spustí až po načítaní DOM
    const readBtn = document.getElementById('readArticleBtn');
    const stopBtn = document.getElementById('stopReadingBtn');
    const articleContent = document.getElementById('articleContent'); // Kontajner s textom článku
    let utterance = null; // Premenná na uloženie rečového objektu
    let voices = []; // Pre uloženie dostupných hlasov

    // Funkcia na získanie dostupných hlasov
    function populateVoiceList() {
        voices = speechSynthesis.getVoices().sort((a, b) => {
            const aname = a.name.toUpperCase();
            const bname = b.name.toUpperCase();
            if (aname < bname) return -1;
            if (aname > bname) return 1;
            return 0;
        });
        // Voliteľné: Ak chceš vybrať špecifický slovenský hlas, môžeš ho tu nájsť
        // const slovakVoice = voices.find(voice => voice.lang === 'sk-SK' && voice.name.includes('Slovak'));
        // if (slovakVoice) {
        //     // Pridelíme ho neskôr k utterance
        // }
    }

    // Načítaj hlasy hneď po načítaní stránky
    populateVoiceList();
    if (speechSynthesis.onvoiceschanged !== undefined) {
        speechSynthesis.onvoiceschanged = populateVoiceList; // Aktualizuj zoznam hlasov, ak sa zmení
    }

    if ('speechSynthesis' in window) { // Skontroluj, či prehliadač podporuje Text-to-Speech API
        readBtn.addEventListener('click', () => {
            if (speechSynthesis.speaking) {
                speechSynthesis.cancel(); // Zastav predchádzajúce čítanie
            }

            const textToRead = articleContent.textContent; // Získa text z #articleContent
            utterance = new SpeechSynthesisUtterance(textToRead);
            
            // Nastavenie jazyka
            utterance.lang = 'sk-SK'; 

            // Voliteľné: Ak chceš použiť konkrétny nájdený slovenský hlas
            // const slovakVoice = voices.find(voice => voice.lang === 'sk-SK' && voice.name.includes('Slovak')); 
            // if (slovakVoice) {
            //     utterance.voice = slovakVoice;
            // } else {
            //     console.warn("Slovenský hlas nebol nájdený, použije sa predvolený.");
            // }

            // Event listener pre ukončenie čítania
            utterance.onend = () => {
                readBtn.style.display = 'inline-flex'; // Používaj 'inline-flex' ak máš ikonu
                stopBtn.style.display = 'none';
            };

            // Event listener pre chybu čítania
            utterance.onerror = (event) => {
                console.error('SpeechSynthesisUtterance.onerror', event);
                readBtn.style.display = 'inline-flex';
                stopBtn.style.display = 'none';
                alert('Chyba pri čítaní textu. Váš prehliadač nepodporuje túto funkciu alebo má problém s hlasom.');
            };

            speechSynthesis.speak(utterance);

            readBtn.style.display = 'none';
            stopBtn.style.display = 'inline-flex';
        });

        stopBtn.addEventListener('click', () => {
            if (speechSynthesis.speaking) {
                speechSynthesis.cancel(); // Zastaví čítanie
            }
            readBtn.style.display = 'inline-flex';
            stopBtn.style.display = 'none';
        });

    } else {
        // Ak prehliadač nepodporuje API, skry tlačidlá alebo zobraz správu
        if (readBtn) readBtn.style.display = 'none';
        if (stopBtn) stopBtn.style.display = 'none';
        console.warn("Váš prehliadač nepodporuje funkciu prevodu textu na reč (Web Speech API).");
    }
});
</script>

 

3. CSS pre vzhľad tlačidiel

Nasledujúci CSS kód vlož do svojho hlavného .css súboru. 

        
CSS

        

<style>.text-to-speech-controls {
    margin-bottom: 20px;
    display: flex; /* Pre lepšie usporiadanie tlačidiel */
    gap: 10px; /* Priestor medzi tlačidlami */
}
.text-to-speech-controls button {
    background-color: #4CAF50; /* Zelená farba */
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    display: flex; /* Pre usporiadanie ikony a textu */
    align-items: center;
    gap: 5px; /* Priestor medzi ikonou a textom */
    transition: background-color 0.3s ease; /* Plynulý prechod farby */
}
.text-to-speech-controls button svg {
    width: 20px; /* Veľkosť ikony */
    height: 20px;
}
#stopReadingBtn {
    background-color: #f44336; /* Červená farba */
}
.text-to-speech-controls button:hover {
    opacity: 0.9;
    background-color: #388E3C; /* Tmavo zelená pri hover */
}
#stopReadingBtn:hover {
    background-color: #D32F2F; /* Tmavo červená pri hover */
}
/* Štýl pre kontajner s textom, ak by si ho chcel napríklad orámovať */
#articleContent {
    /* padding: 15px; */
    /* border: 1px solid #eee; */
    /* border-radius: 8px; */
    /* background-color: #f9f9f9; */
}
</style>

 

Dôležité poznámky k implementácii:

1. Umiestnenie <div id="articleContent">: Toto je najdôležitejší krok. Uistite sa, že všetok text, ktorý chcete nechať prečítať (celý obsah článku), je obalený do <div id="articleContent">...</div>. Ak už máte hlavný kontajner s článkom, ktorý má iné ID (napr. <article id="mainArticle">), potom v Javascripte zmeň riadok:

  

        
JavaScript

        

const articleContent = document.getElementById('articleContent');

// na

const articleContent = document.getElementById('mainArticle'); // alebo akékoľvek ID, ktoré používaš

 

2. Ikony (SVG): Použil som jednoduché SVG ikony pre tlačidlá "Prečítať" a "Zastaviť", aby to vyzeralo profesionálnejšie. Sú to inline SVG, takže nepotrebuješ žiadne externé knižnice ikon.

3. Jazyk (utterance.lang = 'sk-SK';): Nastavenie jazyka je dôležité pre správnu výslovnosť. Prehliadač sa pokúsi nájsť slovenský hlas. Ak nie je dostupný, použije predvolený hlas, čo môže viesť k anglickému prízvuku. Kvalita hlasov sa líši medzi prehliadačmi a operačnými systémami.

4. DOMContentLoaded: JavaScript kód je obalený do document.addEventListener('DOMContentLoaded', ...);. To zabezpečí, že skript sa pokúsi nájsť tlačidlá a obsah až potom, čo je HTML dokument plne načítaný a štruktúra je pripravená.

5. Testovanie: Po implementácii kód dôkladne otestuj vo viacerých prehliadačoch (Chrome, Firefox, Edge, Safari) a na rôznych zariadeniach (desktop, mobil), aby si sa uistil, že funguje podľa očakávania.

Ako funguje čítačka textu na VeternéParky.sk: Rozbor kódu

Na VeternéParky.sk sme implementovali funkciu čítačky textu, ktorá vám umožňuje nechať si naše články prečítať namiesto čítania. Táto funkcia zvyšuje prístupnosť a pohodlie pre našich čitateľov. Pozrime sa, ako je táto funkcia technicky realizovaná pomocou HTML, CSS a JavaScriptu.

1. HTML: Základná kostra čítačky

HTML (HyperText Markup Language) tvorí kostru našej webovej stránky a definuje obsah a štruktúru. Pre funkciu čítačky textu sme použili nasledujúce kľúčové HTML elementy:

  • <div class="text-to-speech-controls">: Tento div slúži ako kontajner pre naše ovládacie tlačidlá. Pomáha nám ich spoločne štýlovať a usporiadať.
  • <button id="readArticleBtn"> a <button id="stopReadingBtn">: Sú to štandardné HTML tlačidlá. Každé z nich má unikátne id (identifikátor), ktorý nám umožňuje cielene ich ovládať pomocou JavaScriptu. Tlačidlo "Zastaviť čítanie" je na začiatku skryté (style="display: none;") a zobrazí sa až po spustení čítania.
  • aria-label="...": Atribút aria-label je dôležitý pre prístupnosť. Poskytuje popis funkcie tlačidla pre používateľov, ktorí používajú čítačky obrazovky.
  • SVG ikony: Sú to vektorové grafiky priamo vložené do HTML kódu. V tomto prípade reprezentujú ikony "play" (prehrať) a "stop" (zastaviť), čím vizuálne zlepšujú používateľské rozhranie.
  • <div id="articleContent">: Toto je najdôležitejší element pre funkčnosť čítačky. Všetok text, ktorý chcete, aby čítačka prečítala, musí byť umiestnený vo vnútri tohto div elementu. JavaScript načíta obsah tohto kontajnera a premení ho na reč.

2. CSS: Styling a vzhľad tlačidiel

CSS (Cascading Style Sheets) definuje, ako naše HTML elementy vyzerajú. Použili sme ho na základné naformátovanie tlačidiel čítačky, aby boli vizuálne príjemné a funkčné.

  • .text-to-speech-controls: Nastavuje rozloženie pre obalový div pomocou Flexboxu (display: flex), čo zabezpečí, že tlačidlá budú vedľa seba s definovaným odstupom (gap).
  • button štýly: Definujú spoločný vzhľad pre obe tlačidlá – farbu pozadia, textu, odsadenie, zaoblené rohy a animáciu pre interakciu s myšou (:hover).
  • #stopReadingBtn: Špecificky mení farbu pozadia tlačidla "Zastaviť" na červenú.

ďalšie vlastnosti zistíte priamo v popise pri konkrétnych štýloch.

3. JavaScript: Mozog čítačky (Web Speech API)

JavaScript dodáva našim HTML elementom funkčnosť a umožňuje im interagovať s používateľom. Používame tu vstavané Web Speech API, ktoré je súčasťou moderných prehliadačov.

  • document.addEventListener('DOMContentLoaded', ...): Zabezpečuje, že JavaScript kód sa spustí až potom, čo je celá HTML štruktúra stránky načítaná a pripravená. To zabraňuje chybám, keď skript hľadá elementy, ktoré ešte neexistujú.
  • const readBtn = ... atď.: Tieto riadky získavajú referencie na naše HTML tlačidlá a div s obsahom článku pomocou ich id atribútov.
  • 'speechSynthesis' in window: Toto je kľúčová podmienka, ktorá kontroluje, či prehliadač používateľa podporuje Web Speech API. Ak nie, tlačidlá sa skryjú a vypíše sa varovanie do konzoly prehliadača.
  • readBtn.addEventListener('click', ...): Počúva na udalosť kliknutia na tlačidlo "Prečítať". Keď sa klikne, vykoná sa funkcia:
  • speechSynthesis.cancel(): Ak už niečo prehliadač číta, toto to zastaví.
  • articleContent.textContent: Získa všetok textový obsah z elementu s ID articleContent. Je dôležité, že sa berie len text, nie HTML značky.
  • new SpeechSynthesisUtterance(textToRead): Vytvorí nový "rečový prejav" objekt z nášho získaného textu.
  • utterance.lang = 'sk-SK';: Nastaví jazyk pre čítanie na slovenčinu, čo je kľúčové pre správnu výslovnosť.
  • utterance.onend = ... a utterance.onerror = ...: Tieto funkcie sa spustia, keď sa čítanie skončí (normálne alebo s chybou), a zabezpečia, že sa tlačidlá prepnú späť do pôvodného stavu.
  • speechSynthesis.speak(utterance);: Toto je príkaz, ktorý spustí čítanie textu.
  • readBtn.style.display = 'none'; a stopBtn.style.display = 'inline-flex';: Tieto riadky prepnú viditeľnosť tlačidiel, aby používateľ videl možnosť "Zastaviť čítanie" namiesto "Prečítať".
  • stopBtn.addEventListener('click', ...): Počúva na kliknutie na tlačidlo "Zastaviť" a jednoducho zruší akékoľvek prebiehajúce čítanie pomocou speechSynthesis.cancel(), a prepne tlačidlá späť.

Vďaka tejto kombinácii HTML, CSS a JavaScriptu môžete na svojich stránkach ľahko a efektívne ponúknuť funkciu čítačky textu, čím zlepšíte používateľskú skúsenosť a sprístupníte obsah širšiemu publiku.

Záver

Tento kód by mal poskytnúť robustnú a používateľsky prívetivú čítačku textu pre tvoje články. Ak máš nejaké otázky k implementácii alebo potrebuješ ďalšie úpravy, pokojne sa spýtaj!

 

© Veterné parky 2025 | odkazy