在 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

async await 只适用于 promises。 speachSynthesis.speak 没有 return 承诺，因此它不会等到讲话完成。所以还是用onend回调比较好

检查下面的代码

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()

Answer 2

您不能将 await 与 speechSynthesis.speak() 一起使用，因为它没有 return 承诺。您可以通过使用 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();

在 javascript 中与 speechSynthesis.speak() 同步执行

Synchronous execution in javascript with speechSynthesis.speak()

html

javascript

text-to-speech