使用HTML5播放流中的音頻

Question

我在網絡瀏覽器中播放流音頻有問題。 我通過BinaryJS將語音作為2048長度的Int16數組流式傳輸到客戶端的瀏覽器，並且輸出的聲音非常嘈雜。 這就是我接收流的方式：

 var 
    client,
    audioContext,
    audioBuffer,
    sourceNode,
    sampleSize = 2048,

  function main() {
    try {
        audioContext = new AudioContext();
    } catch(e) {
        alert('Web Audio API is not supported in this browser');
    }
    sourceNode = audioContext.createBufferSource();
    sourceNode.connect(audioContext.destination);

    connectClient();

    playSound();
  };

  function playSound() {

    sourceNode.start(0);    

  };

   function onError(e) {
    console.log('error' + e);
  };

  function connectClient() {
    client = new BinaryClient('ws://localhost:3000');
    client.on('open', function() {
      console.log('stream opened');

    });
    client.on('stream', function(stream, meta){
      stream.on('data', function(data){
        var integers = new Int16Array(data);
        var audioBuffer = audioContext.createBuffer(1, 2048, 4410);
        audioBuffer.getChannelData(0).set(integers);
        sourceNode.buffer = audioBuffer;
        });
      });
    };

  main();

我應該怎么做才能獲得干凈的音頻？

Answer 1

我認為您的播放技術正在引起噪音–首先，您是否可以確保stream事件觸發頻率足以為Web Audio提供連續數據？ 如果不是，那么您聽到的聲音會在音頻的每一比特停止播放后發出咔嗒聲。 同樣，通過交換sourceNode上的ArrayBuffers更新數據sourceNode是一個好主意。

我建議您使用具有所需緩沖區大小的ScriptProcessorNode-這使您能夠以音頻速率將原始數據插入到圖形中，這樣可以減少噪聲。 查看此演示以了解如何設置節點，基本上，您只需要用流數據填充outputBuffer 。

僅當您的流媒體速度快於音頻速率時，這才真正有用！

祝好運，

的Jakub