createMediaElementSource 播放但 getByteFrequencyData 返回全 0

Question

我正在尝试可视化从网页上的元素发出的音频。该元素的来源是通过 sip.js 连接到 Asterisk 调用的 WebRTC 流。音频按预期工作。

但是，当我尝试使用 Web 音频 api 获取频率数据时，它会返回一个全 0 的数组，即使音频正在工作。这似乎是 createMediaElementSource 的问题。如果我调用 getUserMedia 并使用 createMediaStreamSource 将麦克风连接到输入，我确实会得到返回的频率数据。

Chrome 40.0 和 Firefox 31.4 均尝试过此操作。在我的搜索中，我发现 Android Chrome 存在类似错误，但我的桌面 Chrome 和 Firefox 版本似乎应该可以正常运行。到目前为止，我有一种感觉，该错误可能是由于音频播放器从 sip.js 中的另一个 AudioContext 获取音频，或者与 CORS 有关。我尝试过的所有演示都可以正常工作，但仅使用 createMediaStreamSource 来获取麦克风音频，或使用 createMediaElementSource 来播放文件（而不是流式传输到元素）。

我的代码：

var context = new (window.AudioContext || window.webkitAudioContext)();

    var analyser = context.createAnalyser();
    analyser.fftSize = 64;
    analyser.minDecibels = -90;
    analyser.maxDecibels = -10;
    analyser.smoothingTimeConstant = 0.85;

    var frequencyData = new Uint8Array(analyser.frequencyBinCount);
    var visualisation = $("#visualisation");
    var barSpacingPercent = 100 / analyser.frequencyBinCount;
    for (var i = 0; i < analyser.frequencyBinCount; i++) {
            $("<div/>").css("left", i * barSpacingPercent + "%").appendTo(visualisation);
    }
    var bars = $("#visualisation > div");
    function update() {
            window.requestAnimationFrame(update);
            analyser.getByteFrequencyData(frequencyData);
            bars.each(function (index, bar) {
                    bar.style.height = frequencyData[index] + 'px';
                    console.debug(frequencyData[index]);
            });
    };

$("audio").bind('canplay', function() {
    source = context.createMediaElementSource(this);
    source.connect(analyser);
    update();
});

任何帮助是极大的赞赏。

Answer 1

Chrome不支持RTCPeerConnection输出流（远程流）的WebAudio处理；看到这个问题。他们的bug就在这里。 编辑：他们现在在 Chrome 50 中支持此功能

请参阅即将作为此错误一部分登陆的 Firefox 的测试代码： Bug 1081819。该 bug 会将 webaudio 输入添加到 Firefox 中的 RTCPeerConnections 中；我们对输出媒体流进行 WebAudio 处理已经有一段时间了。那里的测试代码测试了双方；请注意，它在很大程度上取决于测试框架，因此只需将其用作挂钩 webaudio 的指南即可。