同时播放来自 binaryjs 服务器的传入 ArrayBuffer 音频二进制数据

Question

美好的一天！今天早上我正在使用视频聊天流，但我遇到了传入的 ArrayBuffer 的问题，其中包含音频的二进制数据。

这是我找到的用于播放二进制音频数据 (Uint8Array) 的代码：

function playByteArray(byteArray) {
    var arrayBuffer = new ArrayBuffer(byteArray.length);
    var bufferView = new Uint8Array(arrayBuffer);
    for (i = 0; i < byteArray.length; i++) {
        bufferView[i] = byteArray[i];
    }
    context.decodeAudioData(arrayBuffer, function(buffer) {
        buf = buffer;
        play();
    });
}

// Play the loaded file
function play() {
    // Create a source node from the buffer
    var source = context.createBufferSource();
    source.buffer = buf;
    // Connect to the final output node (the speakers)
    source.connect(context.destination);
    // Play immediately
    source.start(0);
}

下面，我使用了 https://github.com/streamproc/MediaStreamRecorder 中的 MediaStreamRecorder 来记录来自 getUserMedia 的流。此代码会不断将记录的二进制数据发送到服务器。

if (navigator.getUserMedia) {
        navigator.getUserMedia({audio: true, video: true}, function(stream) {
            video.src = (window.URL || window.webkitURL).createObjectURL(stream); //get this for video strewam url
          video.muted = true;
            multiStreamRecorder = new MultiStreamRecorder(stream);
            multiStreamRecorder.canvas = {
              width: video.width,
              height: video.height
            };
            multiStreamRecorder.video = video;

          multiStreamRecorder.ondataavailable = function(blobs) {
            var audioReader = new FileReader();
              audioReader.addEventListener("loadend", function() {
                var arrBuf = audioReader.result;
                var binary = new Uint8Array(arrBuf);
                streamToServ.write(binary);
                // streamToServ is the binaryjs client
              });
              audioReader.readAsArrayBuffer(blobs.audio);
            };
          multiStreamRecorder.start(1);
        }, onVideoFail);
    } else {
        alert ('failed');
    }

将生成的 blob（音频和视频）转换为二进制并将其发送到 binaryjs，它将在另一个客户端上播放：

client.on('stream', function (stream, meta) {
    stream.on('data', function(data) {
        playByteArray(new Uint8Array(data));
    });
});

我在传输二进制数据时没有遇到任何问题，但问题是播放的每个二进制数据在播放时都有明显的打嗝声。我如何播放传入的 ArrayBuffers 有问题吗？我也在考虑向 streamproc 询问这个问题。

提前致谢！

干杯。

Answer 1

不确定这是否是问题所在，但也许您应该使用 source.start(time) 而不是 source.start(0)，其中 time 是您想要开始源代码的位置。 source.start(0) 将立即开始播放。如果您的字节数组比实时速度更快，则源可能会重叠，因为您尽快启动它们。

Answer 2

我通过制作音频缓冲区队列找到了解决此问题的方法。大部分代码来自这里：

Choppy/inaudible playback with chunked audio through Web Audio API

谢谢。

同时播放来自 binaryjs 服务器的传入 ArrayBuffer 音频二进制数据

Playing incoming ArrayBuffer audio binary data from binaryjs server simultaneously

audio

binary

arraybuffer

web-audio-api