Search code examples
javascriptaudioweb-audio-apipolyfills

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


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


Solution

  • 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.