如何实现点击按钮直接下载Firebase存储的MP3文件而非打开播放

方法1：优化<a>标签实现直接下载 #

原有代码点击后直接播放是因为浏览器对支持原生播放的媒体资源，默认会走预览逻辑而非下载，只需给<a>标签加上download属性即可强制触发下载，还可自定义下载后的文件名：

<a href='https://firebasestorage.googleapis.com/v0/b/soundcloud-9491a.appspot.com/o/Microsoft%20Windows%20XP%20Startup%20Sound.mp3?alt=media&token=31351745-698d-469a-a6b5-86c3076f35f3' download="WindowsXP启动音效.mp3">Download</a>

如果添加download属性后仍直接播放，说明跨域限制导致属性失效，可以用Blob中转的方式兼容：

async function downloadMP3() {
  const audioUrl = 'https://firebasestorage.googleapis.com/v0/b/soundcloud-9491a.appspot.com/o/Microsoft%20Windows%20XP%20Startup%20Sound.mp3?alt=media&token=31351745-698d-469a-a6b5-86c3076f35f3';
  const res = await fetch(audioUrl);
  const audioBlob = await res.blob();
  const tempUrl = window.URL.createObjectURL(audioBlob);
  const a = document.createElement('a');
  a.href = tempUrl;
  a.download = 'WindowsXP启动音效.mp3';
  a.click();
  window.URL.revokeObjectURL(tempUrl);
}

绑定到按钮即可调用：

<button onclick="downloadMP3()">Download</button>

方法2：关于audio元素触发下载的疑问解答 #

• 原生<audio>元素的控制栏属于浏览器内置的Shadow DOM节点，没有对外暴露可访问的下载按钮DOM对象，无法通过JS直接触发该按钮的点击事件，该方案不可行。
• 如果页面已经引入了<audio>元素，可以直接复用它的src属性走上述Blob中转逻辑完成下载，不需要额外重复请求资源。

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