Web音频API：如何播放一段MP3块流

Question

我正在尝试使用Web Audio API对通过Node.js和Socket.IO流式传输到浏览器的MP3文件块进行解码和播放。

在这种情况下，我的唯一选择是为每个接收到的音频数据块创建一个新的AudioBufferSourceNode，还是可以创建单个AudioBufferSourceNode并将新的音频数据简单地附加到源节点的buffer属性末尾？

目前，这是我接收我的MP3块、解码它们并安排它们进行播放的方式。我已经验证了每个接收到的块都是“有效的MP3块”，并且已被Web Audio API成功解码。

audioContext = new AudioContext();
startTime = 0;

socket.on('chunk_received', function(chunk) {
    audioContext.decodeAudioData(toArrayBuffer(data.audio), function(buffer) {
        var source = audioContext.createBufferSource();
        source.buffer = buffer;
        source.connect(audioContext.destination);

        source.start(startTime);
        startTime += buffer.duration;
    });
});

非常感谢任何关于如何最好地使用新音频数据“更新”Web Audio API播放的建议或见解。

- Jonathan Byrne

---

我有一些代码正在进行中，几乎与你所做的完全相同。如果你完成了，请更新这个线程。我也会这样做。 - Brad.Smith

乔纳森，你能发布一下你的服务器代码吗？ - Brad.Smith

我也在尝试做同样的事情，但是我在处理mp3块时遇到了问题。你有如何使用socket.io制作正确的mp3音频流的示例吗？ - cmarrero01

为什么要使用Web Sockets？您可以使用普通的HTTP并使用简单的音频元素。 - Brad

Answer 1

目前，decodeAudioData()要求完整文件并且无法提供对不完整文件的分块解码。下一个版本的Web音频API应该提供这个功能：https://github.com/WebAudio/web-audio-api/issues/337 与此同时，我已经开始编写用于分块解码音频的示例，直到新的API版本可用。 https://github.com/AnthumChris/fetch-stream-audio

- AnthumChris

Answer 2

不，你不能重复使用AudioBufferSourceNode，并且你也不能在AudioBuffer上进行push操作。它们的长度是不可变的。

这篇文章(http://www.html5rocks.com/en/tutorials/audio/scheduling/)提供了一些关于使用Web Audio API进行调度的好信息。但你已经走上了正确的道路。

- Kevin Ennis

Answer 3

我看到至少有两种可能的方法。

1. 设置一个 scriptProcessorNode，它将把接收到的和解码后的数据队列提供给实时流的 web-audio。

2. 利用 audioBufferSource.loop 的属性 - 根据音频时间更新 audioBuffer 的内容。

这两种方法都在 https://github.com/audio-lab/web-audio-stream 中实现。您可以在技术上使用它将接收到的数据提供给 web-audio。

- dy_