无法在“AudioContext”上执行“createMediaElementSource”

Question

当我在曲目 1 之后选择曲目 2 或在曲目 2 之后选择曲目 1 时，我得到

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

。

这就是我的代码，我不知道如何摆脱它。我希望能够选择元素而不会出现此错误。

const audioDB = [{
        'index': 0,
        'src': 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/128337/ongoing-thing-crop.ogg'
    },
    {
        'index': 1,
        'src': 'https://s.cdpn.io/1202/Star_Wars_original_opening_crawl_1977.mp3'
    }
];

const container = document.querySelector('#container');
const audio = document.querySelector('audio');

container.addEventListener('change', (event) => {
    event.preventDefault();
    const dropVal = document.querySelector('#valueSelection').value;
    const adjVal = dropVal - 1;
    const url = audioDB[adjVal].src;
    const urlIndex = audioDB[adjVal].index

    audio.src = url;    
    audio.play();
     
    let audioContext;

    if (!audioContext) {
        audioContext = new(window.AudioContext || window.webkitAudioContext)();
    };

    const analyser = audioContext.createAnalyser();
    const audioSrc = audioContext.createMediaElementSource(audio);
    audioSrc.connect(analyser);
    analyser.connect(audioContext.destination);  


})

<audio id="audio" crossorigin="anonymous"></audio>
 <div id="container">
   <label for="valueSelection">Choose a value <select id="valueSelection">
       <option value="0">Please select a Value</option>
       <option value="1">track1</option>
       <option value="2">track2</option>
     </select>
   </label>
 </div>

Answer 1

我认为你只需要用一个

AudioContext

和一个

AnalyserNode

创建一个

MediaElementAudioSourceNode

即可达到所需的结果。

// Define the AudioContext variable outside of the event listener.
let audioContext;

container.addEventListener('change', (event) => {
    event.preventDefault();

    const dropVal = document.querySelector('#valueSelection').value;
    const adjVal = dropVal - 1;
    const url = audioDB[adjVal].src;

    audio.src = url;    
    audio.play();

    if (!audioContext) {
        audioContext = new AudioContext();

        // Only create the AnalyserNode and MediaElementAudioSourceNode once.
        const analyser = audioContext.createAnalyser();
        const audioSrc = audioContext.createMediaElementSource(audio);
    
        audioSrc
            .connect(analyser)
            .connect(audioContext.destination);  
    }
});