Video: Understanding HTML5 audio formats

Audio formats are very similar to video formats and in some cases they are the exact same format just without the video data. We typically has a container format where we get the extension from and then the audio data is compressed using an audio codec. However, for some formats there is no container format at all and the file is simply the audio data. For HTML5 audio we have four formats to choose from: MP3, AAC, Ogg Vorbis and WAV. The MP3 format is actually one of these audio formats that doesn't have a container format.

In this course, author Steve Heffernan contextualizes the state of HTML5 audio and video and shows how to embed media into a web page using HTML5. The course sheds light on configuring the new HTML5 audio and video tags, ensuring backwards compatibility by setting alternative playback methods, encoding the needed file formats, and building custom controls with JavaScript. Also included are tutorials on troubleshooting known issues and reviewing real-world examples of HTML5 audio and video.

Understanding HTML5 audio formats

Audio formats are very similar to video formats and in some cases they are theexact same format just without the video data.We typically has a container format where we get the extension from and then theaudio data is compressed using an audio codec.However, for some formats there is no container format at alland the file is simply the audio data.For HTML5 audio we have four formats to choose from: MP3, AAC, Ogg Vorbis and WAV.The MP3 format is actually one of these audio formats that doesn't havea container format.

The file is simply the audio data compressed with the MP3 codec.MP3 is supported by Safari, IE 9, Chrome, and also Flash.Next we have the AAC format, which is the same format as the MP4 H.264 videoformat just without the video data.These files will typically have an M4A extension to distinguish them from thevideo files, even though it's the same container format.AAC is supported by the same browsers as MP3.It's actually the successor to MP3 and can achieve a higher sound quality.

Both MP3 and AAC have royalties associated with them.So if you're charging for your audio, make sure you understand thelicensing around them.The Ogg Vorbis format is the same format as the Ogg Theora video format,without the video data.These files will typically have an OGA or OGG extension to distinguish them fromthe OGV video files, so they're both the Ogg container format.Ogg Vorbis is supported by Firefox, Chrome, and Opera.Finally, we have the WAV format and the interesting thing about WAV is thereis no audio codec in use and the audio data is stored in the uncompressed PCM format.

PCM is the same format that CDs use to store audio data.So if you've ever converted a CD to MP3s, you know an MP3 can lose some quality, but itwill be a much smaller file. While you can fit about 20 uncompressed songs on aCD, you can fit about 200 MP3s.So more than likely WAV won't be your first choice for an audio format becauseof its size, but it is supported by the most HTML5 browsers.The only browser that doesn't support WAV is IE 9.If we look at all the format support together, WAV comes close to giving us thatone format that works between all browsers.

But it's also probably the last one we'd want to be that format.So if you are getting into HTML5 audio today, I would suggest encoding to twoformats, AAC and Ogg Vorbis.They're both great formats. They'll cover all your HTML5 users between them andyou can use ACC for your Flash fallback as well.Thankfully we don't have the same browser version issue as we do for video thatwould require us to do three formats.Now just like with video, if you only care about supporting the iOS devices withHTML5, you can go down to one format, AAC, and do the same iOS detection that Italked about in the video formats movie.

All right, so now that we know more than we want to about HTML video and audioformats, we can start actually creating these files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.