I have this code for WebkitSpeechRecognition. I have a feature, where when the user selects the dropdown menu, they can choose what voice they want. However, when you select a voice and press "Speak," the voice stays the same. When you press play again, the voice finally changes, and when you press play for the third time, the voice reverts back to default. How can avoid this error, so that whenever I call the function speak(), the voice that the user selected will speak with that same voice?
Here is my code:
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>Thanks.