如何禁止HTML5 audio元素加载时自动下载MP3/OGG文件？

首先，先帮你指出代码里的一个小问题：你的<source>标签里写了type="audio/ogg"，但实际引用的是MP3文件，应该改成type="audio/mpeg"，这可能会影响浏览器对资源的识别逻辑，甚至导致一些异常行为。

回到你核心的问题：明明设置了preload="none"，音频还是自动下载。这是因为不同浏览器对preload属性的实现存在差异，部分场景下浏览器会优先预判用户可能的播放需求，提前预加载资源。要彻底阻止这种自动下载行为，最可靠的方式是动态加载音频资源，直到用户主动触发播放操作后再请求文件。

下面是几种可行的解决方案：

方案1：动态添加音频源（最可靠，兼容全场景） #

一开始不在<audio>里设置src或<source>，等到用户点击播放控件时再动态添加资源并加载：

<audio controls id="customAudio">
  <!-- 初始状态下不包含source元素 -->
</audio>

<script>
const audioElement = document.getElementById('customAudio');
let isSourceAdded = false;

// 监听播放按钮点击事件
audioElement.addEventListener('play', () => {
  if (!isSourceAdded) {
    // 创建source元素
    const source = document.createElement('source');
    source.src = 'http://a.tumblr.com/tumblr_lrdjzp8jEq1r2hak2o1.mp3';
    source.type = 'audio/mpeg';
    
    // 添加到audio元素中并加载
    audioElement.appendChild(source);
    audioElement.load();
    isSourceAdded = true;
  }
});
</script>

这样只有当用户主动点击播放时，浏览器才会发起音频文件的请求，完全避免了页面加载时的自动下载，从根源上解决加载慢的问题。

方案2：使用loading="lazy"属性（现代浏览器适用） #

部分现代浏览器支持给<audio>添加loading="lazy"属性，提示浏览器延迟加载资源，直到元素进入视口或用户准备交互：

<audio controls autoplay="false" preload="none" loading="lazy">
  <source src="http://a.tumblr.com/tumblr_lrdjzp8jEq1r2hak2o1.mp3" type="audio/mpeg">
</audio>

注意：这个属性的兼容性还在逐步完善，如果你需要兼容旧版本浏览器，还是优先推荐方案1。

额外注意事项 #

• 确保preload属性值是小写的"none"，虽然浏览器通常不区分大小写，但标准写法是小写，避免不必要的兼容问题。
• 检查页面中是否有其他脚本或第三方插件，在页面加载时主动触发了音频的load()或play()方法，这也会导致资源被提前下载。

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