HTML and CSS Reference
In-Depth Information
In Firefox, the controls look like Figure
8-8
.
Figure 8-8.
The audio controls in Firefox
In Safari, the audio controls look like Figure
8-9
.
Figure 8-9.
The audio control in Safari
As you can see, the controls are styled very differently in each browser. With native controls you have very
little control over how the audio controls are displayed. You can change the width by setting the
style
attribute,
which will stretch the progress bar. Changing the height will only add white space on top of the control as shown
in Figure
8-10
.
Figure 8-10.
Extending the size of the native controls
■
Caution
In IE9, if you set the height attribute less than 45px, the entire control will be hidden.
Reviewing Browser Support
If you tried to open your web page in one of the other browsers, you probably found that they didn't work. While
all major browsers support the
audio
element, they don't all support the same audio formats. Fortunately all
major vendors support one of two audio codecs, MP3 or Vorbis. Table
8-1
indicates the codecs that are supported
by each browser.
