提高套接字的音质io将音频数据从客户端发送回服务器返回客户端

Question

这段代码实际上有效。每300毫秒，一大块音频数据被发送到服务器并返回到要播放的插座房间中的客户端。只有一个问题。这是非常糟糕的音频质量。每隔300秒就有一个短暂的静电噪声几乎立即消失。我认为这是因为音频块被发送到服务器并返回到房间的插座之间的时间。我没有使用类似套接字io p2p或peerjs的webRTC，因为它们非常复杂并且我是初学者，所以这段代码中我能做些什么来更顺畅地播放音频？我尝试了不同的方法，例如将setInterval函数中的毫秒数更改为60并将其提高到5000. choppier的间隔越小但播放速度越快但质量越高但延迟时间为5秒。

客户：

var constraints = { audio: true };
    navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
        var mediaRecorder = new MediaRecorder(mediaStream);
        mediaRecorder.onstart = function(e) {
            this.chunks = [];
        };

        mediaRecorder.ondataavailable = function(e) {
            this.chunks.push(e.data);
        };
        mediaRecorder.onstop = function(e) {
            var blob = new Blob(this.chunks);
            var url = <%- JSON.stringify(url) %>;
            socket.emit('radio', {blob : blob, url : url});
        };

        mediaRecorder.start();

        setInterval(function() {
            mediaRecorder.stop()
            mediaRecorder.start();
        }, 300);
    });

    socket.on('voice', function(arrayBuffer) {
        var blob = new Blob([arrayBuffer], { 'type' : 'audio/webm;codecs=opus' });
        var audio = document.createElement('audio');
        audio.src = window.URL.createObjectURL(blob);
        audio.play();
    });

服务器：

socket.on('radio', function(data) {
    socket.broadcast.to(data.url).emit('voice', data.blob);
    socket.join(data.url);
});

Answer 1

你的音质很好。您的问题是您的音频块之间的播放存在差距。好的音频看起来像这样。每个音频样本都是*。你可能每秒有44K样本或类似的东西。

 ***********************************************

您为音频元素提供的示例如下所示

 ******* ******* ******* *******   ******** *******   ****

注意差距。那些是流行音乐。请注意，音频播放的时间比捕获的时间长。那是因为差距。

如果您决定接受它，您的任务就是弄清楚如何将您的音频块放入队列中，以便您的音频播放器可以连续播放它们，正好在最后一个音频播放器停止时启动下一个音频播放器。你需要某种“即发即忘”的机制。

完全解释这个问题对Stack Overflow问题来说很重要，所以我会提供一些提示。

1. 不要启动和停止mediaRecorder。让它继续运行。
2. 在mediaRecorder.start(nn)中放入少量毫秒，如10
3. 通过ondataavailable事件处理程序将您的blob（样本缓冲区）从套接字发送到服务器，而不是onstop处理程序。这使得它们基本上流向服务器。
4. 使用Web Audio API将示例缓冲区排入用户的音频设备。大话题。仔细看看。