HTML and CSS Reference
In-Depth Information
It's currently impossible to change the colors of the controls in any
browser.
CSS
like the following sets the background color, but it
doesn't make any difference to the controls themselves:
audio {
width: 200px;
height: 50px;
outline: 1px solid #ccc;
background-color: #000;
color: #fff;
}
But it's possible to use the background in concert with the otherwise-
ignored
height
property:
audio {
width: 200px;
height: 200px;
outline: 1px solid #ccc;
background:
url('dust-puppy.svg')
no-repeat top center;
background-size: contain;
}
You could use this
CSS
to provide an image
of the artist or some sort of cover art.
Designers may be severely disappointed with the lack of styling options
available for the audio controls, but all isn't lost. In the later section
“Controlling audio and video with JavaScript,” you'll see how you can
write “your own controls, which you can then style however you wish.
You've seen how simple it is to embed audio files, but unfortunately
that's not the end of the story. In the same way the HTML5 standard doesn't
specify which types of images a browser should support on
<img>
, it also
doesn't specify what types of file should be supported by
<audio>
; but
unlike images, there are no audio formats that all the browser makers
have decided to support. The next section discusses these issues.
