Video and Audio - Introducing HTML5 - page 132

<script>
function audioloaded() {
// setup the fancy-pants player
}
window.addEventListener('loadedmetadata', function (event) {
if (event.target.nodeName === 'AUDIO') {
// set this context to the DOM node
audioloaded.call(event.target);
}
}, true);
</script>
<audio src=”hanson.mp3”>
<p>If you can read this, you can't enjoy the soothing
¬ sound of the Hansons.</p>
</audio>
WORKAROUND #2: HIGH AND INLINE
Here's a similar approach using an inline handler:
<script>
function audioloaded() {
// setup the fancy-pants player
}
</script>
<audio src=”hanson.mp3” onloadedmetadata=
¬ ”audoloaded.call(this)”>
<p>If you can read this, you can't enjoy the soothing
¬ sound of the Hansons.</p>
</audio>
Note that in the inline event handler I'm using .call(this) to
set the this keyword to the audio element the event fired upon.
This means it's easier to reuse the same function later on if
browsers (in years to come) do indeed fix this problem.
By putting the event handler inline, the handler is attached as
soon as the DOM element is constructed, therefore it is in place
before the loadedmetadata event fires.