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

2023-08-29 13:48:16

问题：我正在使用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.所以我需要一些帮助.

解决方法:

是的,您的图像剪辑看起来像PCM音频,它是Web Audio API友好的

我编写了这样一个基于Web Socket的浏览器客户端,使用Web Audio API从我的nodejs服务器呈现收到的PCM音频…获取呈现音频很简单,但是必须在单线程javascript环境中监听Web Socket,接收下一个音频缓冲区本质上是先发制人的,没有下面列出的技巧会引起可听见的弹出/故障

最终解决方案是将所有Web Socket逻辑放入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呈现音频(mic)的最小逻辑

码农公寓

相关文章