Синхронное выполнение в JavaScript с помощью speechSynthesis.speak ()

Question

В настоящее время я пытаюсь заставить браузер говорить массив строк последовательно, но это не делается последовательно;первая строка читается, а затем последняя строка читается.Как я могу изменить свой код, чтобы каждая строка читалась последовательно?

async function wrapper(){
  var text = "sen ten ce one. sen ten ce two. sen ten ce three.";
  var result = text.match( /[^\.!\?]+[\.!\?]+/g );
  var ssu = new SpeechSynthesisUtterance();
  for(var i = 0; i<result.length; i++){
    sentence = result[i];
    ssu.text = sentence;
    await window.speechSynthesis.speak(ssu);
  }
wrapper();

Если я запишу предложения в консоль, они будут напечатаны до того, как предложение будет озвучено.

Answer 1

Вы не можете использовать await с speechSynthesis.speak(), потому что он не возвращает обещание.Вы можете решить эту проблему с помощью события onend и обернуть его в Promise:

async function wrapper(){
  var text = "sen ten ce one. sen ten ce two. sen ten ce three.";
  var result = text.match( /[^\.!\?]+[\.!\?]+/g );
  var ssu = new SpeechSynthesisUtterance();
  for(var i = 0; i<result.length; i++){
    sentence = result[i];
    ssu.text = sentence;
    await new Promise(function(resolve) {
      ssu.onend = resolve;
      window.speechSynthesis.speak(ssu);
    });
  }
wrapper();

Answer 2

async await работает только с обещаниями.speachSynthesis.speak не возвращает обещание, поэтому оно не будет ждать завершения разговора.Так что лучше, если вы используете onend callback.

Проверьте ниже код

var ssu = new SpeechSynthesisUtterance();

function wrapper(){
  var text = "sen ten ce one. sen ten ce two. sen ten ce three. sen ten ce four.";
  var result = text.match( /[^\.!\?]+[\.!\?]+/g );

  speak(result, 0);
}

function speak(result, index) {
    if(index >= result.length)
        return;

    var sentence = result[index];
    ssu.text = sentence;
    ssu.onend = function() {
        speak(result, ++index);
    };
    window.speechSynthesis.speak(ssu);
}

wrapper()