从 HTML5 Audio Microphone Stream 获取音频电平

Posted 2023-02-25

【中文标题】从 HTML5 Audio Microphone Stream 获取音频电平

【英文标题】：Get audio levels from HTML5 Audio Microphone Stream

【发布时间】：2013-04-08 23:22:12

【问题描述】：

在之前的堆栈溢出问题中，我找到了这段代码：

<script>
// this is to store a reference to the input so we can kill it later 
var liveSource;
// creates an audiocontext and hooks up the audio input
function connectAudioInToSpeakers()
  var context = new webkitAudioContext();  
  navigator.webkitGetUserMedia(audio: true, function(stream) 
    console.log("Connected live audio input");
    liveSource = context.createMediaStreamSource(stream);
    liveSource.connect(context.destination);
    console.log(liveSource);
  );
 
// disconnects the audio input
function makeItStop()
   console.log("killing audio!");
   liveSource.disconnect();
 
// run this when the page loads
connectAudioInToSpeakers();
</script>

从用户的麦克风中获取音频并通过扬声器播放。我想要的是输入的电平（幅度）（例如，如果发生削波，我可以显示红色警告，或者告诉用户他们需要说出来）。在上面的代码中，我如何真正掌握原始数据？

例如，如何将实际数字记录到控制台？我猜它都存储在 liveSoure 中？

我不需要任何巧妙的画布动画等，只需一个数字即可告诉我输入的音量有多大。这相对简单吗？如果是这样，它是如何完成的？

谢谢

【参考方案1】：

这就是我的做法 - 你可以在 http://labs.dinahmoe.com/dynamicmusicengine/ 上看到它，只需将 liveSource 连接到这个 javascriptNode（还有 context.createScriptProcessor(4096, 1, 1) 这是新语法，尽管两者都将根据到http://www.w3.org/2011/audio/wiki/F2F_Mar_2013)

var levelChecker = context.createJavaScriptNode(4096, 1 ,1);
liveSource.connect(levelChecker);
levelChecker.connect(context.destination);

levelChecker.onaudioprocess = function(e) 
        var buffer = e.inputBuffer.getChannelData(0);

        // Iterate through buffer to check if any of the values exceeds 1.
        for (var i = 0; i < buffer.length; i++) 
            if (1 =< buffer[i]) 
                console.log("Oh noes! We got a peak.", buffer[i]);
            
        

【讨论】：

实际上只是要添加，它似乎只工作了几秒钟，然后停止工作。你知道为什么吗？我在这里把它放在一个单独的问题中：***.com/questions/15900103/…Thanks

不管怎样，这种方法效率很低。但是，如果您想在给定的样本块中获得真正的峰值，则需要它。一种更快的方法是使用来自分析器节点的时域数据，但您可能会错过一些峰值。如果您只是进行可视化，这可能无关紧要。