javascript - 关于 html Web Audio Api 和 标签的混淆

Question

我是一个 html5 新手，对音频标签和网络音频 api 有一些困惑。我目前正在为我们的音频播放器开发自定义音频洗涤器。洗涤器将有一个进度条和某种时间指示器。用户应该能够拖动进度条并播放音频。

当前的音频播放器一次只播放一小块 mp3，然后通过向服务器发送请求(轮询)定期加载。我知道使用标签你必须提供 src 但考虑到正在加载小块而不是 1 个整体我也在寻找我是否可以从网络音频 api 捕获事件。创建和播放音频的方式是以下列方式使用网络音频 api:

soundSource = context.createBufferSource();
soundBuffer = context.createBuffer()
soundSource.buffer = soundBuffer;
soundSource.connect(context.destination);

我不明白的是音频标签和目标节点之间的关系。

如何将目标节点定向到音频标签？我可以从网络音频 api 捕获事件(播放、暂停、时间更新)吗？本质上，我希望能够在一次播放小块的流式音频播放器上编写事件监听器，并将它们全部绑定(bind)到自定义 slider 。任何人都可以帮助我或提供一些指示吗？

戈登

Answer 1

好的。我认为您不能将 context.destination 的输出重定向到任何其他组件。您可以将 context.destination 视为扬声器。无论你发送给它什么都会立即播放。

所以 WebAudio API 和 Audio 标签之间没有太多关系。各种浏览器中的音频标签实现可能实际上在幕后使用 WebAudioAPI，但没有任何面向公众的 API 来更改音频标签行为。

尽管音频标签支持所有 standard Media Events .

然而，在音频标签和 WebAudio API 之间有一个微小的桥梁。您可以使用 Audio 标签中的音频作为 WebAudioAPI 中的音频源。这是 context.createMediaElementSource API in WebAudio .

最后，擦洗。如果你想能够“实时”擦洗，你将不得不将整个音频文件存储在内存中。这样你就可以几乎瞬间跳到用户想要擦洗的地方。使用手中的 AudioBuffer，您可以使用 ScriptProcessorNode 根据 slider 的位置校正输出的音频 block 。