如何强制音频文件直接下载而非在移动端浏览器中自动播放？

首先明确问题核心原因，以及对应解决方法如下：

• 现有代码小问题：download="true"写法不规范，download属性的取值是你期望的下载文件名，不需要的话直接写空属性download即可，不过这不是移动端失效的核心原因。
• 核心失效原因：
  1. download属性仅对同源资源生效，若你的音频资源存放在跨域的CDN、第三方存储服务中，浏览器会直接忽略该属性，默认打开资源播放。
  2. 绝大多数移动端浏览器（包括Safari、安卓自带浏览器、各类内置webview）对download属性支持度极低，识别到音频MIME类型时会优先触发内联播放逻辑，不会执行下载。

方案1：后端配置响应头（全端兼容最优解） #

这是兼容性最好的方案，不需要修改前端代码，只要给音频资源的响应头增加以下两个配置即可：

Content-Disposition: attachment; filename="your_music_name.mp3"
Content-Type: application/octet-stream

配置后浏览器会直接触发下载，不会进入播放逻辑。WordPress环境可以在主题functions.php中添加钩子处理音频资源的响应头，也可以直接在Nginx/Apache的配置文件中针对音频后缀路径批量添加头规则。

方案2：前端Blob迂回下载（适用无法修改后端配置的场景） #

如果没法调整后端配置，可以通过JS将音频转为Blob对象后再触发下载，参考实现代码：

// 给所有带download属性的音频链接绑定点击事件
document.querySelectorAll('a[href$=".mp3"], a[download]').forEach(link => {
  link.addEventListener('click', async function(e) {
    e.preventDefault();
    const audioUrl = this.href;
    try {
      // 请求资源转Blob
      const res = await fetch(audioUrl);
      const audioBlob = await res.blob();
      const tempUrl = URL.createObjectURL(audioBlob);
      // 创建临时a标签触发下载
      const tempA = document.createElement('a');
      tempA.style.display = 'none';
      tempA.href = tempUrl;
      tempA.download = '自定义音乐文件名.mp3';
      document.body.appendChild(tempA);
      tempA.click();
      // 清理临时资源
      URL.revokeObjectURL(tempUrl);
      document.body.removeChild(tempA);
    } catch (err) {
      // 下载失败时提示用户长按保存
      alert('下载触发失败，请长按播放页选择保存到本地');
    }
  })
})

注意该方案需要音频资源接口支持CORS跨域请求，否则fetch会报错。

方案3：长按保存提示（兜底兼容方案） #

针对所有不支持上述两种方案的极端浏览器环境，可以在用户点击下载时弹出提示，告知用户长按音频播放页面后选择保存到本地，覆盖所有场景。

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