同时从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

我通过制作音频缓冲区排队找到了解决这个问题的方法。大多数代码来自这里：

Choppy/inaudible playback with chunked audio through Web Audio API

谢谢。

Answer 2

不确定这是否是问题，但也许不是source.start（0），你应该使用source.start（time），其中时间是你想要启动源的地方。 source.start（0）将立即开始播放。如果您的字节数组比实时更快，则源可能会重叠，因为您可以尽快启动它们。