Play mp3 file after uploading it with html5 drag and drop upload

Question

Is it possible to first upload an mp3 file with the html5 drag and drop upload system, and then play it with webkit's audio API (http://chromium.googlecode.com/svn/trunk/samples/audio/index.html) without submitting a form (in Google Chrome)? Is it possible to do in FF with Mozilla's audio API? If so, how? Also, are there any tutorials in existance for webkit's API? I have not been able to find any.

Answer 1

The basic process you need to follow is

1. Capture the files using Drag and Drop Files
2. Posting the files in a Form Data Object
3. Respond with the URL of the audio item you want to play
4. Play the Audio using the Audio API

This jsFiddle allows you to drag an audio file into an area and it will then play that file.

You should be able to use the JavaScriptAudioNode's onaudioprocess event to get the current amplitude.

Edit:

Based on what JaapH said I had a look into this again. The processor was used to get an appropriate event to render the canvas. So it is not really required. This jsFiddle does the same as below. However, it uses requestAnimationFrame instead of the processor.

Here is the old code, see the fiddle above for the version using request animation frame:

var context = new (window.AudioContext || window.webkitAudioContext)();
var source;
var processor;
var analyser;
var xhr;

function initAudio(data) {
    source = context.createBufferSource();

    if(context.decodeAudioData) {
        context.decodeAudioData(data, function(buffer) {
            source.buffer = buffer;
            createAudio();
        }, function(e) {
            console.log(e);
        });
    } else {
        source.buffer = context.createBuffer(data, false /*mixToMono*/);
        createAudio();
    }
}

function createAudio() {
    processor = context.createJavaScriptNode(2048 /*bufferSize*/, 1 /*num inputs*/, 1 /*numoutputs*/);
    processor.onaudioprocess = processAudio;
    analyser = context.createAnalyser();

    source.connect(context.destination);
    source.connect(analyser);

    analyser.connect(processor);
    processor.connect(context.destination);

    source.noteOn(0);
    setTimeout(disconnect, source.buffer.duration * 1000);
}

function disconnect() {
    source.noteOff(0);
    source.disconnect(0);
    processor.disconnect(0);
    analyser.disconnect(0);
}

function processAudio(e) {
    var freqByteData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(freqByteData);
    console.log(freqByteData);
}

function handleResult() {
    if (xhr.readyState == 4 /* complete */) {
        switch(xhr.status) {
            case 200: /* Success */
                initAudio(request.response);
                break;
            default:
                break;
        }
        xhr = null;
    }      
}

function dropEvent(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var droppedFiles = evt.dataTransfer.files;

    //Ajax the file to the server and respond with the data

    var formData = new FormData();
    for(var i = 0; i < droppedFiles.length; ++i) {
            var file = droppedFiles[i];

            files.append(file.name, file);
    }

    xhr = new XMLHttpRequest();
    xhr.open("POST", 'URL');  
    xhr.onreadystatechange = handleResult;
    xhr.send(formData);
}

function dragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    return false;
}

var dropArea = document.getElementById('dropArea');
dropArea.addEventListener('drop', dropEvent, false);
dropArea.addEventListener('dragover', dragOver, false);

I hope this helps