控制Web Audio API缓冲区的播放

时间:2013-10-09 14:15:21

标签: html5-audio web-audio

我希望能够将音频输入录制到缓冲区中,并使用普通<audio>标记之类的控件进行播放。是否可以控制播放(暂停,播放,跳过,擦除等)?

例如,在Chris Wilson的项目中:http://webaudiodemos.appspot.com/AudioRecorder/index.html,他记录麦克风输入,并允许将其作为WAV下载。在录制之后,我不想下载,而是希望能够使用标准音频控件来播放它。我不确定缓冲区是否应该以这种方式使用。

如果无法做到这一点,我是否需要先将该缓冲区转换为音频文件(ogg / mp3 / wav)?为了给出更多的上下文,想象一下正在创建的应用程序就像一个带有音频输入的GarageBand类型程序,可以在录制后播放和编辑。

我的问题似乎与this one有关,除了我没有向服务器发送任何内容,我通过audioRecorder.getBuffers()中定义的{{1}}获取音频输入

1 个答案:

答案 0 :(得分:1)

所以,你有两个选择 -

1)你可以从RecordJS中获取(合并!)AudioBuffer并直接播放。这是最有效的;你不是将它“编码”为WAV然后再次解码它。缺点是直接播放音频缓冲区意味着你必须自己实现播放器控件 - 它很容易实现暂停,播放,跳过,擦除等,但你必须这样做。 (“scrub”非常困难,但其余的都非常简单。请注意,AudioBufferSourceNode中没有“暂停” - 你需要停止()BufferSource节点,记住你的位置,然后创建一个新的BufferSource当运输不停顿时,节点和start()。嗯,这开始听起来像一个好的侧面项目作为一个例子 - 不幸的是,我的桩现在相当高。

2)您可以,而不是“下载”,只需获取blob URL并将其用作元素的SRC - 即可为您播放。这将更容易,但你没有精细的控制 - 你在这里至少有一次复制缓冲区。

对于像GarageBand这样类似DAW的项目,我强烈推荐#1,因为你无论如何都要进行自定义传输控制(因为你想要同步播放多个曲目等)。实施时间稍长,但效率更高,更接近你想做的事情。