javascript - window.speechSynthesis.speak 不会说话，除非没有其他命令不完整

Question

我尝试用 javascript 编写测试代码，同时尝试记录和读出一个随机数。对于文本到语音，我使用 SpeechSynthesisUtterance 和 window.speechSynthesis:

function generate(){
 for (let i = 0;i<100;i++){
   let randomNumber = numberGenerator.generateNumber();
   showAndSayIt(randomNumber);
 }
}


const showAndSayIt = (m) => {
    var msg = new SpeechSynthesisUtterance(m);
    console.log(m);
    window.speechSynthesis.speak(msg);
}

当我运行这段代码时，我立即得到所有的日志，只有在一切都完成后，我才开始一个接一个地听 100 篇演讲。因此，似乎所有生成的语音都被累积起来，然后当没有其他命令来完成语音生成器时，它会立即吐出所有这些语音。有没有办法改变这种行为并能够以正确的顺序发音？

我已经在 Google Chrome 75 上试过了。

Answer 1

您的分析是正确的，只有在所有 console.logs 完成后才会运行 speak 命令。这是因为，作为 API，speechSynthesis 方法(例如 speak())被放入浏览器的任务队列中，等待调用堆栈清除，即所有 console.logs 都已完成。 Here's a good video .

如果您希望某些事情与进入任务队列的事情同时发生，那么您可以使用事件。在这种情况下，话语有 onstart 和 onend，具体取决于您希望它发生在演讲之前还是之后。

因此，假设您希望 console.log 发生在演讲之前，您可以使用此代码。但是如果你希望它在将 onstart 更改为 onend 之后发生。

const showAndSayIt = (m) => {
    const msg = new SpeechSynthesisUtterance(m);
    msg.onstart = () => console.log(m);
    speechSynthesis.speak(msg);
}