WAAPISim Polyfill - how to load .mp3 with .wav fallback

Question

I'm using the WAAPISim Polyfill for cross-browser support in a visualization from an audio file, using the Web Audio API. The polyfill attempts to use the following methods in this order: "WebAudioAPI => AudioDataAPI => Flash". I am loading the audio file like this in JS:

// load the specified sound
function loadSound(url) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';

    // When loaded decode the data
    request.onload = function() {

        // decode the data
        context.decodeAudioData(request.response, function(buffer) {
            // when the audio is decoded play the sound
            playSound(buffer);
        }, onError);
    }
    request.send();
}

loadSound("audio/bird.wav");

As noted in the polyfill's documentation, this polyfill only supports wav format for this method. "createBuffer from ArrayBuffer and decodeAudioData supports only wav format."

Right now, it is only loading a .wav, but I'd like to load a .mp3 (smaller file) instead for browsers that will support it. How can I detect whether the implementation will work with a .mp3 and load the right file accordingly?

Full demo example

Answer 1

I got this response from the polyfill developer:

if (typeof window.waapisimContexts != 'undefined'){
            loadSound("audio/bird.wav");
        } else {
            loadSound("audio/bird.mp3");
        }

The polyfill creates waapisimContexts only if the browser requires it to play a .wav, so this approach looks for the waapisimContexts and loads the .wav if it is defined. Otherwise, it loads the .mp3.

Answer 2

If:

(new Audio()).canPlayType("audio/mp3")

returns "maybe" or "probably", then the browser supports mp3 in decodeAudioData.