如何为页面中隐藏的HTML5 audio标签添加音频下载按钮

数据老陈

2026-10-6

解决方案

完全可以实现该功能，不需要依赖audio标签的原生控件，只要能获取到音频的资源地址即可实现下载，以下是两种常用实现方案：

方案1：静态地址直接实现（无需JS）

如果音频地址是固定的，直接用带download属性的a标签即可，代码示例如下：

<!-- 原有隐藏的audio标签 -->
<audio hidden>
  <source src="你的音频资源地址.mp3" type="audio/mpeg">
</audio>

<!-- 下载按钮 -->
<a href="你的音频资源地址.mp3" download="自定义保存文件名.mp3">
  <button>下载音频</button>
</a>

如果是React/Vue等框架环境，对应调整属性绑定语法即可，核心逻辑一致。

方案2：动态读取audio标签地址实现下载

如果不想重复填写音频地址，可以通过JS读取隐藏audio标签内的资源地址，动态触发下载：

<!-- 给原有audio标签加id方便选择 -->
<audio id="hiddenAudio" hidden>
  <source src="你的音频资源地址.mp3" type="audio/mpeg">
</audio>

<!-- 下载按钮 -->
<button id="downloadAudioBtn">下载音频</button>

配套JS代码：

document.querySelector('#downloadAudioBtn').addEventListener('click', () => {
  // 读取隐藏audio的资源地址
  const audioSrc = document.querySelector('#hiddenAudio source').src;
  // 动态创建a标签触发下载
  const tempLink = document.createElement('a');
  tempLink.href = audioSrc;
  tempLink.download = '自定义保存文件名.mp3';
  document.body.appendChild(tempLink);
  tempLink.click();
  document.body.removeChild(tempLink);
});