Question

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

但是，当我尝试使用web audio 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处理;见this question。他们的错误是here。 修改：他们现在支持Chrome 50

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

createMediaElementSource播放但getByteFrequencyData返回全0

1 个答案: