JavaScript / HTML5 audio: play mp3 file loaded by user via file selector in Android Chrome

Question

I am trying to create a site where user can select a local audio file from their PC or tablet and (without uploading the file to the server) play that file using HTML5 audio tag (user is supposed to click the button to play it, autoplay feature is not needed). I am not able to achieve this in Android version of Chrome despite the fact that this browser should support everything that is needed. In desktop version of Chrome it works.

I have tried different methods how to load that file:

1. via JavaScript FileReader - you can fiddle with it here: http://liveweave.com/2kOWoz

   function handleFileSelect(evt) {
       var files = evt.target.files; // FileList object
       playFile(files[0]);
   }
   
   function playFile(file) {
       var freader = new FileReader();
   
       freader.onload = function(e) {
           player.src = e.target.result;
       };
   
       freader.readAsDataURL(file);
   }
   
   player = document.getElementById('player');
   document.getElementById('files').addEventListener('change', handleFileSelect, false);
   document.getElementById('play').onclick = function(){ player.play(); };
   

2. via URL.createObjectURL - edit here: http://liveweave.com/4y84XV The second one is very similar to the first one - only playFile function is like this:

   function playFile(file) {
       player.src = URL.createObjectURL(file);
   }
   

What is wrong with those examples? Is there any other way how to achieve the expected result? I would appreciate any hints or ideas. Thanks.

Answer 1

HTML:

<input id="file" type="File" name="fileupload">
<button onclick="upload()" type="submit">Upload</button>
<div id="song"></div>

JS:

const upload = () => {
  var url;
  var file = document.querySelector("#file").files[0];
  var reader = new FileReader();
  reader.onload = function(evt) {
    url = evt.target.result;
    console.log(url);
    var sound = document.createElement("audio");
    var link = document.createElement("source");
    sound.id = "audio-player";
    sound.controls = "controls";
    link.src = url;
    sound.type = "audio/mpeg";
    sound.appendChild(link);
    document.getElementById("song").appendChild(sound);
  };
  reader.readAsDataURL(file);
};

<input id="file" type="File" name="fileupload">
	<button onclick="upload()" type="submit">Upload</button>
	<div id="song"></div>

 const upload = () => {
  var url;
  var file = document.querySelector("#file").files[0];
  var reader = new FileReader();
  reader.onload = function(evt) {
    url = evt.target.result;
    console.log(url);
    var sound = document.createElement("audio");
    var link = document.createElement("source");
    sound.id = "audio-player";
    sound.controls = "controls";
    link.src = url;
    sound.type = "audio/mpeg";
    sound.appendChild(link);
    document.getElementById("song").appendChild(sound);
  };
  reader.readAsDataURL(file);
};

Answer 2

You might want to try and see whether the Audio API works for you (which existed before the HTML5 <audio>). It can directly read ArrayBuffers

For example, loading a WAV is simple:

HTML:

<input id="files" type="file" id="files" name="files[]" multiple />

Javscript:

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new window.AudioContext();
var source;
function playSound(arraybuffer) {
    context.decodeAudioData(arraybuffer, function (buf) {
        source = context.createBufferSource();
        source.connect(context.destination);
        source.buffer = buf;
        source.start(0);
    });
}

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    playFile(files[0]);
}

function playFile(file) {
    var freader = new FileReader();

    freader.onload = function (e) {
        console.log(e.target.result);
        playSound(e.target.result);
    };
    freader.readAsArrayBuffer(file);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);

jsfiddle: http://jsfiddle.net/SpacePineapple/8xZUD/2/

http://ericbidelman.tumblr.com/post/13471195250/web-audio-api-how-to-playing-audio-based-on-user