如何在 HTML 上無延遲的 stream PCM 音頻？

Question

PCM 音頻數據在 Unity3D 中實時捕獲。 所有這些數據將通過 WebSockets 流式傳輸到 HTML。 一般設置是 Socket.IO 和 node.js 服務器。

我的主要任務是為所有平台上的實時視頻+音頻流解決方案添加流暢的音頻播放。 這是我的工作進度（視頻流）： 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 上無延遲的 stream PCM 音頻？

無論您做什么，數字音頻總是有一些滯后。 這與 web 瀏覽器本身無關。

所有這些數據將通過 WebSockets 流式傳輸到 HTML。

為什么？ 數據只向一個方向傳輸，因此您可以使用常規的 HTTP 響應，而不必擔心 Web Sockets 的開銷。

我擔心的一個問題是 Web 瀏覽器不支持多線程

這並不准確。

它是實時運行的，但我發現了一些滯后的問題，比如噪音......

您的代碼似乎做的是獲取它接收到的 PCM 幀並立即播放。 這不好，因為如果您不連續播放接收到的緩沖區，聲音就會被破壞。 您必須獲取數據並安排在當前數據完成后立即播放，而不是過早或過晚采樣。

傳統上，這意味着您自己進行緩沖並設置 ScriptProcessorNode 以從這些緩沖區中讀取。 但是，這也需要一些 DIY 重新采樣，因為編碼速率可能與播放速率不同。

這些天，我認為MediaSource Extensions支持PCM解碼，所以你可以通過它來pipe你的數據，讓底層系統為你做所有的工作。