使用HTML5播放流中的音频

时间:2015-04-07 19:09:19

标签: javascript html5

我在网络浏览器中播放音频时出现问题。我通过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();

我该怎么做才能获得干净的音频?

1 个答案:

答案 0 :(得分:1)

我认为您的播放技术会产生噪音 - 首先,您是否可以确保stream事件频繁发生,以便为Web音频提供连续数据?如果它没有,那么你听到的噪音就是每一段音频停止播放后的砰砰声和咔嗒声。此外,通过在sourceNode上交换ArrayBuffers来更新数据并不是一个好主意。

我建议使用具有所需缓冲区大小的ScriptProcessorNode - 这使您能够以音频速率将原始数据插入图表,这样可以降低噪音。查看this demo以查看如何设置节点,基本上您只需要使用流数据填充outputBuffer

如果你的流媒体速度比音频速度快,这只会真的有用!

祝你好运,

的Jakub