javascript - WebAudio 分析器不返回任何数据

Question

我想使用webAudio制作一个简单的VU表来指示<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;
}

Answer 1

首先要获取 VU 表的值，您需要使用 getByteTimeDomainData，而不是频率。

您的分析仪没有给出读数的原因是音频没有被路由到任何地方。脚本处理器节点有一个输入和一个输出数组，您必须将输入数组复制到输出数组才能保持信号继续运行。这些是 onaudioprocess 的事件对象的属性。我建议删除脚本处理器节点，因为它将引入大量音频延迟，示例中至少有 2048 个样本 + 脚本执行时间。您可以将 onaudioprocess 内的代码移至请求动画帧循环中，这将不会导致音频延迟。唯一的缺点是您不会处理每个样本，因此您可能会错过某个剪辑，但您应该能够获得 60 fps 的速度。如果检测剪辑对您的应用程序很重要，您可以在音频数据中查找它们(解码音频数据的所有值 > 1 或 < -1)基本上，分析器节点为您提供的只是完整音频数据的一小部分，并将其从浮点格式转换为字节格式。使用字节时间域数据实际上比 float 需要更长的时间，因为它在内部是 float 并且必须对其进行转换。您可能需要考虑的是 VU 表主要使用峰值或 Rms 值，而不是平均值。