Chrome - createMediaElementSource 不起作用

Question

我的网站有一个简单的音频分析器：

var analyser = document.getElementById('analyzer');
var beat = document.getElementById('track_meta')
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x,
bar_width, bar_height;

function playAnalyzer() {
    context = new AudioContext();
    analyser = context.createAnalyser();
    canvas = document.getElementById('analyzer');
    ctx = canvas.getContext('2d');
    source = context.createMediaElementSource(playerE);
    source.connect(analyser);
    analyser.connect(context.destination);
    frameLooper();
}

function frameLooper() {
    canvas.width  = canwidth;
    canvas.height = canheight;
    ctx.imageSmoothingEnabled = false;
    window.requestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(fbc_array);
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
    ctx.fillStyle = "white"; // Color of the bars
    function valBetween(v, min, max) {
    return (Math.min(max, Math.max(min, v)));
    }
    var beatc = fbc_array[2] / 4;
    var beatround = Math.round(beatc);
    //if (beatround < 10) {
    //    ctx.globalAlpha = '0.1125';
    //}
    //else {
    //    ctx.globalAlpha = '0.' + beatround;
    //}
    bars = canbars;
    for (var i = 0; i < bars; i += canmultiplier) {
        bar_x = i * canspace;
        bar_width = 2;
        bar_height = -3 - (fbc_array[i] / 2);
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
    }
}

我的问题是，除非我在 chrome 上处于隐身模式，否则这不起作用，否则我会收到此错误：

未捕获的 InvalidStateError：无法在“AudioContext”上执行“createMediaElementSource”：HTMLMediaElement 之前已连接到不同的 MediaElementSourceNode。

我已经在 Edge、Firefox 和 Opera 中对此进行了测试，并且运行良好。我什至重新安装了 chrome 以查看是否可以解决问题。我只是不明白为什么它在隐身模式下工作正常，但在其他情况下却不行。

所以我的问题是，是否可以不使用<audio> 元素，而是将分析仪连接到var audio = new Audio？如果是这样，我该怎么做？

Answer 1

所以对我来说，这很有效：

不要使用 <audio> 元素，而是使用 javascript 使用 HTMLMediaElement。然后，为了将分析仪连接到您的 var audio = new Audio()，您唯一需要做的就是在 source = context.createMediaElementSource(audio); 变量中引用您的 audio 变量。

这也修正了我的错误。

Answer 2

您是否可能安装了插入 AudioContexts 并创建 MediaElementSources 的 Chrome 扩展程序？尝试一次禁用一个扩展程序。