通过Web Audio API进行分块/audio回放

我在最后一篇文章中提出了这个问题,但是因为这个问题与原来的问题有关,所以我将它们分开发布。 我无法通过networkingaudio播放audio,就像在媒体播放器中播放audio一样。 我已经尝试了2种不同的传输协议,binaryjs和socketio,并且在尝试通过Webaudio播放时也没有什么不同。 为了排除传输audio数据的问题,我创build了一个例子,在从客户端接收到数据后将数据发送回服务器,并将返回的数据转储到标准输出。 将其configuration到VLC中会产生您期望听到的聆听体验。

要通过vlc播放结果时听到结果,听起来应该如此, 请使用以下命令运行https://github.com/grkblood13/web-audio-stream/tree/master/vlc上的示例:

$ node webaudio_vlc_svr.js | vlc -

不pipe什么原因,当我尝试通过Webaudio播放相同的audio数据时,它失败了。 结果是随机噪声,两者之间有很大的空白。

下面的代码会导致播放声音如此糟糕?

 window.AudioContext = window.AudioContext || window.webkitAudioContext; var context = new AudioContext(); var delayTime = 0; var init = 0; var audioStack = []; client.on('stream', function(stream, meta){ stream.on('data', function(data) { context.decodeAudioData(data, function(buffer) { audioStack.push(buffer); if (audioStack.length > 10 && init == 0) { init++; playBuffer(); } }, function(err) { console.log("err(decodeAudioData): "+err); }); }); }); function playBuffer() { var buffer = audioStack.shift(); setTimeout( function() { var source = context.createBufferSource(); source.buffer = buffer; source.connect(context.destination); source.start(context.currentTime); delayTime=source.buffer.duration*1000; // Make the next buffer wait the length of the last buffer before being played playBuffer(); }, delayTime); } 

完整的源代码: https : //github.com/grkblood13/web-audio-stream/tree/master/binaryjs

       

网上收集的解决方案 "通过Web Audio API进行分块/audio回放"

你真的不能像这样调用source.start(audioContext.currentTime)。

setTimeout()有一个很长而不精确的延迟 – 其他主线程的东西可以继续,所以你的setTimeout()调用可以延迟几毫秒,甚至几十毫秒(通过垃圾收集,JS执行,布局…)代码正试图立即播放audio – 这需要在大约0.02ms的精度内启动,而不会出现故障 – 在一个具有数十毫秒不精确度的计时器上。

networkingaudio系统的重点在于audio调度程序在单独的高优先级线程中工作,并且可以以非常高的精度预先调度audio(开始,停止和audioparam更改)。 你应该重写你的系统:

1)跟踪当第一个块在audiocontext时间计划 – 不要立即安排第一个块,给一些延迟,使您的networking,希望跟上。

2)基于其“下一个块”定时来调度未来接收的每个连续块。

例如(注意我没有testing这个代码,这是我的头顶):

 window.AudioContext = window.AudioContext || window.webkitAudioContext; var context = new AudioContext(); var delayTime = 0; var init = 0; var audioStack = []; var nextTime = 0; client.on('stream', function(stream, meta){ stream.on('data', function(data) { context.decodeAudioData(data, function(buffer) { audioStack.push(buffer); if ((init!=0) || (audioStack.length > 10)) { // make sure we put at least 10 chunks in the buffer before starting init++; scheduleBuffers(); } }, function(err) { console.log("err(decodeAudioData): "+err); }); }); }); function scheduleBuffers() { while ( audioStack.length) { var buffer = audioStack.shift(); var source = context.createBufferSource(); source.buffer = buffer; source.connect(context.destination); if (nextTime == 0) nextTime = context.currentTime + 0.05; /// add 50ms latency to work well across systems - tune this if you like source.start(nextTime); nextTime+=source.buffer.duration; // Make the next buffer wait the length of the last buffer before being played }; }