Java Script DOMException Web Audio API audioContext.createMediaElementSource 再次调用该函数

Question

大家好，我需要你们的帮助 我有下一个功能，这是第一次按下按钮，但我再次按下按钮音频不起作用。 控制台日志是这样的：未捕获的 DOMException：无法在“BaseAudioContext”上执行“createMediaElementSource”：HTMLMediaElement 之前已连接到不同的 MediaElementSourceNode。 在 cargar_audio1

¿如何解决这个问题并在每次按下按钮时加载视频？

我使用的代码是这样的：

 document.getElementById('audio1').addEventListener('click', function() {
 var mediaElement1 = document.getElementById("ad1"); 
 mediaElement1.src = "audio1.mp3";
 load_audio1();
 });


 var analyser, source;
 function load_audio1() {
 var audio1 = document.getElementById('ad1');
 var audioContext = new AudioContext();
 analyser = audioContext.createAnalyser();
 analyser.minDecibels = -60;
 analyser.maxDecibels = -10;  
 analyser.fftSize = 32;
 source = audioContext.createMediaElementSource(audio1);
 source.connect(analyser);
 analyser.connect(audioContext.destination); 
 audio1.play();
 view_dat_audio();
 }

Answer 1

假设“每次按下按钮时加载视频”意味着您希望在每次触发 audio1 上的点击事件时播放音频文件 audio1.mp3，您可以执行以下操作：

为了播放文件你需要做两件事：

1. 初始化音频图（创建分析器节点并将其连接到音频源等）
2. 在图上调用 play()

现在您在load_audio1() 中一步完成此操作，解决方案是将初始化和对play() 的调用分开，并在必要时只在开始时进行一次初始化。

大概是这样的：

document.getElementById('audio1').addEventListener('click', clickHandler);

function clickHandler() {
    if (!audioGraphIsInitialized()) {
        initAudioGraph();
    }

    audio1.play();
}