强制 MP3 文件充当“另存为...”而不是在浏览器中播放答案

【问题标题】：Force MP3 file to act as "Save as..." instead of playing in the browser强制 MP3 文件充当“另存为...”而不是在浏览器中播放
【发布时间】：2019-10-16 09:58:17
【问题描述】：

对于包含 mp3 文件列表的页面，我需要为每个具有两个按钮的列表元素构建一个模块：播放和下载按钮。单击播放按钮，将出现一个 mp3 播放器，该播放器在浏览器中将音频作为固定页脚播放。我还需要为用户提供一种简单的方式来下载文件。问题是，即使音频标签包含下载（真正下载）文件的方法，它也会在单击更多（3 个点）按钮后执行。这不是我想要的。我需要为下载按钮提供直接下载功能。我从最简单的方法开始：

//jsx
<a
    target="_blank"
    href={file.source}
    download={file.name}
    className="download-button"
    type="application/octet-stream"
/>

（最后一个属性：type 只是来自我为问题找到的答案，但没有做任何改变）

我已尝试了所有建议，但文件仍会打开一个新窗口并开始播放音频。下载属性似乎不再起作用。

我正在考虑定义音频标签而不是 a 的第二种方法，在没有控件的情况下定义它，并使用 JS，获取它的下载属性（因为我看到了一种如何拆分功能并构建自定义播放器）。但我还没有找到像.play() 或.pause() 那样做的方法。

是否有任何最新的方法可以强制下载音频文件？

【问题讨论】：

您可以使用 Blob，并在那里更改文件类型..
您能否提供一个示例作为答案？

标签： javascript html audio

【解决方案1】：

这是一个简单的 sn-p 演示使用 blob 更改另一个 blob 的类型。

对于这个例子，我使用了一些 HTML，然后将 blob 转换为 html / text，然后二进制 octect-stream 进行下载。

const encoder = new TextEncoder();
const data = encoder.encode('This is <b>bold</b>');

function createLink(name, type) {
  const a = document.createElement("a");
  a.innerText = name;
  document.body.appendChild(a);
  document.body.appendChild(document.createElement('br'));
  const blob = new Blob([data], {type})
  const url = URL.createObjectURL(blob);
  a.setAttribute('href', url); 
}

createLink('HTML download', 'text/html');
createLink('TEXT download', 'text/plain');
createLink('Binary download', 'application/octet-stream');

【讨论】：