使用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