Add Custom events to Audio tag in HTML 5

Question

I am using the Audio tag from HTML5 to render audio on the page.

<audio preload="none" id="audioPlayer" controls>
<source src="test.mp3" type="audio/mpeg">
</audio>

I want to fire custom events on play, pause, end of the audio, and at certain intervals of audio as it progresses. I tried all the following methods to bind the events with the audio player but wasn't able to succed.

Approach 1 -

var audio = document.getElementById("audioPlayer");

audio.addEventListener('pause', foo());

Approach 2 -

jQuery("#audioPlayer").bind('play', function () {

    alert("test");           
});

Approach 3 -

document.getElementById('audioPlayer').addEventListener('play', function () {

    alert("test");
});

Approach 4

var play_pause = document.getElementById('audioPlayer');
play_pause.addEventListener('play', function () {

    alert("test");
}, false);

Answer 1

have you looked at using Web Audio as your API ? is provides the functionality you need