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 完成，说话命令只有运行。这是因为，作为 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);
}

window.speechSynthesis.speak 除非没有其他命令未完成，否则不会说话

window.speechSynthesis.speak won't speak unless no other command remains incomplete

javascript

text-to-speech

speech-synthesis

speechsynthesizer