Native Audio - HTML5 - page 110

CSS for style
Finally, we'll style our player so it doesn't look quite so plain (see Figure 4-5 ). We'll
start with styles for the dimensions of the player and how the button s should appear:
#player {
height: 50px;
padding: 10px;
position:relative;
width: 300px;
}
button {
background: #666;
border:1px;
-moz-border-radius: 5px;
border-radius: 5px;
bottom: 10px;
color: #fff;
padding: 5px;
position:absolute;
width:45px;
}
#audioStop {
font-size:22px;
left: 65px;
line-height: 11px;
}
Then we'll add styles that help with the play/pause toggle:
#audioPlay.hidden,
#audioPause.hidden { display:none; }
#audioSeek {
background: #ccc;
border: 1px solid #000;
-moz-border-radius: 10px;
border-radius: 10px;
display:block;
height:2px;
}
and styles for the green progress bar:
#audioLoaded {
background: #0c0;
border: 1px solid #0c0;
-moz-border-radius: 10px;
border-radius: 10px;
display:block;
height:1px;
}