Wie zu beheben Sprachsynthese-Aussprache in Javascript

Question

Wenn ich diesen Code ausführen, bekomme ich eine weibliche Antwort und dann das zweite Mal bekomme ich eine männliche Stimme und wenn ich versuche, es erneut zu starten es nicht zu reagieren.

hier ist der Code/

var aiload = document.getElementById('ai').innerHTML 
var msg = new SpeechSynthesisUtterance(aiload); 
var voices = window.speechSynthesis.getVoices(); 

voices.forEach(function (voice, i) { 
    var voiceName = 'Google UK English Female'; 
    var selected = ''; 

    if(voiceName == 'native') { 
     selected = 'selected'; 
    } 
    var option = "<option value='" + voiceName + "' " + selected + " >" + voiceName + "</option>"; 
    voiceSelect.append(option); 
    console.log(voiceName); 
}); 

msg.volume = 1; // 0 to 1 
msg.rate = 1; // 0.1 to 10 
msg.pitch = 0; //0 to 2 
msg.text = aiload; 
msg.lang = 'en-US'; 

msg.onend = function(e) { 
    console.log('Finished in ' + event.elapsedTime + ' seconds.'); 
}; 


speechSynthesis.speak(msg); 

Answer 1

Ihr Problem scheint die Web Speech API nicht asynchron zu behandeln.

folgenden Ausschnitt wird jetzt nicht gebraucht, aber ich möchte darauf hinweisen, dass es so aussieht, wie Sie nie überall die voiceName Variable ändern, so dass die if-Anweisung sieht nicht notwendig:

voices.forEach(function (voice, i) { 
    var voiceName = 'Google UK English Female'; 
    var selected = ''; 

    if(voiceName == 'native') { 
     selected = 'selected'; 
    } 
    var option = "<option value='" + voiceName + "' " + selected + " >" + voiceName + "</option>"; 
    voiceSelect.append(option); 
    console.log(voiceName); 
}); 

Hier ist eine Art und Weise werden Sie holen Sie sich die Stimme, die Sie jedes Mal wollen (meine Änderungen mit Kommentaren merken):

var aiload = document.getElementById('ai').innerHTML; 

// Use setInterval to keep checking if the voices array has been filled prior to creating the speech utterance 
var voiceGetter = setInterval(function() { 
    var voices = window.speechSynthesis.getVoices(); 
    if (voices.length !== 0) { 
    var msg = new SpeechSynthesisUtterance(aiload); 
    // Pick any voice from within the array; you can console.log(voices) to see options 
    msg.voice = voices[5]; 
    msg.volume = 1; 
    msg.rate = 1; 
    msg.pitch = 0; 
    // msg.text = aiload; <== This is redundant because of how msg is defined 
    msg.lang = 'en-US'; 
    msg.onend = function(e) { 
     console.log('Finished in ' + event.elapsedTime + ' seconds.'); 
    }; 
    speechSynthesis.speak(msg); 
    clearInterval(voiceGetter); 
    } 
}, 200) 

Answer 2

OK, ich weiß, was das Problem ist. Wie in diesem Link beschrieben: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/onvoiceschanged Die Liste der Stimmen ist nur verfügbar, nachdem das Ereignis speechSynthesis.onvoiceschanged ausgelöst wurde. Hier

ist eine Geige zu helfen: https://jsfiddle.net/mx2edhvw/1/

Eine wichtige Sache zu bemerken ist, dass speak fügt eine Äußerung auf das System. Sie müssen ein cancel tun, bevor Sie wieder sprechen, sonst fügen Sie mehr hinzu.