What is wrong with this audio in HTML5?

I've been getting very angry at this HTML5 and audio stuff with JavaScript. It worked fine when it was already in HTML but since I moved it to JavaScript its just not working. I do not wish to use jQuery because I want to keep the size as low as possible. All the functions do exist and same goes for the variables. Chrome isn't giving me any errors but Chrome Developer tools under network says; pending. So I know it gets all the data but it just doesn't return anything. It returns no load and or oncanplay.

Please can someone advise me on something I maybe doing wrong or a possible bug in Chrome.

function loadAudio(loc,after){
        window.itemsToLoad++;
        var aud = new Audio(loc);
        if(typeof(after)=="function"){
            aud.addEventListener('load', function () {updateLoaders();alert('Yes');after(aud);}, false);
        }else{
            aud.addEventListener('load', function () {alert('Yes');updateLoaders();},false);
  开发者_Python百科      }
        aud.preload="none";
        aud.addEventListener('onerror', function () {alert('Error');updateErrorLoaders();},false);
        aud.addEventListener('onabort', function () {alert('abort');updateErrorLoaders();},false);
        aud.addEventListener('onemptied', function () {alert('empty');updateErrorLoaders();},false);
        aud.type="type=\"audio/ogg\"";
        aud.controls="controls";
        aud.load();
        return aud;
    }
window.imageBackground = loadImage('images/background2.png',function (img) { alert("Yes it bloody works ;)");});

I've noticed a few problems with your code. First, you define a loadAudio function but you are actually calling loadImage('images/background2.png', fn). I assume this was just a slip up when you copy and pasted your code. Secondly, the <audio> element doesn't support the type attribute. If you want to specify the media type then use a child <source> element. Lastly, you are listening to the wrong event. Audio elements don't respond to the onload event, instead use the onloadeddata event. Here's your code with the updates and a little extension to support a callback that will be called when the audio has finished playing:

function updateLoaders() {
    // do stuff
}

function updateErrorLoaders() {
    // do stuff
}

function loadAudio(src, loadComplete, playComplete) {
    window.itemsToLoad++;
    var audio = new Audio();

    // Playback has completed.
    audio.addEventListener('ended', function () {
        if (typeof playComplete === 'function') {
            playComplete(audio);
        }
    }, false);
    // The entire song has loaded (not necessarily done playing).
    audio.addEventListener('loadeddata', function () {
        updateLoaders();

        if (typeof loadComplete === 'function') {
            loadComplete(audio);
        }
    }, false);

    // Handle errors.
    audio.addEventListener('error', function () {
        console.log('error');
        updateErrorLoaders();
    }, false);
    audio.addEventListener('abort', function () {
        console.log('abort');
        updateErrorLoaders();
    }, false);
    audio.addEventListener('emptied', function () {
        console.log('empty');
        updateErrorLoaders();
    }, false);

    audio.preload = 'none';
    audio.src = src;
    audio.controls = 'controls';
    audio.load();

    return audio;
}

var audio = loadAudio('Example.ogg', function (audio) {
    console.log('audio completely loaded');
    audio.play();
});

For more details on the events supported by <audio> elements see W3Schools.