Audio Array Buffer to Audio Element

Question

I'm creating a chrome app that decrypts mp3s sent from my PBX server to my gmail account and plays them. I have completed everything except for the audio player in gmail. I have two options:

1. Use Web Audio API (I got it working but can't figure out how to make a fully functional seek bar).
2. Create an createObjectURL from the array and pass to either audio tag or soundmanager2.

I want to reuse code as much as possible and haven't been able to find a pre-made Web Audio API player with seekbar. So, I attempted to try option 2 and the following is as far as I went

window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
context.decodeAudioData(arr.buffer, function (soundBuffer) {
    windowURL = window.URL || window.webkitURL;
    var audio = document.createElement("audio");
    audio.src = windowURL.createObjectURL([soundBuffer]);
    var someDiv = document.getElementById("testDiv");
    someDiv.appendChild(audio);
    audio.onload = function (e) {
        windowURL.revokeObjectURL(this.src);
    }
}, function (err) {
   console.log("couldnt decode buffer");
});

It fails with "Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided." How should I properly code this function to create an url that can used by chrome's mp3 player or soundmanager2?

Answer 1

You need to first create a Blob, and pass that as an argument for createObjectURL

....
const blob = new Blob([soundBuffer], { type: "audio/wav" });
audio.src = window.URL.createObjectURL(blob);
....

Source

Answer 2

Yes, you can do it

1. Fetch arraybuffer and decode audio
2. Create MediaSource with listener 'sourceopen'
3. Use method appendBuffer to add you decoded audio to MediaSource

https://developer.mozilla.org/en-US/docs/Web/API/MediaSource