javascript - 使用 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 事件触发频率足以为网络音频提供连续数据？如果没有，那么您听到的噪音就是每一位音频停止播放后的爆裂声和咔哒声。此外，通过交换 sourceNode 上的 ArrayBuffer 来更新数据并不是一个好主意。

我建议使用 ScriptProcessorNode与您想要的缓冲区大小 - 这使您能够以音频速率将原始数据插入图表中，这应该减少噪音。看this demo要了解如何设置节点，基本上您只需使用流数据填充 outputBuffer 即可。

只有当您的流媒体速度快于音频速率时，这才会真正有帮助!

祝你好运

雅库布