Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
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 video format just without the video data. These files will typically have an M4A extension to distinguish them from the video 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 the licensing 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 from the 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 there is 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 it will be a much smaller file. While you can fit about 20 uncompressed songs on a CD, you can fit about 200 MP3s. So more than likely WAV won't be your first choice for an audio format because of 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 that one 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 two formats, AAC and Ogg Vorbis. They're both great formats. They'll cover all your HTML5 users between them and you can use ACC for your Flash fallback as well. Thankfully we don't have the same browser version issue as we do for video that would require us to do three formats. Now just like with video, if you only care about supporting the iOS devices with HTML5, you can go down to one format, AAC, and do the same iOS detection that I talked about in the video formats movie.
All right, so now that we know more than we want to about HTML video and audio formats, we can start actually creating these files.
Get unlimited access to all courses for just $25/month.Become a member
93 Video lessons · 29011 Viewers
135 Video lessons · 63580 Viewers
79 Video lessons · 21623 Viewers
350 Video lessons · 106539 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.