Text-na-reč (TTS) API v JavaScripte dokáže výrazne vylepšiť zážitok používateľov webu. Web Speech API v moderných prehliadačoch ako Chrome a Firefox ponúka nástroje na syntézu aj rozpoznávanie reči. V tomto návode si ukážeme, ako integrovať TTS API do JavaScript kódu, prevádzať text na reč, upraviť nastavenia a používať dostupné hlasy.
Začíname s JavaScriptom a text-to-speech
Na úvod stačí základná znalosť HTML, CSS a JavaScriptu. Vytvorte HTML súbor a pripojte JavaScript pomocou script src. V JS inicializujte objekt speechSynthesis a nastavte event listener na načítanie hlasov. const synth = window.speechSynthesis; // Počkajte na načítanie hlasov synth.onvoiceschanged = () => { const voices = synth.getVoices(); // Práca s hlasmi }; Keď sú hlasy načítané, získate ich zoznam pomocou synth.getVoices(). Prejdite ich cez forEach a zobrazte napríklad v selecte. const voiceSelect = document.getElementById('voice-select'); voices.forEach((voice) => { const option = document.createElement('option'); option.textContent = ${voice.name} (${voice.lang}); option.setAttribute('value', voice.lang); voiceSelect.appendChild(option); }); Potom si vytvorte funkciu na prevod textu na reč so zvoleným hlasom. Táto funkcia vezme text z textarea a použije vybraný hlas na syntézu reči. const speak = () => { const text = document.getElementById('text-input').value; const voice = voices[voiceSelect.selectedIndex]; const utterance = new SpeechSynthesisUtterance(text); utterance.voice = voice; synth.speak(utterance); }; Pridajte event listener na tlačidlo alebo formulár, ktorý spustí speak. const button = document.getElementById('speak-button'); button.addEventListener('click', speak); Pomocou týchto pár riadkov viete prevádzať text na reč v reálnom čase. Rýchlosť, výšku a hlasitosť upravíte priamo na SpeechSynthesisUtterance. utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; Web Speech API ponúka aj ďalšie možnosti rozpoznávania a spracovania udalostí syntézy. Určite si pozrite oficiálnu dokumentáciu na ďalšie informácie.
Jednoduchá integrácia so Speechify
Pri použití text-to-speech API v JavaScripte je Speechify skvelá voľba. Jednoducho sa integruje s Web Speech API a umožňuje pohodlný prevod textu na reč v reálnom čase. Prehľadná dokumentácia a návody sú vhodné pre začiatočníkov aj pokročilých vývojárov. Speechify ponúka široký výber hlasov a úpravu rýchlosti či tónu reči. Či už ste frontend alebo softvérový vývojár, Speechify oživí vaše weby a zlepší používateľský zážitok. Použitie TTS API s JavaScriptom rozširuje možnosti webového vývoja — integráciou syntézy reči zatraktívnite a sprístupníte svoje projekty. Moderný vývojár využije Web Speech API naplno — skúste to aj vy a vdýchnite webu život pomocou text-to-speech.
