播放实时音频流 - html5 [英] Play live audio stream - html5

问题描述

我有一个桌面应用程序，它通过websocket连接将原始PCM数据流式传输到我的浏览器。该流看起来像这样 ... \\x00 \\x00 \\x02 \\x00 \\ x01 \\x00 \\ x00 \\\x00\\x01\\x00\\xff\\xff\\xff\\xff\\ ... 。

I have a desktop application which streams raw PCM data to my browser over a websocket connection. The stream looks like this ...\\x00\\x00\\x02\\x00\\x01\\x00\\x00\\x00\\x01\\x00\\xff\\xff\\xff\\xff\\....

问题很简单：我可以使用Web Audio API / WebRTC / ...播放HTML格式的流吗？

The question is simple: can I play such a stream in HTML with the Web Audio API / WebRTC / ...?

非常欢迎任何建议！

代码编辑

这代码播放噪音，随机生成：

This code plays noise, randomly generated:

function myPCMSource() { 
    return Math.random() * 2 - 3;
}

var audioContext;

try {
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    audioContext = new AudioContext();
} catch(e) {
    alert('Web Audio API is not supported in this browser');
}

var bufferSize = 4096;
var myPCMProcessingNode = audioContext.createScriptProcessor(bufferSize, 1, 1);
myPCMProcessingNode.onaudioprocess = function(e) {
    var output = e.outputBuffer.getChannelData(0);
    for (var i = 0; i < bufferSize; i++) {
     output[i] = myPCMSource(); 
 }
}

因此更改 myPCMSource（ ）到websocket流输入，应该让它以某种方式工作。但事实并非如此。我没有收到任何错误，但API没有播放任何声音也没有噪音。

So changing the myPCMSource() to the websocket stream input, should make it work somehow. But it doesn't. I don't get any errors, but the API is not playing any sound nor noise.

推荐答案

使用ScriptProcessorNode，但是意识到如果主线程上有太多负载（运行你的javascript的线程，绘制屏幕等），它会出现故障。

Use a ScriptProcessorNode, but be aware that if there is too much load on the main thread (the thread that runs your javascript, draws the screen, etc.), it will glitch.

此外，你的PCM流可能在int16中，而Web Audio API在float32方面工作。像这样转换：

Also, your PCM stream is probably in int16, and the Web Audio API works in terms of float32. Convert it like so:

output_float[i] = (input_int16[i] / 32767);

即从[0; 65535]范围到[-1.0; 1.0]范围。

that is, go from a [0; 65535] range to a [-1.0; 1.0] range.

编辑
我使用 output_float [i] =（input_int16 [i] / 32767 - 1）; ，此文章表明你应该使用 output_float [i] =（input_int16 [i] / 32767）; 。现在工作正常！

EDIT I was using output_float[i] = (input_int16[i] / 32767 - 1);, this article shows that you should use output_float[i] = (input_int16[i] / 32767);. Now it's working fine!

这篇关于播放实时音频流 - html5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！