A szövegfelolvasó (TTS) API használata JavaScript-tel jelentősen javíthatja a webalkalmazások felhasználói élményét. A Web Speech API, amelyet a modern böngészők, például a Chrome és a Firefox támogatnak, hatékony eszközkészletet biztosít a beszédszintézishez és a beszédfelismeréshez. Ebben az útmutatóban bemutatjuk, hogyan tudsz TTS API-t integrálni a JavaScript-kódodba, hogyan alakíthatod a szöveget beszéddé, hogyan szabhatod testre a beszéd beállításait, illetve hogyan használhatod ki az elérhető hangokat.
Első lépések JavaScript-tel és a szövegfelolvasással
A kezdéshez alapvető HTML, CSS és JavaScript ismeretekre lesz szükséged. Először hozz létre egy HTML-fájlt, és kapcsolj hozzá egy JavaScript-fájlt a script src tag segítségével. A JavaScript-fájlodban inicializáld a speechSynthesis objektumot, és adj hozzá egy eseményfigyelőt, hogy „figyeljen”, amikor a hangok elérhetővé válnak. const synth = window.speechSynthesis; // Várakozás a hangok betöltésére synth.onvoiceschanged = () => { const voices = synth.getVoices(); // Csinálj valamit az elérhető hangokkal }; Miután a hangok betöltődtek, a synth.getVoices() metódussal férhetsz hozzájuk. Ez visszaad egy listát az elérhető hangokról, amelyeket felhasználhatsz a felolvasáshoz. A hangokon végigiterálhatsz forEach használatával, és megjelenítheted őket a HTML-ben. 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); }); Ezután hozz létre egy függvényt, amely a kiválasztott hanggal szintetizálja a szöveget. Ez a függvény a textarea mezőből olvassa be a szöveget, majd a kiválasztott hangot használja a felolvasáshoz. 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); }; Adj eseményfigyelőt a gombhoz vagy az űrlaphoz, hogy a speak függvény lefusson. const button = document.getElementById('speak-button'); button.addEventListener('click', speak); E néhány sornyi kóddal valós időben alakíthatod át a szöveget beszéddé. A beszéd sebességét, hangmagasságát és hangerejét a SpeechSynthesisUtterance objektum tulajdonságainak beállításával szabhatod személyre. utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; Ahogy egyre jobban elmélyedsz a Web Speech API használatában, további lehetőségeket találsz a beszédfelismerésre és a szintetizálás eseményeinek vezérlésére. Érdemes mindig átfutni a hivatalos dokumentációt a részletesebb leírásokért és hivatkozásokért.
Zökkenőmentes integráció a Speechify-jal
Ha JavaScript-hez keresel szövegfelolvasó API-t, a Speechify remek választás. A Web Speech API-val való zökkenőmentes integrációjának köszönhetően a Speechify lehetővé teszi a szöveg azonnali felolvasását. Átfogó dokumentációja és könnyen követhető útmutatói lépésről lépésre segítik a kezdő és haladó webfejlesztőket egyaránt. A Speechify használatával rengeteg hang közül választhatsz, személyre szabhatod a felolvasás tempóját és hangmagasságát is. Legyél akár front-end, akár szoftverfejlesztő, a Speechify ideális eszköz webes alkalmazásaid fejlesztéséhez és élvezetes felhasználói élmények kialakításához. Összefoglalva: a szövegfelolvasó API-k JavaScript-ben való használata rengeteg új lehetőséget nyit meg a webfejlesztésben. A beszédszintézis integrálásával lebilincselő, egyben akadálymentes felhasználói élményeket hozhatsz létre. Akár front-end, akár szoftverfejlesztő vagy, a Web Speech API elsajátítása bővíti a tudásod, és dinamikus alkalmazások készítését teszi lehetővé. Próbáld ki te is, és keltsd életre az oldalaidat a szövegfelolvasás erejével!
