问题:我正在使用 NodeJS 开发一个应用程序，用户在其中加载页面，麦克风将数据流式传输到 NodeJS(我在 websocket 部分使用 Socket.IO)。我的流媒体工作正常，但现在我想知道如何播放收到的音频？
这是我从流中收到的消息的图片，我正尝试在浏览器上播放它，我猜它是 PCM 音频，但我不是专家。 <强> http://i.imgur.com/mIROL1T.png 这个对象是 1023 长。
我在浏览器上使用的代码如下(太长直接放这里): https://gist.github.com/ZeroByter/f5690fa9a7c20e2b24cccaa5a8cf3b86
问题:我从 here 中删除了 socket.on("mic") .但我不确定它如何有效地播放它接收到的音频数据。
这不是我第一次使用 WebSocket，我非常了解 WebSocket 的基本工作原理，但这是我第一次使用 Web Audio API。所以我需要一些帮助。
最佳答案
是的，您的图像剪辑确实看起来像对 Web Audio API 友好的 PCM 音频
我编写了这样一个基于 Web Socket 的浏览器客户端，以使用 Web Audio API 呈现从我的 nodejs 服务器接收到的 PCM 音频......呈现音频很简单，但是必须在单线程 javascript 环境中照顾 Web Socket，以接收下一个音频缓冲区，它本质上是抢先的，如果没有下面概述的技巧，将导致可听见的爆音/故障
最终有效的解决方案是将所有 Web 套接字逻辑放入 Web Worker 中，该 Web Worker 填充 WW 端循环队列。然后，浏览器端从 WW 队列中提取下一个音频缓冲区数据，并填充从 Wed Audio API 事件循环内部驱动的 Web Audio API 内存缓冲区。这一切都归结为不惜一切代价避免在浏览器端做任何实际工作，这会导致音频事件循环饥饿或无法及时完成以服务于它自己的下一个事件循环事件。
我写这篇文章是我第一次涉足 javascript，所以......你还必须执行浏览器 F5 以重新加载屏幕以播放不同的流(4 个不同的音频源文件可供选择)......
https://github.com/scottstensland/websockets-streaming-audio
我想简化使用，使其成为 API 驱动，而不是嵌入到相同的代码库中(将低级逻辑与用户空间调用分开)
希望对你有帮助
更新 - this git repo renders mic audio using Web Audio API - 这个独立的例子展示了如何访问音频内存缓冲区...... repo 还有另一个最小的内联 html 例子，它播放显示的麦克风音频
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>capture microphone then show time & frequency domain output</title>
<script type="text/javascript">
var webaudio_tooling_obj = function () {
// see this code at repo :
// https://github.com/scottstensland/webaudioapi-microphone
// if you want to see logic to access audio memory buffer
// to record or send to downstream processing look at
// other file : microphone_inline.html
// this file contains just the mimimum logic to render mic audio
var audioContext = new AudioContext(); // entry point of Web Audio API
console.log("audio is starting up ...");
var audioInput = null,
microphone_stream = null,
gain_node = null,
script_processor_node = null,
script_processor_analysis_node = null,
analyser_node = null;
// get browser media handle
if (!navigator.getUserMedia)
navigator.getUserMedia =navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if (navigator.getUserMedia) { //register microphone as source of audio
navigator.getUserMedia({audio:true},
function(stream) {
start_microphone(stream);
},
function(e) {
alert('Error capturing audio.');
}
);
} else { alert('getUserMedia not supported in this browser.'); }
// ---
function start_microphone(stream) {
// create a streaming audio context where source is microphone
microphone_stream = audioContext.createMediaStreamSource(stream);
// define as output of microphone the default output speakers
microphone_stream.connect( audioContext.destination );
} // start_microphone
}(); // webaudio_tooling_obj = function()
</script>
</head>
<body></body>
</html>
我在上面的 git repo 中给出了如何设置这个文件...上面的代码显示了在浏览器中使用 Web Audio API 呈现音频(麦克风)的最小逻辑
关于javascript - 如何播放从 websocket 流接收到的 PCM 音频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36482348/