Geek Answers Handbook

JavaScript / HTML5 sound: play mp3 file downloaded by user via file selector in Android Chrome

I am trying to create a site on which a user can select a local audio file from his PC or tablet and (without uploading the file to the server) play this file using the HTML5 tag (the user must press a button to play it, the auto play function is not required). I can’t achieve this in the Android version of Chrome, despite the fact that this browser should support everything that is needed. It works on the desktop version of Chrome.

I tried different methods of loading this file:

  • via JavaScript FileReader - you can play 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(); };

  • URL.createObjectURL - : http://liveweave.com/4y84XV - - playFile :

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

? ? . .

+4
1

, , Audio API ( HTML5 <audio>). ArrayBuffer s

, WAV :

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

+1

More articles:


All Articles