Utilizarea unui API text-to-speech (TTS) cu JavaScript poate îmbunătăți semnificativ experiența utilizatorului în aplicațiile web. Web Speech API, acceptat de browsere moderne precum Chrome și Firefox, pune la dispoziție un set puternic de instrumente pentru sinteză și recunoaștere vocală. În acest tutorial, vom vedea cum să integrăm un API TTS în codul JavaScript, să convertim textul în vorbire, să personalizăm setările și să folosim vocile disponibile.
Primele pași cu JavaScript și Text to Speech
Pentru început, ai nevoie de cunoștințe de bază de HTML, CSS și JavaScript. Creează un fișier HTML și leagă fișierul tău JavaScript folosind tag-ul script src. În fișierul JavaScript, inițializează obiectul de sinteză vocală și setează un event listener pentru momentul în care vocile devin disponibile. const synth = window.speechSynthesis; // Așteaptă să se încarce vocile synth.onvoiceschanged = () => { const voices = synth.getVoices(); // Fă ceva cu vocile disponibile }; După ce vocile s-au încărcat, le poți accesa cu metoda synth.getVoices(). Aceasta îți va returna o listă de voci disponibile pe care le poți folosi pentru sinteza vocală. Poți parcurge vocile cu forEach și le poți afișa în HTML-ul tă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); }); Apoi, poți crea o funcție care să genereze voce din text folosind vocea selectată. Această funcție preia textul dintr-un element textarea și folosește vocea aleasă pentru a genera vorbire. 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); }; Adaugă un event listener pe buton sau pe submit-ul formularului pentru a declanșa funcția speak. const button = document.getElementById('speak-button'); button.addEventListener('click', speak); Cu doar câteva linii de cod, poți converti textul în vorbire în timp real. Poți personaliza viteza, înălțimea și volumul vocii setând proprietăți pe obiectul SpeechSynthesisUtterance. utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; Pe măsură ce explorezi Web Speech API, vei descoperi și alte funcționalități pentru recunoaștere vocală și controlul evenimentelor de sinteză. Nu uita să consulți documentația oficială pentru detalii suplimentare și exemple.
Integrare simplă cu Speechify
Când vine vorba de utilizarea unui API text-to-speech cu JavaScript, Speechify se remarcă drept una dintre cele mai bune alegeri. Prin integrarea lină cu Web Speech API, Speechify face extrem de ușoară conversia textului în vorbire în timp real. Documentația completă și tutorialele sale ușor de urmărit oferă ghidaj pas cu pas, fiind ideale atât pentru începători, cât și pentru dezvoltatorii cu experiență. Cu Speechify, ai acces la o gamă largă de voci și poți personaliza setări precum viteza și înălțimea vocii. Indiferent dacă ești dezvoltator front-end sau software, Speechify este instrumentul potrivit pentru a-ți îmbunătăți aplicațiile web și a crea experiențe captivante pentru utilizatori. În concluzie, utilizarea unui API text-to-speech cu JavaScript deschide o lume de posibilități pentru dezvoltarea web. Prin integrarea sintezei vocale în proiectele tale, poți construi experiențe atractive și accesibile pentru utilizatori. Fie că ești dezvoltator front-end sau software, învățarea modului în care să profiți de Web Speech API îți va extinde abilitățile și îți va permite să creezi aplicații dinamice. Așadar, de ce să nu încerci și tu și să dai viață paginilor tale web cu ajutorul tehnologiei text-to-speech?
