强制 MP3 文件充当"Save as..."而不是在浏览器中播放

Question

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

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

(最后一个属性：类型只是来自我为问题找到的答案，但没有进行任何更改(

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

我想到的第二种方法是定义 a 的音频标签 istead，在没有控件的情况下定义它，并使用 JS 获取它的下载属性(因为我看到了一种如何拆分功能和构建自定义播放器的方法(。但是我还没有找到一种方法来做到这一点.play()或.pause().

有没有最新的方法可以强制下载音频文件？

Answer 1

下面是一个简单的代码片段，用于演示如何使用 blob 更改另一个 blob 的类型。

例如，我使用了一些 HTML，然后将 blob 制作成 html/文本，然后是二进制八进制流以供下载。

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');