Korištenjem tekst-u-govor (TTS) API-ja s JavaScriptom znatno poboljšavate korisničko iskustvo svojih web aplikacija. Web Speech API, koji podržavaju moderni preglednici poput Chromea i Firefoxa, nudi moćne alate za sintezu i prepoznavanje govora. U ovom vodiču pokazujemo kako integrirati TTS API u JavaScript, pretvoriti tekst u govor, prilagoditi postavke govora i koristiti dostupne glasove.
Prvi koraci s JavaScriptom i funkcijom tekst u govor
Za početak potrebno je osnovno znanje HTML-a, CSS-a i JavaScripta. Izradite HTML datoteku i povežite svoj JavaScript pomoću script src taga. Zatim inicijalizirajte objekt za sintezu govora i postavite event listener koji čeka spremnost glasova. const synth = window.speechSynthesis; // Pričekajte učitavanje glasova synth.onvoiceschanged = () => { const voices = synth.getVoices(); // Rad s dostupnim glasovima }; Glasove dohvaćate metodom synth.getVoices(), koja vraća popis dostupnih glasova. Prođite kroz glasove s forEach i prikažite ih u HTML-u. 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); }); Zatim možete definirati funkciju za sintezu govora prema odabranom glasu. Funkcija koristi tekst iz textarea elementa i generira govor. 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); }; Dodajte event listener na gumb ili formu za pokretanje speak funkcije. const button = document.getElementById('speak-button'); button.addEventListener('click', speak); S nekoliko linija koda pretvarate tekst u govor u stvarnom vremenu. Brzinu, visinu i glasnoću definirate na SpeechSynthesisUtterance objektu. utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; Daljnjim proučavanjem Web Speech API-ja možete otkriti dodatne mogućnosti za prepoznavanje govora i upravljanje događajima. svakako proučite i službenu dokumentaciju.
Jednostavna integracija sa Speechifyjem
Kad je riječ o korištenju tekst-u-govor API-ja s JavaScriptom, Speechify se posebno ističe. Lako se povezuje s Web Speech API-jem i omogućuje brzu pretvorbu teksta u govor. Detaljna dokumentacija i jasni vodiči čine ga odličnim izborom i za početnike i za iskusne web developere. Uz Speechify na raspolaganju imate širok izbor glasova i mogućnost podešavanja brzine i visine govora. Bilo da ste front-end ili softverski developer, Speechify je izvrstan alat za unaprjeđenje web aplikacija i stvaranje dojmljivog korisničkog iskustva. Ukratko, TTS API s JavaScriptom otvara nove mogućnosti za web razvoj. Integracijom sinteze govora svoje projekte činite dostupnijima i zanimljivijima. Isprobajte TTS i oživite svoje web stranice!
