HTML and CSS Reference
In-Depth Information
4.5 Sample Design: Custom Audio Player
Problem
You want to design your own custom audio player.
Solution
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"
onclick="playPause();">►</button>
<button id="audioPause" class="hidden" title="Pause"
onclick="playPause();">▐▐</button>
<button id="audioStop" title="Stop" onclick="playStop();">■</button>
<div id="audioSeek">
<div id="audioLoaded"></div>
</div>
<ul id="audioTimes">
<li id="audioElapsed">00:00:00</li>
<li id="audioDuration">00:00:00</li>
</ul>
