Getting HTML5 audio duration, after its loaded on demand: Why using a source tag inside an audio tag prevents the loadeddata event from firing?

Moved from the old demo (with only one set of play/pause buttons) to the new demo (with duplicated set of controls for easier access of the controls elsewhere on the page).

But now the time duration (far right number) is broken!

---

CONTEXT: The controls are meant for reading out the contents of the page for visually impaired and blind visitors of the website. With smart of us tabindex users will find this button with their FIRST tab press. Nice right? Thought so!

Old demo: <play tabindex="1" title="Read out loud">PLAY</play>
New demo: <playpause tabindex="1" title="Read out loud">PLAY</playpause>

---

I tried JS Lint to find errors and got these errors:

unexpected for and unexpected var

Is that the reason why the new demo wont show the time duration of the mp3, once clicked upon and once loaded upon demand?

the OLD demo, with only 1 set of controls:

var play = document.getElementsByTagName('play')[0];
var pause = document.getElementsByTagName('pause')[0];

The NEW demo, with multiple set of controls:

document.getElementsByTagName("playpause")[0].addEventListener("click", playpause);
document.getElementsByTagName("playpause")[1].addEventListener("click", playpause);

The brilliant part of the old demo was, that the timer only loads once the user clicks play, that way not wasting any bandwith during initial page load.

In the new demo (with the duplicated controls for ease of navigation) however this timer is broken. Once user clicks PLAY the duration is not shown...

As far as I can see thats the only disfunctional part of the new demo. I have tried changing the order of some functions but it remains broken and I dont know what to do. Any and all help is welcome and highly appreciated. Thanks.

from Getting HTML5 audio duration, after its loaded on demand: Why using a source tag inside an audio tag prevents the loadeddata event from firing?