Javascript 函数强制从 URL 下载 MP3 文件，一旦下载，MP3 文件只能在 VLC 播放器上播放？为什么？

Question

我有一个 Javascript 函数，一旦提供文件的 URL 和名称，它基本上会强制下载文件。这个函数工作得非常好，我从一个 HTML 标记/超链接中调用它。但是一旦从我的函数中下载了 MP3 文件，它就不会在我的计算机上播放。我为用户设计了此功能，以便在单击该文件的相关链接时能够下载不同的 MP3 和 WAV 文件。我只能在媒体播放器 VLC 上播放下载的 MP3 文件，它不会在我的笔记本电脑上播放。我在下载过程中使用我的功能对 MP3 文件做了什么，或者为什么下载后无法播放？

我研究了 MP3 文件的变体和编码，但我不确定真正要寻找什么或我做错了什么。当我从其他站点下载 MP3 文件时，它们运行良好并且可以立即播放。

功能：

<script>// <![CDATA[
function downloadFile(data, fileName, type="text/plain") {
  // Create an invisible A element
  const a = document.createElement("a");
  a.style.display = "none";
  document.body.appendChild(a);

  // Set the HREF to a Blob representation of the data to be downloaded
  a.href = window.URL.createObjectURL(
    new Blob([data], { type })
  );

  // Use download attribute to set set desired file name
  a.setAttribute("download", fileName);

  // Trigger the download by simulating click
  a.click();

  // Cleanup
  window.URL.revokeObjectURL(a.href);
  document.body.removeChild(a);
}
// ]]></script>

函数调用：

<a href="javascript:downloadFile('https://cdn.shopify.com/s/files/1/0037/4951/1217/files/ascence-places-like-that-ncs-release.mp3?360','test.MP3')">My Download</a>

Answer 1

如果您查看下载的文件，您会发现它包含文本 https://cdn.shopify.com/s/files/1/0037/4951/1217/files/ascence-places-like-that-ncs-release.mp3?360，因为这是您为 data 传递并在创建 blob 时使用的值。创建 blob 的代码不会下载内容（并且 SOP 会阻止您的代码下载内容，除非当然其他站点使用 CORS 覆盖它）。

我认为您不能强制链接打开“保存”对话框。通常这是由服务器对链接的响应触发的（通过Content-Disposition 标头），这当然在您的场景中无法控制。使用download 属性不会这样做，它不会影响跨域（除非链接是data: 或blob: URL，请参阅MDN's description）。

您可以向他们显示链接，以便他们可以右键单击并选择“将目标另存为...”，但我知道这会让您失望。