0

I am making an audio player, and I would like to include a button that downloads the current track. I have tried the common solutions people suggest, but these only open the .mp3 in a new tab and play it. This is what I am using:

document.getElementById("dlButton").addEventListener("click", function(){
window.location = "tracks/CFKZ.mp3";});

I saw another solution here on stack overflow:

<form method="get" action="file.doc">
<button type="submit">Download!</button>
</form>

I don't understand this. It doesn't make sense to me why a download button would need to send information to the file that is to be downloaded.

Community
  • 1
  • 1
nth-chile
  • 616
  • 1
  • 7
  • 20

4 Answers4

2

The best practice for download links is the following:

<a href="path/to/file" class="button" download>Some text</a>

This is fairly well supported cross-browser. You can style the link with a class to make it look like a button, perhaps with something like the following:

.button {
  text-decoration: none !important;
  border: 1px solid black;
}

Edit: If you want to use this and have it work in Safari or IE, look into using something like Modernizr.

Lucas Watson
  • 763
  • 1
  • 8
  • 26
1

Try the following code and see whether it is what you want

<a href="test.zip" download='test'><input type="button" value="Download Now"></a>
Lillies Siew
  • 11
  • 1
0

How bout using an anchor tag, just use bootstrap to make it look like a button.

 <a href="tracks/CFKZ.mp3" download="tracks/CFKZ.mp3">Download!</a>
XDProgrammer
  • 853
  • 2
  • 14
  • 31
0

HTML5 solution with a simple anchor tag using the 'download' attribute (doesn't require any javascript):

<a href="/music/somefile.mp3" download="somefile.mp3">Download mp3</a>

the download attribute can also be used to rename the file:

<a href ="/music/3ri3nlfkndfoiweuio.mp3" download="TheManWhoSoldTheWorld.mp3" >Download a Bowie Hit</a>

will download as 'TheManWhoSoldTheWorld.mp3'

edit for cross browser support (relies on Modernizr - which you should use if worried about cross-browser support https://modernizr.com/):

maybe this fiddle will help: https://jsfiddle.net/abigwonderful/3jfqz5j0/2/ or just open this window in multiple browsers and click 'Run code snippet' below:

var a = document.createElement('a');
if (typeof a.download == "undefined") {
    //append some text to inform the user 
    //they should right-click the link to download
    //example:
    var downloadDiv = document.getElementById('download');
    downloadDiv.innerHTML = "Right-click the link and select 'Save as...' to download the mp3";

} 
<a href="/music/somefile.mp3" download="somefile.mp3">Download mp3</a>
<div id="download"></div>
abigwonderful
  • 1,797
  • 1
  • 12
  • 10
  • Yes, but this is not supported cross-browser – nth-chile Jul 22 '16 at 02:40
  • @Clyde are you using Modernizer? – abigwonderful Jul 22 '16 at 02:44
  • @Clyde Midernizr would allow you to see if the user's browser supports the download attribute. See here: http://stackoverflow.com/questions/12112844/how-to-detect-support-for-the-html5-download-attribute – Lucas Watson Jul 22 '16 at 02:56
  • @LucasWatson but what to do for the browsers that don't support it? – nth-chile Jul 22 '16 at 02:57
  • @Clyde if you look at the code example above, there is a conditional that runs if the browser doesn't support it. This conditional adds some text that instructs the user how to click/save the linked file. – abigwonderful Jul 22 '16 at 03:00
  • @Clyde the alternative solution is altering server side setup. Is that an option for you? – abigwonderful Jul 22 '16 at 03:03
  • @Clyde For Safari and IE, there is no straightforward solution. You'll have to look into using JS along with iframes to get that working. – Lucas Watson Jul 22 '16 at 03:08
  • @Clyde click on the jsfiddle link in my answer. open that link in multiple browsers. Does that help? – abigwonderful Jul 22 '16 at 03:16
  • these suggestions point me in the right direction. I am willing to learn about iframes and server-side setup, provided that the latter can be done even if i am using a shared host. Otherwise I will use the Modernizr solution. What kind of server-side setup? Thank you both – nth-chile Jul 22 '16 at 03:23
  • @Clyde what kind of server are you running on? – abigwonderful Jul 22 '16 at 03:25
  • @abigwonderful the jsfiddle helps! I will be able to work with this. I am using a shared server, Linux I believe. – nth-chile Jul 22 '16 at 03:28
  • @Clyde great! Sounds like maybe an apache server. Do you have access to an .htaccess file? – abigwonderful Jul 22 '16 at 03:32
  • @abigwonderful i'm sorry I can't give reputation yet ... I have cPanel if that is what you were asking? In the root I don't see an .htaccess file (hidden files are shown) – nth-chile Jul 22 '16 at 03:38
  • @Clyde Have a look at this link - it's targeted at Drupal users, but is a pretty easy to follow set of instructions. You'll want to specify to make sure it targets .mp3 files. Let me know if this works and I'll update my answer as well. https://www.drupal.org/node/417866 – abigwonderful Jul 22 '16 at 03:43
  • @abigwonderful It turns out I have an nginx server. Is the process a whole lot different with nginx? Meantime I will get to work on your other solution using Modernizr. – nth-chile Jul 26 '16 at 22:47