Member Avatar for DFC

Hi,
I'm offering a free mp3 on my website for people to download. However, when you click on it, it automatically opens and plays. Is there any way of having a link that, when clicked, automatically downloads the mp3 file to the user's desktop (without people having to right-click or control-click on Mac/Safari or command-click on older macs)? For example, when using my newer Mac, I have to use Safari because it doesn't want to download the file in Firefox. It would be good if people could download the file with a simple click, rather than having to give instructions for different computers/browsers.
Many thanks for any help!

(p.s.: just noticed that this was probably the wrong forum to post this - if one of the moderators could move it to wherever it fits in best, that would be great - apologies!)

  • 3 Contributors
  • 5 Replies
  • 112 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by DFC

Dani AI

Generated

Short answer: make the server tell the browser "this is a download" (Content-Disposition: attachment) or use the HTML5 download attribute on the link. These approaches give reliable single-click downloads across modern browsers; zipping the file (as did) remains a simple fallback for very old clients.

A few practical options.

  • HTML5 (easy):
    Use a normal anchor with download for same-origin URLs:

    <a href="/media/song.mp3" download>Download MP3</a>

    Note that some browsers may ignore download for cross-origin targets. See the spec and compatibility notes on MDN: download attribute.

  • Server-side (most robust):
    Serve the file with a Content-Disposition header to force an attachment. Example PHP:

    <?php
header('Content-Type: audio/mpeg');
header('Content-Disposition: attachment; filename="song.mp3"');
readfile('/path/to/song.mp3');
exit;
?>

    Or set the header in Apache via .htaccess (requires mod_headers):

    <FilesMatch "\.mp3$">
  Header set Content-Disposition "attachment"
</FilesMatch>

Documentation for the header: Content-Disposition on MDN. For large files consider X-Sendfile/X-Accel-Redirect to let the webserver stream the file efficiently.

Compatibility and caveats: user/browser settings and helper plugins can sometimes open media despite headers, and some cross-origin links may ignore download. As and pointed out, user defaults matter; server-side headers are the safest way to offer a true one-click download while still providing a stream/preview link for people who want to listen first.

Recommended Answers

All 5 Replies

Member Avatar for Kraai

If the URL to the mp3 file ends with /songname.mp3 for example, it will download to most desktops by clicking on the link. There should be a pop up box when clicking the link, asking the user "to save" or "to open" the file. If they choose "open" it will open with their media player provided their media player can read the http protocol. If they choose "download" it wil download to their desktop.

It may be that your own settings are set to "open" media url's automatically.

Member Avatar for DFC

Well yes, they are (on Firefox anyway). My concern is that many of the site's users have similar problems (this includes many older users). Is there any way of having "just" a download link or button that works across all platforms/browsers?
Thanks for your reply :)

Member Avatar for Kraai

There are many different ways in how you can set up your mp3 file for users to enjoy. For example: You can create a playlist file that users can download to their desktops and then clicking on it on their desktops, it will open the file on your server. In other words, they actually downloaded the play link in stead of the file. Buttons you can create as images linking to your file as well. The point is, that if the user's own personal media settings are set to "open" a file in stead of downloading it, their default mediaplayer will open the file and start playing it.

I presume out of your writing that you would like to create something that all browsers can access without a problem. For this I suggest you install a player button on your webpage, where a user can just click on the play button to enjoy your mp3.

A free mp3 player that I personally use, and its working very good, that you can use for this purpose, you will find here: http://www.podcast-player.com/en/free-mp3-player.cfm

Member Avatar for MidiMagic

This is a setting on the browser.

When you first download a file on most browsers after installing the browser, a dialog box opens to ask what you want to do with the file. There is a checkbox saying "open all files of this type in this way" in the dialog box. If you check the checkbox, you will never see that dialog box again for that kind of file.

Member Avatar for DFC

Thanks for all the great suggestions :) .
In the end, I took the easy way out and uploaded the mp3 as a zip file - that way, it always gets downloaded. I didn't necessarily want users to listen to it on the website, anyway.
Thanks again!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.