File download option using clientside script within client system

Question

We are currently working on giving download option to the users to download MP3 files. We are developing an application that fully execute in local system that no server is required.

But downloading mp3 files option is not working in most of the browsers. Its get opened in inbuilt media players in most browsers.

We have checked the solutions for this as we get answers like setting 'content-disposition' using header in server side or using PHP or ASP scripts to make it downloadable.

I have also checked jquery filedownload.js plugin. that also had a section like setting content-disposition and set-cookie.

So I want to know is it possible to create a file download link (for MP3)* compatible for all browsers using only client side scripts like Javascript or jQuery.

Important note:

Actually the process is not downloading file from a server but from client system itself.

That is the MP3 file should copy from from one location(Directory) to another location with in the client system.

Answer 1

This solution requires browser support of XHR2 (http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html)

It will download the MP3 into a blob and then will create a URL you can access the blob. During this process you can override the Mimetype to whatever you need.

window.URL = window.URL || window.webkitURL;

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://robtowns.com/music/blind_willie.mp3', true);
    xhr.responseType = 'blob';
    xhr.overrideMimeType('application/octet-stream');
    xhr.onload = function(e) {
        if (this.status == 200) {
            var blob = this.response;
            $('#link').html('<a href="'+window.URL.createObjectURL(blob)+'">Download</a>');
        }
    };

    xhr.send();

The JSfiddle example requires you to have turned off web-security in your browser to allow a cross domain request. http://jsfiddle.net/D2DzR/3/