You may recall that there are two image file types that impact the file size and quality of an image. Well, just like images, audio files have two basic types, too.
- lossless: there has been no loss of audio quality, which can lead to larger file sizes and longer download times
- lossy: file that has undergone quality compression to keep file size low
Compression doesn't equal bad quality—it's just a matter of pieces of data being extracted while keeping the file sounding very much like the original. These file types can still sound great and will take a fraction of the time to load online. In web design, lossy file types are the most widely used and accepted because of their more compact size.
Below is a list of some of the most common file types available and descriptions of their use. Although we will focus on only a few of these, it's a good idea to be familiar with the other audio file extensions that are out there.
| Format | File(s) | Description |
|---|---|---|
| MIDI | .mid .midi |
MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers. |
| RealAudio | .rm .ram |
RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers. |
| WMA | .wma | WMA (Windows Media Audio). Developed by Microsoft. Plays well on Windows computers, but not in web browsers. |
| AAC | .aac | AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers. |
| M4A | .m4a | M4A (MPEG 4 Audio). Developed by Apple to store digital music, audiobooks, podcasts, and more. Compatible with some web browsers. |
| MP4 | .mp4 | MP4 is a video format but can also be used for audio. Supported by most browsers. |
| MP3 | .mp3 | MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers. |
| WAV | .wav | WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML. |
| Ogg | .ogg | Ogg. Developed by the Xiph.Org Foundation. Supported by HTML. |
HTML5 supports three audio file formats: MP3, WAV, and OGG. When adding a file to your audio-tag, it's important to include the type attribute with the corresponding file type values to assist the browser in knowing which file source to use.
<audio controls preload="auto">
<source src="file.mp3" type="audio/mpeg" />
<source src="file.ogg" type="audio/ogg" />
<source src="file.wav" type="audio/wav" />
This browser does not support the linked audio file.
</audio>
Question
The chart above shows that MP4 is supported by most bowsers, but isn't listed as an acceptable format. Why?
When building and designing a site, it's best practice to keep accessibility in mind. The .mp4 file format may be compatible with most browsers for audio. However, it's best to adhere to the formats with known support so that the user has a seamless experience.
