CSS and the HTML5 audio element

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:

1. display role
2. box model
3. dimensions
4. background properties
5. positioning
6. 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;
}

Test

Live test