Before running any test with the HTML5 audio
element, you should always make sure that your target browsers will support the audio format you'll provide to them. For that reason, in this example we'll use both the Theora
OGV and the MP3 formats. The audio element allows us to speciify different file formats through the source element. In this case we'll have the following
markup:
<p><audio controls="controls" autoplay="autoplay"> <source src="audio.ogv" type="audio/ogg; codec=vorbis" /> <source src="audio.mp3" type="audio/mpeg" /> </audio></p>
We're going to test the following CSS features:
- display role
- box model
- dimensions
- background properties
- positioning
- CSS3 properties
border-radius- transformations
Here's the CSS code:
audio {
display: block;
width: 100px;
height: 50px;
padding: 1em;
background: #fff url(http://dev.css-zibaldone.com/onwebdev/post/video.jpg) no-repeat 50% 5px;
border: medium solid gray;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -50px;
}