切换音频轨道时触发createMediaElementSource DOMException问题求助

错误原因 #

这个报错的核心问题是：同一个<audio>元素只能关联一个MediaElementSourceNode。你每次切换音频时都重新创建了MediaElementSourceNode，但旧的节点并未断开与音频元素的关联，导致浏览器抛出DOM异常。同时每次新建AudioContext和Analyser实例，也会造成不必要的资源浪费。

修复后的完整代码 #

JavaScript 代码 #

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');

// 全局复用音频上下文、分析器和媒体源节点
let audioContext;
let analyser;
let audioSrc;

container.addEventListener('change', (event) => {
    event.preventDefault();
    const dropVal = document.querySelector('#valueSelection').value;
    if (dropVal === "0") return; // 跳过默认选择项

    const adjVal = dropVal - 1;
    const url = audioDB[adjVal].src;

    // 重置当前音频状态
    audio.pause();
    audio.currentTime = 0;
    audio.src = url;    
    audio.play();

    // 仅初始化一次音频上下文和分析器
    if (!audioContext) {
        audioContext = new(window.AudioContext || window.webkitAudioContext)();
        analyser = audioContext.createAnalyser();
        analyser.connect(audioContext.destination);
    }

    // 断开旧的媒体源连接，避免冲突
    if (audioSrc) {
        audioSrc.disconnect();
    }

    // 创建新的媒体源节点并关联分析器
    audioSrc = audioContext.createMediaElementSource(audio);
    audioSrc.connect(analyser);
})

HTML 代码 #

<audio id="audio" crossorigin="anonymous"></audio>
<div id="container">
  <label for="valueSelection">选择音频 
    <select id="valueSelection">
        <option value="0">请选择音频</option>
        <option value="1">track1</option>
        <option value="2">track2</option>
      </select>
  </label>
</div>

关键修改说明 #

• 复用核心实例：将audioContext、analyser移到事件监听外部，确保只初始化一次，减少资源消耗
• 断开旧连接：每次切换音频前，若存在旧的audioSrc，调用disconnect()彻底断开其所有连接，为新节点腾出关联权限
• 重置音频状态：切换时暂停当前音频并重置播放位置，避免多音频同时播放或状态混乱
• 过滤无效操作：增加对默认选择项的判断，避免执行无意义的逻辑

内容的提问来源于stack exchange，提问作者noviceCoder