HTML Rename download link

Question

I have a mp3 link like this :

http://example.com/932937293723.mp3

but i want to rename it when user downloads the file to be like this

http://example.com/Artist - Title.mp3

My code :

<a href="http://example.com/932937293723.mp3" download="Artist - Title.mp3">DOWNLOAD</a>

The mp3 file stored in remote server. And i'm not the owner of that server. HTML download attribute seem not good solution. because it's not cross-browser. Any cross-browser solution to solve this ? Javascript maybe :D

Answer 1

If you insist on working from the front end, try working with the following code. The getblob method is depreciated, but you need to update that side. Let me know.

function getBinary(file){
    var xhr = new XMLHttpRequest();  
    xhr.open("GET", file, false);  
    xhr.overrideMimeType("text/plain; charset=x-user-defined");  
    xhr.send(null);
    return xhr.responseText;
}
function sendBinary(data, url){
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);

    if (typeof XMLHttpRequest.prototype.sendAsBinary == "function") { // Firefox 3 & 4
        var tmp = '';
        for (var i = 0; i < data.length; i++) tmp += String.fromCharCode(data.charCodeAt(i) & 0xff);
        data = tmp;
    }
    else { // Chrome 9
        // http://javascript0.org/wiki/Portable_sendAsBinary
        XMLHttpRequest.prototype.sendAsBinary = function(text){
            var data = new ArrayBuffer(text.length);
            var ui8a = new Uint8Array(data, 0);
            for (var i = 0; i < text.length; i++) ui8a[i] = (text.charCodeAt(i) & 0xff);

            var bb = new BlobBuilder(); // doesn't exist in Firefox 4
            bb.append(data);
            var blob = bb.getBlob();
            this.send(blob);
        }
    }

    xhr.sendAsBinary(data); 
}

var data = getBinary("My music.mp3");
sendBinary(data,'http://www.tonycuffe.com/mp3/tailtoddle_lo.mp3');