CODEWITHSUNDEEP
javascripthtmlmp3media
derick
derick

Reputation: 1158

with just a plain html and js file, how can i force a link to an mp3 to download instead of just play?

i have a link to a media file such as an mp3, and i want it to get downloaded when the user clicks on it, instead of just having the file get played. the page i have in mind is just a plain static html page.

any ideas?

Upvotes: 4

Views: 4076

Answers (7)

Makaze
Makaze

Reputation: 1086

If you want them to be forced to download it from a link, then add the download attribute to the link element (filename optional):

<a href="file.mp3" download="Song_Name.mp3">Download</a>

If you want users to be forced to download the file when they visit the URL by any means, you are out of luck. That is not possible with just HTML and JS. You have to have access to the server to affect the headers of the file before it gets loaded in the browser, as others have said.

Upvotes: 0

Vivek Kumar
Vivek Kumar

Reputation: 5040

<a href="linkto.mp3" download>Download MP3 File </a>

Upvotes: 1

shahkalpesh
shahkalpesh

Reputation: 33476

While this is not a solution, change the file extension to anything other than MP3. And, ask the user to rename it once downloaded.

Upvotes: -1

mapache
mapache

Reputation: 1361

Client side JavaScript can't achieve that (the nearest functionality is document.execCommand('SaveAs'), wich just saves the entire html page).

Upvotes: 0

Jason Jackson
Jason Jackson

Reputation: 17260

Agree with smazurov, and ultimately you cannot control the presentation of your media although the Content-disposition may get it done for you. Here is the RFC on the header in question.

Upvotes: 0

Pim Jager
Pim Jager

Reputation: 32119

Is far is I know that's not possible. Without the ability to set the appropriate headers the browser will decide what to do with the file, which usually is playback, you will have to ask to users to press, right-click+save as. If you have access to the server it is quite simple to set the headers in php or apache using .htacces

<FilesMatch "\.(?i:mp3)$">
  ForceType audio/mpeg
  Header set Content-Disposition attachment
</FilesMatch>

Or so the browser won't recognize it's an MP3 and won't even try opening it:

<FilesMatch "\.(?i:mp3)$">
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</FilesMatch>

For php header setting see: http://nl.php.net/header

Upvotes: 3

Stepan Mazurov
Stepan Mazurov

Reputation: 1374

In order to make that happen you need to send a header with Content-disposition: attachment; filename=fname.ext header in your favorite language before sending the file.

Without knowing the specifics such as what language and what control you have over your server configuration I cannot give you more detailed instructions. You cannot do it with just html and javascript however.

Upvotes: 5

Related Questions