Utilitzar una API de text a veu (TTS) amb JavaScript pot millorar molt l’experiència d’usuari de les aplicacions web. L’API Web Speech, compatible amb navegadors moderns com Chrome i Firefox, proporciona eines potents per a la síntesi i el reconeixement de veu. En aquest tutorial veurem com integrar una API TTS al codi JavaScript, convertir text a veu, personalitzar opcions de veu i treure profit de totes les veus disponibles.
Començar amb JavaScript i Text a Veu
Per començar, cal entendre HTML, CSS i JavaScript. Crea un fitxer HTML i enllaça el teu fitxer JavaScript amb l’etiqueta script src. Inicialitza l’objecte de síntesi de veu i configura un esdeveniment per quan les veus estiguin carregades. const synth = window.speechSynthesis; // Espera que les veus carreguin synth.onvoiceschanged = () => { const voices = synth.getVoices(); // Gestiona les veus disponibles }; Un cop carregades, pots accedir a synth.getVoices(), que retorna la llista de veus. Pots recórrer-les amb forEach i mostrar-les al teu HTML. 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); }); Després, crea una funció per generar veu segons l'opció triada. Aquesta agafa el text d’una textarea i utilitza la veu seleccionada. 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); }; Afegeix un esdeveniment al botó perquè activi la funció speak. const button = document.getElementById('speak-button'); button.addEventListener('click', speak); Amb aquest codi pots generar veu en temps real. Personalitza la velocitat, el to i el volum de la veu: utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; Continua explorant l’API Web Speech per descobrir més funcionalitats, com el reconeixement i la gestió d’esdeveniments de síntesi. Consulta la documentació oficial per a més detalls i atribucions.
Integració fàcil amb Speechify
A l’hora d’utilitzar una API de text a veu amb JavaScript, Speechify destaca com una de les millors opcions. Amb la seva integració senzilla amb l’API Web Speech, Speechify permet convertir text a veu en temps real de manera molt intuïtiva. Disposa de documentació completa i tutorials accessibles, ideals tant per a principiants com per a desenvolupadors amb experiència. Amb Speechify pots triar entre moltes veus i personalitzar-ne la velocitat i el to. Tant si ets desenvolupador web com de programari, Speechify és una eina perfecta per potenciar les teves aplicacions web i oferir una millor experiència d’usuari. En resum, fer servir una API TTS amb JavaScript obre noves possibilitats per al desenvolupament web. En integrar la síntesi de veu als teus projectes, aconsegueixes webs més atractives i accessibles. Tant si et dediques al front-end com al desenvolupament de programari, aprendre a utilitzar l’API Web Speech amplifica les teves habilitats i et permet crear aplicacions dinàmiques. Prova-ho i dona vida a les teves pàgines amb el text a veu!
