HTML and CSS Reference
In-Depth Information
fallback content that is nested between its opening and closing tag. An audio element
with fallback content would look very similar to its video counterpart:
___________
10 See http://audiotool.com/app as an example. Audiotool is a cloud-based application for creating
music that is built on the Adobe Flash Platform.
11 See the Web Audio API at the W3C: http://dvcs.w3.org/hg/audio/rawfile/tip/webaudio/specific-
ation.html .
<audio controls>
<source src="report.oga" type='audio/ogg; codec-
s="vorbis"' />
<source src="report.m4a" type='audio/mp4; codec-
s="mp4a.40.2"' />
<p>Audio not supported. Download audio files as:
<a
href="report.oga">Ogg</a>,
<a
href="report.m4v">ACC</a>p>
</audio>
Note If the controls attribute is left off, nothing is shown by default!
The difference here to video is that the audio does not have a width and height (it is
possible to adjust the size of the playback bar with CSS), and obviously the format of
the source files is different.
Figure 5-8. Appearance of the audio element in Google Chrome
Audio formats
The audio formats will be for the most part familiar from reading the “Video” section.
The same browser support discrepancies exist as well, not that that is something to cel-
ebrate. Refer to Table 5-2 in the “Video formats” section and look at the audio codecs
column. Like with video, the Ogg and MPEG-4 container formats can be used, this time
without the video track. Therefore, Ogg audio will work in Google Chrome, Firefox,
and Opera, while MPEG-4 audio will work in Safari, Chrome, and Internet Explorer.
The Ogg format uses the Vorbis codec (WebM uses this for audio also), so when speak-
ing of just audio, the format is referred to as Ogg Vorbis and has the file extension .oga
 
Search WWH ::




Custom Search