Chrome-createMediaElementSource不起作用 [英] Chrome - createMediaElementSource not working

问题描述

我的网站上有一个简单的音频分析仪:

I have a simple audio analyzer for my website:

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上处于隐身模式，否则这将无法工作，否则会出现此错误:

My issue is that this does not work unless I am in incognito mode on chrome, otherwise I get this error:

未捕获的InvalidStateError:无法在'AudioContext'上执行'createMediaElementSource':HTMLMediaElement先前已连接到另一个MediaElementSourceNode.

Uncaught InvalidStateError: Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode.

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

I've tested this in Edge, Firefox and Opera and there it works fine. I've even reinstalled chrome to see if that would fix the issue to no avail. I just don't understand why it works fine in incognito mode but not otherwise.

所以我的问题是，有可能代替使用<audio>元素，而是将分析仪连接到var audio = new Audio吗?如果是这样，我该怎么办?

So my question is, is it possible instead of using the <audio> element, connect the analyzer to a var audio = new Audio instead? If so, how would I do this?

推荐答案

对我来说，这可行:

而不是使用<audio>元素，而是使用HTMLMediaElement和javascript.然后，要将分析仪连接到var audio = new Audio()只需要做的就是简单地在source = context.createMediaElementSource(audio);变量中引用audio变量.

Instead of using the <audio> element, use HTMLMediaElement using javascript. And then the only thing you need to do in order to connect the analyzer to your var audio = new Audio() is simply reference your audio variable in the source = context.createMediaElementSource(audio); variable.

这也解决了我的错误.

This also fixed my errors.

这篇关于Chrome-createMediaElementSource不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！