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

Question

For a page which contains a list of mp3 files, I need to build a module for each listelement which has two button: a play and a download button. Clicking the play button, an mp3 player appears which plays audio in the browser as a fixed footer. I also need to provide a simple way for the user to download the file. The problem is that even if the audio tag contains a way to download (really download) the file, it does after clicking the more (3 dots) button. This is not what I want. I need to provide a direct download functionality for the download button. I started with the simplest approach:

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

(the last attribute: type is just from an answer I found for the problem, but doesn't make any change)

I've tried everything suggested, but the file still opens a new window and start to play the audio. The download attribute seems no longer working.

The second approach I was thinking of to define an audio tag istead of the a, define it without controls, and with JS, get the download attribute of it (as I saw a way how to split the features and build a custom player). But I haven't found a way to do it as .play() or .pause() .

Are there any up-to-date way to force download on an audio file?

Answer 1

Here is a simple snippet to demonstrate using a blob to alter another blob's type.

For this is example I've use some HTML, and then make the blob into a html / text and then binary octect-stream for downloading.

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