Tekstist kõneks (TTS) API kasutamine JavaScriptis võib oluliselt parandada veebirakenduse kasutajakogemust. Kaasaegsed brauserid, nagu Chrome ja Firefox, toetavad Web Speech API-d, mis võimaldab nii kõnesünteesi kui ka -tuvastust. Selles õpetuses näitame, kuidas TTS API JavaScripti koodiga integreerida, teksti kõneks muuta, seadeid kohandada ja saadaolevaid hääli kasutada.
Alustamine JavaScripti ja tekstist kõneks funktsiooniga
Alustuseks peaksid valdama HTML-i, CSS-i ja JavaScripti põhitõdesid. Loo HTML-fail ja lisa sinna JavaScripti-fail, kasutades script src märgendit. JavaScriptis algata kõnesünteesi objekt ja lisa sündmuse kuulaja häälte laadimiseks. const synth = window.speechSynthesis; // Oota, kuni hääled on laetud synth.onvoiceschanged = () => { const voices = synth.getVoices(); // Kasuta olemasolevaid hääli }; Kui hääled on laetud, pääsed neile ligi synth.getVoices() meetodiga. See tagastab nimekirja kõigist kõnesünteesiks saadaolevatest häältest. Käi hääled forEach abil läbi ja kuva need HTML-is. 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); }); Järgmiseks loo funktsioon, mis loeb valitud häälega teksti ette. Funktsioon võtab tekstisisendi textarea elemendist ja kasutab valitud häält kõne loomiseks. 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); }; Lisa nupule või vormile sündmuse kuulaja, et speak funktsioon käivituks. const button = document.getElementById('speak-button'); button.addEventListener('click', speak); Nii saad teksti reaalajas kõneks muuta. Kõne kiirust, tooni ja helitugevust saab muuta SpeechSynthesisUtterance objektis. utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; Web Speech API sügavamal uurimisel leiad lisaks ka kõnetuvastuse ja kõnesündmuste juhtimise võimalused. Rohkem üksikasju ja viiteid leiad ametlikust dokumentatsioonist.
Seo Speechify hõlpsalt
JavaScriptiga tekstist kõneks funktsioonide loomiseks on Speechify suurepärane valik. See töötab sujuvalt koos Web Speech API-ga, võimaldades teksti kiiresti ja lihtsalt kõneks muuta. Dokumentatsioon ja selged juhised aitavad igal tasemel arendajal kiiresti pihta hakata. Speechify pakub palju erinevaid hääli ja lubab seadeid (nagu kiirus ja toon) paindlikult kohandada. Olgu sa front-end arendaja või täislahenduste arendaja – Speechify sobib hästi kasutajakogemuse tõstmiseks uuele tasemele. Kokkuvõttes avab tekstist kõneks API JavaScriptis veebiarenduses palju uusi võimalusi. Lisa kõnesüntees oma projektidesse, et pakkuda paremat ligipääsetavust ja kaasahaaravamat kogemust. Õpi Web Speech API-d kasutama ja loo dünaamilisi lahendusi – katseta ning anna oma veebilehtedele häälega elu!
