Web Audio API - createMediaElementSource dynamic

This fiddle demonstrates Web Audio API's createMediaElementSource(), which pipes audio from an <audio> tag through the Web Audio API.

by Ian Kerr

JavaScript

function createAudioElement(urls) {
    var audioElement = document.createElement("audio");

    audioElement.autoplay = true;
    audioElement.loop = true;
    
    for (var i = 0; i < urls.length; ++i) {
        var typeStr = "audio/" + urls[i].split(".").pop();

        if (audioElement.canPlayType === undefined ||
            audioElement.canPlayType(typeStr).replace(/no/, "")) {
            var sourceElement = document.createElement("source");
            sourceElement.type = typeStr;
            sourceElement.src = urls[i];
            audioElement.appendChild(sourceElement);
            console.log("Using audio asset: " + urls[i]);
        }
    }
    
    return audioElement;
}

function createMediaSource(context, audioElement) {
    var source = context.createMediaElementSource(audioElement);

    if (source) {
        source.connect(context.destination);
        console.log("Created MediaElementAudioSourceNode.");
    }
    else {
        console.warn("Failed to create media element source.");
    }
}

function getAssetUrl(sampleRate, format) {
    var baseUrl = 'http://assets-staging.verold.com/entities/52812b86a9aff5020000000b/3f6b2c8c8996e748a753cf26c6f9406a/06+Old+Man-';
    
    return baseUrl + Math.round(sampleRate) + '.' + format;
}

function initWebAudio() {
    var audioContext = window.AudioContext || window.webkitAudioContext;

    if (!audioContext) {
        console.warn("Web Audio API not supported.");
        return null;
    }
    
    return new audioContext();
}
    
// Initialize the Web Audio context.
var context = initWebAudio();
if (context) {
    console.log("Context sample rate: " + context.sampleRate);

    // Make sure the context's sample rate is 44100 Hz or 48000 Hz--
    // the sample rates of our audio files.
    if (context.sampleRate === 44100 || context.sampleRate === 48000) {
        var element = createAudioElement([
            getAssetUrl(context.sampleRate, 'mp3'),
            getAssetUrl(context.sampleRate,...