Question

I’m developing an extension for Google Chrome that generates an mp3 file and saves it to localstorage using the FileSystem API. When I save I specify the mime type “application/octec-stream”. Later I send the user the file url, instead of downloading the file, the browser starts playing it on the html5 player. Looking the response it’s clear that the mime type returned was “audio/mp3” based on the extension of the file.
The question is: How can I efficiently make the browser download the file instead of playing it? Here’s the small snippet of what i’m doing on javascript.

 fs.root.getFile(contextData.songInfo.Name + ".mp3", { create: true }, function (fileEntry) {

         // Create a FileWriter object for our FileEntry (log.txt).
         fileEntry.createWriter(function (fileWriter) {

             fileWriter.onwriteend = function (e) {
                 console.log('Write completed.');
             };

             fileWriter.onerror = function (e) {
                 console.log('Write failed: ' + e.toString());
             };

             var bb = new window.WebKitBlobBuilder();
             bb.append(buffer);
             fileWriter.write(bb.getBlob('application/octet-stream'));

             contextData.fileUrl = fileEntry.toURL();

             callback(contextData);

         }, errorHandler);



     }, errorHandler);

Answer 1

Use the a[download] attribute, and set the href to the filesystem: URL

<a href="filesystem:..." download="FileName">Download it!</a>

This will force the browser to download the resource rather than navigating to it 🙂 THere’s more explanation here: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download