How to add a download music link on webpage?

Question

I want to show user a popup like shown below when he clicks on a "Download music" link?

enter image description here

If I use following code then after clicking on a link opens up browser embedded Music player like Apple RealTIme..

<a href="../mp3/horse.mp3" target="_blank">Click to download</a>

How can I prevent browser from running Music (Without disabling/removing this plugin).

I want my browser should download Music and should not play it!

score 1 · Accepted Answer · edited May 23 '17 at 12:24

First, remove the onclick attribute from the anchor. You don't need to involve JavaScript for this.

Second, have your server return a content-disposition: attachment HTTP response header when the mp3 is requested. How you do this depends on your server. For example, in Apache, without involving a server side programming language you can use a Header directive. Or, see an example in Java (although you should set the correct content-type for an mp3).

score 1 · Answer 2 · answered Aug 13 '15 at 00:05

on nginx, you can add this on your nginx.conf

location ~* (.*\.mp3) {
    types { application/octet-stream .mp3; }
    default_type application/octet-stream;
}

and on apache add this on your httpd.conf or .htaccess

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

I used this on http://mp3boo.cc config and working very well to force download the mp3 files. hth

score 0 · Answer 3 · answered Jan 20 '13 at 15:14

You can add the following lines of code in your .htaccess file of your server to force a download of a particular file type from your server. Then a normal link should work.

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

score 0 · Answer 4 · answered Jan 20 '13 at 16:07

Explaining here how I did it:

1. Add following snippet in web.xml:



<pre><code>
<servlet>
      <servlet-name>MyDownloadServlet</servlet-name>
      <servlet-class>com.lokur.MyDownloadServlet</servlet-class>      
  </servlet>
  <servlet-mapping>
      <servlet-name>MyDownloadServlet</servlet-name>
      <url-pattern>*.download</url-pattern>
  </servlet-mapping>

</pre></code>

2. Add following in your servlet:



public class MyDownloadServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse response)
            throws ServletException, IOException {


        //Set the headers.
        response.setContentType("application/x-download"); 
        response.setHeader("Content-Disposition", "attachment; filename=downloaded_horse.mp3");

    //TODO: pull the file path from the request parameters  
        InputStream fileIn = getServletContext().getResourceAsStream("mp3/horse.mp3");
        ServletOutputStream outstream = response.getOutputStream();

        byte[] outputByte = new byte[40096];

        while(fileIn.read(outputByte, 0, 40096) != -1)
        {
            outstream.write(outputByte, 0, 40096);
        }
        fileIn.close();
        outstream.flush();
        outstream.close();


    }


}


3. Finally this is the requested jsp:


<pre> <code>
       <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"

     %>  
    <body>  
    <form action="getMusicFile.download" method="post">
        Wanna download? <input type="submit" value="Download music"> 
      </form>  
    </body>



That's all to it!

Cheers,
Akshay :)

How to add a download music link on webpage?

4 Answers4

Linked