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

Question

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

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

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

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

我想到的第二种方法是定义一个音频标签而不是a，在没有控件的情况下定义它，并使用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');