HTML and CSS Reference
In-Depth Information
4.5 Sample Design: Custom Audio Player
You want to design your own custom audio player.
In this sample design, we'll extend the concepts of Recipe 4.2 , to create a custom audio
player (see Figure 4-4 ), rather than relying on the default controls attribute.
Figure 4-4. The final design for the custom audio player as displayed in Safari 5
Define <audio> and player structure
We'll start with the markup for our HTML5 audio and player controls:
<div id="player">
<audio src="media/audio.mp3"></audio>
<div class="playerControls">
<button id="audioPlay" title="Play"
<button id="audioPause" class="hidden" title="Pause"
<button id="audioStop" title="Stop" onclick="playStop();">&#x25a0;</button>
<div id="audioSeek">
<div id="audioLoaded"></div>
<ul id="audioTimes">
<li id="audioElapsed">00:00:00</li>
<li id="audioDuration">00:00:00</li>
Search WWH ::

Custom Search