javascript - 为什么恢复后状态在 Safari 中的 Web 音频中会无效？

Question

我有一个代码可以播放从 S3 下载的音频文件。在页面上，用户看到带有图片和单词的轮播，他应该发音并听到正确发音的音频。问题出在 Safari 中，它会阻止在窗口加载时自动播放音频文件。我知道 Safari 默认会阻止自动播放，并且在设置 自动播放:启用有声停止媒体 .当我转到页面时，Safari 会阻止自动播放音频文件 和页面停止加载和“卡住”和 AudioContext 状态为“暂停”如果到 在任何用户点击文档时调用 resume()，例如，状态更改为“正在运行”，但如果我点击下一张幻灯片，下一个函数将调用 source.stop() 如果正在播放音频，则停止音频播放，源是 bufferSource(AudioContext.createBufferSource()) 它抛出错误 '无效状态错误'
screenshot with error

为什么会出现这个错误？如果状态处于“运行”而不是“暂停”。同样在类(class)中存在3个按钮来再次播放音频，录制音频并播放录制的音频并在恢复所有工作后，但是当停止功能调用显示的错误时。

Answer 1

如果您看到 "InvalidStateError: The object is in an invalid state使用 AudioBufferSourceNodes 时，在 Safari 中(或在具有不同消息的其他浏览器中)很可能是因为您调用了stop()或 start()在播放完毕的节点上。

报价 from MDN :

An AudioBufferSourceNode can only be played once; after each call to start(), you have to create a new node if you want to play the same sound again. Fortunately, these nodes are very inexpensive to create, and the actual AudioBuffers can be reused for multiple plays of the sound. Indeed, you can use these nodes in a "fire and forget" manner: create the node, call start() to begin playing the sound, and don't even bother to hold a reference to it. It will automatically be garbage-collected at an appropriate time, which won't be until sometime after the sound has finished playing.