Tengo este código para WebkitSpeechRecognition. Tengo una característica, donde cuando el usuario selecciona el menú desplegable, puede elegir qué voz quiere. Sin embargo, cuando selecciona una voz y presiona "Hablar", la voz permanece igual. Cuando presiona reproducir nuevamente, la voz finalmente cambia, y cuando presiona reproducir por tercera vez, la voz vuelve a su estado predeterminado. ¿Cómo puedo evitar este error, de modo que cada vez que llame a la función speak() , la voz que el usuario seleccionó hablará con esa misma voz?
Aquí está mi código:
let voices; function populateVoiceList() { if(typeof speechSynthesis === 'undefined') { return; } voices = speechSynthesis.getVoices(); for(var i = 0; i < voices.length; i++) { var option = document.createElement('option'); option.textContent = voices[i].name + ' (' + voices[i].lang + ')'; option.setAttribute('data-lang', voices[i].lang); option.setAttribute('data-name', voices[i].name); document.getElementById("voiceSelect").appendChild(option); } } populateVoiceList(); if (typeof speechSynthesis !== 'undefined' && speechSynthesis.onvoiceschanged !== undefined) { speechSynthesis.onvoiceschanged = populateVoiceList; } function speak(txt) { let utterance = new SpeechSynthesisUtterance(txt); speechSynthesis.speak(utterance); var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name'); for(var i = 0; i < voices.length ; i++) { if(voices[i].name === selectedOption) { utterance.voice = voices[i] } } } document.getElementById("speak").onclick = function() { speak("Hello World") } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>replit</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <button id="speak">Speak</button> <select id="voiceSelect"></select> <script src="script.js"></script> </body> </html>Gracias.