Question

问题我正在使用NodeJS创建一个应用程序，其中用户加载页面并且麦克风将数据流传输到NodeJS（我使用Socket.IO作为websocket部分）。我的流媒体工作正常，但现在我想知道如何播放收到的音频？

这是我从流中收到的消息的图片，我试图在浏览器上播放，我猜它是PCM音频，但我不是专家。 http://i.imgur.com/mIROL1T.png 此对象长1023。

我在浏览器上使用的代码如下（太长时间无法直接放在此处）： https://gist.github.com/ZeroByter/f5690fa9a7c20e2b24cccaa5a8cf3b86

问题：我从here抓取了socket.on("mic")。但我不确定它如何有效地播放它正在接收的音频数据。

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

Answer 1

是的，您的图片剪辑看起来像是支持Web Audio API的PCM音频

我编写了这样一个基于Web Socket的浏览器客户端，使用Web Audio API从我的nodejs服务器呈现收到的PCM音频...获取呈现音频非常简单，但是必须在单线程javascript环境中监听Web Socket，接收下一个音频缓冲区，这本身是先发制人的，没有下面列出的技巧导致听得见的流行/故障

最终解决方案是将所有Web Socket逻辑放入一个填充WW端循环队列的Web Worker中。然后，浏览器端从该WW队列中提取下一个音频缓冲区的数据，并填充从Wed Audio API事件循环内部驱动的Web Audio API内存缓冲区。这一切都归结为不惜一切代价避免在浏览器端进行任何实际工作，导致音频事件循环挨饿或没有及时完成以服务其自己的下一个事件循环事件。

我写这篇文章是我第一次尝试使用javascript所以...也必须用浏览器F5重新加载屏幕来播放不同的流（4个差异音频源文件可供选择）......

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

我想简化用途，以便成为API驱动而不是烘焙到相同的代码库（与用户空间调用分开的低级逻辑）

希望这会有所帮助

UPDATE - 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呈现音频（mic）的最小逻辑

如何播放我从websocket流中收到的PCM音频？

1 个答案: