<audio> tag to audioBuffer - is it possible?

Question

My javascript-webApp first reads a short mp3 file and finds silence-gaps in it (for navigational purposes), then it plays the same mp3 file cueing it to start where one silence or another finishes. This differs from the usual webAudio scenario designed to grant access to audio data currently being played in the stream (not to the whole track).

To get my webApp to work I have to read/access the mp3 file twice:

1. via XMLHttpRequest to read an entire MP3 file and put it in to an audioBuffer that I can subsequently decode using audioContext.decodeAudioData() - as explained here: Extracting audio data every t seconds
2. by specifying the <audio> tag to allow me to play the file on demand specifying in milliseconds the cue/start point. Playing audio with Javascript?.

Q: Is there currently any way I might declare the <audio>tag first then somehow derive the audioBuffer directly from it, without resorting to XMLHttpRequest ?

I've read about createMediaElementSource but I can't see how to get an audioBuffer by using it.

Answer 1

When doing your first XHR, ask for a blob:

xhr.responseType = 'blob'

Then get an ArrayBuffer out of it:

var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function() {
    arrayBuffer = this.result;
};
fileReader.readAsArrayBuffer(blob);

and give that to decodeAudioData to get the AudioBuffer as usual. You can now do your processing.

Then, when your processing is done, give the blob to the tag, as a source, when you want to play it, it will work as usual:

 audio.src = window.URL.createObjectURL(blob);

You might need to prefix URL with the webkit vendor prefix, I can't remember if they implement the unprefixed version. Anyways, blobs are the way to go !