WebAudio Analyzer 不返回任何数据答案

【问题标题】：WebAudio Analyser not returning any dataWebAudio Analyzer 不返回任何数据
【发布时间】：2017-11-22 03:48:32
【问题描述】：

我想使用 webAudio 制作一个简单的 VU Meter 来指示 <video> 元素的音量，其中包含来自网络摄像头的实时流（使用 Janus 流式传输）。我从其他示例中创建了以下函数。流初始化后调用，但analyser.getByteFrequencyData(array);方法生成的数组全为零。

function meterInit(){

    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    videoElement = document.getElementById('remotevideo');
    source = audioCtx.createMediaElementSource(videoElement);

    analyser = audioCtx.createAnalyser();
    analyser.smoothingTimeConstant = 0.2;
    analyser.fftSize = 512;
    analyser.minDecibels = -200;

    source.connect(analyser);
    analyser.connect(audioCtx.destination);

    javascriptNode = audioCtx.createScriptProcessor(2048, 1, 1);
    javascriptNode.connect(audioCtx.destination);

    analyser.connect(javascriptNode);

    javascriptNode.onaudioprocess = function() {

        var array =  new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(array);
        var average = getAverageVolume(array)
        document.getElementById('vuMeter').value = average;


    }
}


function getAverageVolume(array) {
    var values = 0;
    var average;

    var length = array.length;

    // get all the frequency amplitudes
    for (var i = 0; i < length; i++) {
        values += array[i];
    }

    average = values / length;
    return average;
}

【问题讨论】：

仅使用 ScriptNode 来制作动画循环听起来很奇怪，但 that should work。你的控制台没有错误？您使用哪种浏览器？从janus，你得到一个MediaStream？你是怎么设置的？

标签： javascript html5-video web-audio-api

【解决方案1】：

首先要获取 VU 计量器的值，您要使用 getByteTimeDomainData，而不是频率。

您的分析仪没有给出读数的原因是音频没有被路由到任何地方。脚本处理器节点有一个输入和一个输出数组，您必须将输入数组复制到输出数组以保持信号继续。这些是 onaudioprocess 事件对象的属性。我建议删除脚本处理器节点，因为它会引入大量的音频延迟，您的示例中至少有 2048 个样本 + 脚本执行时间。您可以将 onaudioprocess 中的代码移动到请求动画帧循环中，这不会导致音频延迟。唯一的缺点是您没有处理每个样本，因此您可能会错过一个剪辑，但您应该能够获得 60 fps。如果检测剪辑对您的应用程序很重要，您可以在音频数据中查找它们（解码音频数据的所有值 > 1 或

【讨论】：

见下文，感谢您的帮助。请参阅下面的回复。

【解决方案2】：

@DavidSherman 和@Kaiido - 感谢您的帮助。 @David，我已将您的答案标记为正确答案-即使我的脚本实际上还没有工作-因为这里有一些非常有用的信息。依次回答您的观点：

获取频域数据实际上是可行的，因为我只是获取整个频域中峰值的平均值。我知道这在时域中的表示不如 RMS 好，但对于我的应用程序来说已经足够了。
感谢有关请求动画帧的提示 - 我现在正在使用它。
看来我的问题在于<video> 元素，因为上面评论中链接的JS Fiddle 有效。我需要回去看看我是如何生成<video> 元素的。这很奇怪，因为它有效：

var vid = document.getElementById('remotevideo'); vid.muted = !vid.muted;

【讨论】：