Native Audio - HTML5 - page 108

</div>
</div>
For the purposes of simplicity, this example includes only a play/pause toggle, a stop
button, and a progress bar.
The choice of the button element for the player controls is simply a
semantic and accessibility preference, not a requirement.
JavaScript API
Next, we turn to the powerful DOM API to deliver functionality to the player markup.
For a more usable, accessible experience, you can also use detection (see
http://diveintohtml5.info/everything.html ) for HTML5 audio . Then, only
if it is supported will the player markup and audio element be inserted.
This means browsers that don't support HTML5 audio won't see a
player they can't use. Modernizr (see http://modernizr.com ) can aid in
this detection.
First, declare the audio element and player controls, making sure the script appears
after the audio element in the source:
<script>
audio = document.getElementsByTagName("audio")[0];
audioDuration = document.getElementById("audioDuration");
audioElapsed = document.getElementById("audioElapsed");
audioPlay = document.getElementById("audioPlay");
audioPause = document.getElementById("audioPause");
audioStop = document.getElementById("audioStop");
audioLoaded = document.getElementById("audioLoaded");
Then determine eventful information about the audio file:
audio.addEventListener("loadedmetadata", setDuration, false);
audio.addEventListener("timeupdate", setElapsed, false);
Next, define the functions driving the progress bar:
function setDuration(event) {
audioDuration.innerHTML = timeFormatter(audio.duration);
}
function setElapsed(event) {
audioElapsed.innerHTML = timeFormatter(audio.currentTime);
amountLoaded = (audio.currentTime/audio.duration)*100;
audioLoaded.style.width = amountLoaded + 'px';
}