Question

我已经为这个问题谷歌了，但是找不到任何东西。我处于需要删除source = createMediaElementSource的情况，以便我可以再次创建它。我正在使用音频分析器，每次使用ajax加载指定的音轨时都需要加载。一旦你转到另一页，然后再回来，分析仪就会消失。因此我需要以某种方式重新初始化它。

我的代码：

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

function analyzerSetElements() {
    var analyserElement = document.getElementById('analyzer');
}

function analyzerInitialize() {
    if (context == undefined) {
    context = new AudioContext();
    }
    analyser = context.createAnalyser();
    canvas = analyserElement;
    ctx = canvas.getContext('2d');
    source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination);
    frameLooper();
}

function analyzerStop(){
    context = undefined;
    analyser = undefined;
    source = undefined;
}

function frameLooper() {
    canvas.width = canwidth;
    canvas.height = canheight;
    ctx.imageSmoothingEnabled = false;
    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);
    }
    window.requestAnimationFrame(frameLooper);
    console.log('Looped')
}

因此，当我在运行analyzerInitialize()后运行analyzerStop()时，我仍然会收到此错误：

audio.js：179未捕获的DOMException：无法执行＆＃39; createMediaElementSource＆＃39; on＆＃39; AudioContext＆＃39;：HTMLMediaElement已经先前连接到不同的MediaElementSourceNode

如何让它如此运行analyzerInitialize()永远不会失败？

Answer 1

我遇到了同样的问题。不幸的是，我还没有找到如何从音频元素中创建MediaElementSourceNode。不过，使用WeakMap来记住MediaElementSourceNode可以解决此问题：

var MEDIA_ELEMENT_NODES = new WeakMap();

function analyzerInitialize() {
  if (context == undefined) {
    context = new AudioContext();
  }
  analyser = context.createAnalyser();
  canvas = analyserElement;
  ctx = canvas.getContext('2d');
  if (MEDIA_ELEMENT_NODES.has(audio)) {
    source = MEDIA_ELEMENT_NODES.get(audio);
  } else {
    source = context.createMediaElementSource(audio);
    MEDIA_ELEMENT_NODES.set(audio, source);
  }
  source.connect(analyser);
  analyser.connect(context.destination);
  frameLooper();
}

使用WeakMap我避免了内存问题。

Answer 2

您可以将context和source设置为全局定义的变量，而不是重新定义变量

context = context || new AudioContext();
source = source || context.createMediaElementSource(audio);

删除createMediaElementSource

2 个答案: