Riprodurre il file mp3 dopo averlo caricato con html5 trascinare e rilasciare il caricamento

Question

È possibile caricare prima un file mp3 con il sistema di caricamento e rilascio di HTML html, quindi riprodurlo con l'audio API del webkit (http: //chromium.googlecode. com/svn/trunk/samples/audio/index.html) senza inviare un modulo (in Google Chrome)? È possibile fare in FF con l'audio API di Mozilla? Se é cosi, come? Inoltre, esistono tutorial per l'API di webkit? Non sono stato in grado di trovarne.

Answer 1

Il processo di base è necessario seguire è

1. Cattura i file utilizzando Drag and Drop Files
2. Distacco i file in una Form Data Object
3. Rispondere con l'URL della voce audio da riprodurre
4. Riproduci l'audio utilizzando l'API audio

Questo jsFiddle allo devi trascinare un file audio in un'area e poi riprodurre quel file.

Dovresti essere in grado di utilizzare l'evento onaudioprocess di JavaScriptAudioNode per ottenere l'ampiezza corrente.

Edit:

In base a quanto JaapH detto che avevo uno sguardo in questo nuovo. Il processore è stato utilizzato per ottenere un evento appropriato per il rendering del canvas. Quindi non è davvero necessario. Questo jsFiddle fa lo stesso di seguito. Tuttavia, utilizza requestAnimationFrame anziché il processore.

Ecco il vecchio codice, vedere il violino sopra per la versione con telaio richiesta animazione:

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); 

Spero che questo aiuta

Answer 2

Quando eseguo l'esempio jsfiddle il suono è distorto questo è dovuto che sia il processore che la sorgente sono connessi a context.destination. Per farlo funzionare ho rimosso la linea source.connect(context.destination); e nella funzione processAudio ho aggiunto il codice per copiare i campioni di ingresso per l'uscita

var inL = e.inputBuffer.getChannelData(0); 
var inR = e.inputBuffer.getChannelData(1); 
var outL= e.outputBuffer.getChannelData(0); 
var outR =e.outputBuffer.getChannelData(1); 

var n = inL.length; 
for (var i = 0; i < n; i++) { 
    outL[i] = inL[i]; 
    outR[i] = inR[i]; 
}