如何无延迟地在HTML上流PCM音频？

Question

PCM音频数据在Unity3D中实时捕获。所有这些数据将通过WebSockets流式传输为HTML。常规设置是带有node.js服务器的Socket.IO。

我的主要任务是为All平台上的实时视频+音频流解决方案添加流畅的音频播放。这是我的工作进度（视频流）：https://youtu.be/82_-a7WF3vs

音频和视频流传输部分在非html /非WebGL平台上运行良好。

但是，我无法使用javascript在html上流畅播放音频。它是实时运行的，但我发现了一些滞后的问题，例如噪音...我关心的问题之一是Web浏览器不支持多线程，它在同时接收流数据和播放时增加了一些延迟。

以下是我用于PCM播放的核心脚本。希望有人可以帮助我改善它。

        var startTime = 0;
        var audioCtx = new AudioContext();

        function ProcessAudioData(_byte) {
            ReadyToGetFrame_aud = false;

            //read meta data
            SourceSampleRate = ByteToInt32(_byte, 0);
            SourceChannels = ByteToInt32(_byte, 4);

            //conver byte[] to float
            var BufferData = _byte.slice(8, _byte.length);
            AudioFloat = new Float32Array(BufferData.buffer);

            //=====================playback=====================
            if(AudioFloat.length > 0) StreamAudio(SourceChannels, AudioFloat.length, SourceSampleRate, AudioFloat);
            //=====================playback=====================

            ReadyToGetFrame_aud = true;
        }

        function StreamAudio(NUM_CHANNELS, NUM_SAMPLES, SAMPLE_RATE, AUDIO_CHUNKS) {
            var audioBuffer = audioCtx.createBuffer(NUM_CHANNELS, (NUM_SAMPLES / NUM_CHANNELS), SAMPLE_RATE);
            for (var channel = 0; channel < NUM_CHANNELS; channel++) {
                // This gives us the actual ArrayBuffer that contains the data
                var nowBuffering = audioBuffer.getChannelData(channel);
                for (var i = 0; i < NUM_SAMPLES; i++) {
                    var order = i * NUM_CHANNELS + channel;
                    nowBuffering[i] = AUDIO_CHUNKS[order];
                }
            }

            var source = audioCtx.createBufferSource();
            source.buffer = audioBuffer;

            source.connect(audioCtx.destination);
            source.start(startTime);

            startTime += audioBuffer.duration;
        }

Answer 1

如何无延迟地在HTML上流PCM音频？

无论您做什么，数字音频总是会有些滞后。这与网络浏览器本身无关。

所有这些数据将通过WebSockets流式传输到HTML。

为什么？数据只是一个方向，因此您可以使用常规的HTTP响应，而不必担心Web套接字的开销。

我担心的是Web浏览器不支持多线程

这不是很准确。

它是实时运行的，但是我发现了一些滞后的问题，例如噪音...

您的代码似乎要做的就是拿一个接收到的PCM帧并立即播放。这不好，因为如果您不连续播放接收到的缓冲区，声音就会被破坏。您必须获取数据并将其安排在当前数据完成后立即播放，而不是过早或过晚采样。

传统上，这意味着您要进行自己的缓冲并设置一个ScriptProcessorNode以便从那些缓冲区中读取。但是，这也需要一些DIY重采样，因为编码速率可能与回放速率不同。

这些天，我认为MediaSource Extensions支持PCM解码，因此您可以通过它来传输数据，并让底层系统为您完成所有工作。