使用canvas+web audio时出现HTMLMediaElement已经连接到不同的MediaElementSourceNode

Question

使用canvas+web audio制作动态音频时出现Failed to execute 'createMediaElementSource' on 'AudioContext': HTMLMediaElement already connected previously to a different MediaElementSourceNode报错。该如何解决呢，代码如下：

    <div class="player_page">
        <canvas id="canvas">
        </canvas>
    </div>
```html

let ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let audioArray = [
    '../music/1.mp3',
    '../music/2.mp3',
    '../music/3.mp3',
    '../music/4.mp3',
    '../music/4.mp3',
    '../music/4.mp3',
    '../music/4.mp3',
    '../music/4.mp3'
];
let audioNum = 0;
let oAudio = document.getElementById('music_mp3');
oAudio.crossOrigin = 'anonymous';
oAudio.src = audioArray[audioNum];

// 获取canvas元素宽高
let WIDTH = canvas.width;
let HEIGHT = canvas.height;
let Play=document.getElementById('play');
Play.onclick=function(){
    let oCtx = new AudioContext();
    let audioSrc = oCtx.createMediaElementSource(oAudio);
    let analyser=oCtx.createAnalyser();
    audioSrc.connect(analyser);
    analyser.connect(oCtx.destination);
    analyser.fftSize=512;
    let bufferLength=analyser.frequencyBinCount;
    let dataArray=new Uint8Array(bufferLength);
    let barWidth=(WIDTH/bufferLength)-1;
    let barHeight;
    function draw(){
        analyser.getByteFrequencyData(dataArray);
        let x=0;
        ctx.clearRect(0,0,WIDTH,HEIGHT);
        for(let i=0;i<bufferLength;i++){
            barHeight=dataArray[i];
            ctx.fillStyle='rgb(228,255,255)';
            ctx.fillRect(x,HEIGHT,barWidth,-barHeight);
            x+=barWidth+1;
        }
        window.requestAnimationFrame(draw);
    };
    draw();
}

Answer 1

这个错误通常是因为在使用 HTMLMediaElement 创建音频源时，该元素已经被连接到了其他 MediaElementSourceNode 。

解决方案是在连接 MediaElementSourceNode 前，将 HTMLMediaElement 与任何现有连接断开，或者在使用完 HTMLMediaElement 后，使用MediaElementSourceNode.disconnect()方法断开连接。

例如：

这应该解决您的问题。如果仍然存在问题，请考虑检查您的代码，以确保没有在同一时间连接多个 MediaElementSourceNode 到 HTMLMediaElement。