如何阻止audio元素页面加载时加载空src以避免资源加载失败报错？

这个问题我之前做项目时也遇到过——浏览器看到<audio>里带空src的<source>，再加上preload="auto"的设置，会自动触发资源加载请求，空URL肯定会失败，自然就抛出报错了。给你几个实用的解决方案：

方案1：动态创建元素（最推荐，彻底解决） #

一开始不要在HTML里写空的<source>标签，只保留音频元素的基础结构：

<div style="display: none;" > 
  <audio tabindex="0" id="audio" controls preload="auto" loop="true">
  </audio>
</div>

当你需要播放音乐时，再通过JavaScript动态生成并添加<source>元素：

const audioEl = document.getElementById('audio');

// 先清除旧的source，避免重复加载
while (audioEl.firstChild) {
  audioEl.removeChild(audioEl.firstChild);
}

// 创建新的source节点
const source = document.createElement('source');
source.src = '你的音乐文件路径';
// 建议添加type属性，帮助浏览器识别音频格式，比如MP3对应audio/mpeg
source.type = 'audio/mpeg';

audioEl.appendChild(source);
// 刷新音频资源并播放
audioEl.load();
audioEl.play().catch(err => {
  // 处理播放失败情况，比如浏览器因无用户交互阻止自动播放
  console.error('播放失败:', err);
});

这种方式下，初始状态的<audio>没有任何资源指向，浏览器完全不会发起加载请求，从根源上避免了报错。

方案2：修改preload属性为"none"（最小改动） #

如果你不想大幅调整HTML结构，可以把<audio>的preload属性从auto改成none：

<div style="display: none;" > 
  <audio tabindex="0" id="audio" controls preload="none" loop="true"> 
    <source src=""> 
  </audio>
</div>

preload="none"会告诉浏览器不要预加载媒体资源，只有当用户主动触发播放或者你调用play()方法时，才会尝试加载资源。后续设置好src后，记得调用audio.load()来刷新资源，确保加载最新的音频文件。

额外小提示 #

现代浏览器有严格的自动播放策略，如果没有用户交互（比如点击、触摸操作）直接调用play()，大概率会被浏览器阻止。建议把播放逻辑绑定到用户交互事件中（比如按钮点击），这样既能符合浏览器规则，也能减少不必要的错误。

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