如何遍历Web Speech API中的问题

Question

How can I loop over a list of questions with Web Speech API. For example I want to ask a series of Yes or No questions and then handle the result differently if the answer is yes, and move on to the next question if the answer is no.

var questions = //array of five questions
function answerQuestions {
    for (i = 0; questions.length; i++) {
      if (askUser(questions[i]) {
          ///Do something if yes
      } else if ((i+1) === questions.length){
         //stop asking questions
      }
}
function askUser (question) {
    //instantiate Web Speech API
     //someinstance.speak(question)
 }
function say(m){   
    var msg = new SpeechSynthesisUtterance();   
    var voices = window.speechSynthesis.getVoices();    
    msg.voice = voices[10];     
    msg.voiceURI = "Google UK English Male";    
    msg.volume = 1;     
    msg.rate = 1;   
    msg.pitch = 1.4;    
    msg.text = m;   
    msg.lang = 'en-GB';     
    speechSynthesis.speak(msg); 
    msg.onend = function () {
        listenToAnswer()
    }
}

The issue is that it never will call listenToAnswer() and listen to the next user input. Instead it just loops really quickly through the the for loop of questions. Any thoughts would be greatly appreciated.

Answer 1

First, say needs to return a Promise that resolves once the speaking is done. That way, you can call say() and await it inside the for loop. Currently, you're constructing a Promise inside pickQuestion , but then you're resolving it immediately because you're calling its resolve right after the Promise is constructed. So, there's no time for anything asynchronous to be done.

Once say returns a Promise , you can avoid constructing another Promise inside the for loop, and simply await the say call:

function say(m){
  return new Promise((resolve) => {
    const msg = new SpeechSynthesisUtterance();   
    var voices = window.speechSynthesis.getVoices();    
    msg.voice = voices[10];     
    msg.voiceURI = "Google UK English Male";    
    msg.volume = 1;     
    msg.rate = 1;   
    msg.pitch = 1.4;    
    msg.text = m;   
    msg.lang = 'en-GB';     
    speechSynthesis.speak(msg); 
    msg.onend = function () {
      resolve()
    }
  });
}

async function pickQuestion(subject) {
  const questionsOfSubject = questions[subject];
  for (let i = 0; i < questionsOfSubject.length; i++) {
    await say("Would you like to read, " + questionsOfSubject[i].title);
    const answer = await listenToResponse();
    if (answer.toLowerCase() === "yes") {
      readQuestion();
      break;
    }
  }
}

Make sure to declare new variables with const (or let ) so as not to implicitly assign to window properties.