Javascript 如何播放从websocket流接收的PCM音频？
问题：我正在使用NodeJS制作一个应用程序，其中用户加载一个页面，麦克风将数据流传输到NodeJS（我正在使用Socket.IO作为websocket部分）。我已经让流媒体工作良好，但现在我想知道如何播放我收到的音频 这是一张我试图在浏览器上播放的信息流的图片，我猜是PCM音频，但我不是专家此对象的长度为1023 我在浏览器上使用的代码如下（太长，无法直接放在这里）： 问题：我把麦克风上的Javascript 如何播放从websocket流接收的PCM音频？,javascript,node.js,audio,websocket,pcm,Javascript,Node.js,Audio,Websocket,Pcm,问题：我正在使用NodeJS制作一个应用程序，其中用户加载一个页面，麦克风将数据流传输到NodeJS（我正在使用Socket.IO作为websocket部分）。我已经让流媒体工作良好，但现在我想知道如何播放我收到的音频 这是一张我试图在浏览器上播放的信息流的图片，我猜是PCM音频，但我不是专家此对象的长度为1023 我在浏览器上使用的代码如下（太长，无法直接放在这里）： 问题：我把麦克风上的插座撕破了。但我不确定它是如何有效地播放接收到的音频数据的 这不是我第一次使用WebSocket，我非常了
插座撕破了。但我不确定它是如何有效地播放接收到的音频数据的
这不是我第一次使用WebSocket，我非常了解WebSocket工作的基础知识，但这是我第一次使用Web音频API。所以我需要一些帮助。是的，您的图像剪辑看起来确实像PCM audio，它对Web audio API很友好
我编写了这样一个基于Web套接字的浏览器客户端，以使用Web音频API呈现从我的nodejs服务器接收到的PCM音频。。。渲染音频很简单，但是必须在单线程javascript环境中监视Web套接字，才能接收下一个音频缓冲区（固有的抢占性），这将不会导致下面概述的技巧引起声音弹出/小故障
最终有效的解决方案是将所有Web套接字逻辑放入一个Web工作程序中，该工作程序填充WW端循环队列。然后，浏览器端从WW队列中提取下一个音频缓冲区值的数据，并填充从Wed audio API事件循环内部驱动的Web audio API内存缓冲区。这一切归结为不惜一切代价避免在浏览器端进行任何实际工作，这会导致音频事件循环耗尽或无法及时完成，以服务于自己的下一个事件循环
这是我第一次尝试javascript，所以。。。此外，你必须做一个浏览器F5重新加载屏幕播放不同的流（4个不同的音频源文件来选择）
我希望简化使用，使其成为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>
捕获麦克风，然后显示时域和频域输出
var webaudio_工具_obj=函数（）{
//见回购协议中的代码：
// https://github.com/scottstensland/webaudioapi-microphone
//如果您想查看访问音频内存缓冲区的逻辑
//记录或发送到下游处理查看
//其他文件：micromic_inline.html
//此文件仅包含渲染麦克风音频的最小逻辑
var audioContext=new audioContext（）；//Web音频API的入口点
log（“音频正在启动…”）；
var audioInput=null，
麦克风\u流=空，
增益节点=空，
脚本\处理器\节点=null，
脚本\处理器\分析\节点=空，
分析器_节点=空；
//获取浏览器媒体句柄
如果（！navigator.getUserMedia）
navigator.getUserMedia=navigator.getUserMedia |
navigator.webkitGetUserMedia||
navigator.mozGetUserMedia |
navigator.msGetUserMedia；
如果（navigator.getUserMedia）{//将麦克风注册为音频源
getUserMedia（{audio:true}，
功能（流）{
启动麦克风（流）；
},
职能（e）{
警报（“捕获音频时出错”）；
}
);
}else{alert（'getUserMedia在此浏览器中不受支持。'）；}
// ---
功能启动\u话筒（流）{
//创建源为麦克风的流式音频上下文
麦克风\u流=audioContext.createMediaStreamSource（流）；
//将默认输出扬声器定义为麦克风的输出
麦克风\u流连接（audioContext.destination）；
}//启动麦克风
}(); // webaudio_工具_obj=函数（）
我给了一个如何设置这个文件在上面的git报告。。。上面的代码显示了在浏览器中使用Web audio API渲染音频（mic）的最低逻辑我仍然对如何实际播放音频感到困惑，只是这部分我甚至不理解。至少一旦这开始起作用，我就可以进行优化。你如何回答OP想要的问题？将传入流播放到音频播放器（上下文）？