Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: MP3 is not a container #38751

Merged
merged 17 commits into from
Mar 23, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -83,13 +83,13 @@ There's a problem with the above example. It is possible that the video might no

### Contents of a media file

First, let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called **[container formats](/en-US/docs/Web/Media/Guides/Formats/Containers)**. They define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.
First, let's go through the terminology quickly. Formats like OGG, WAV, MP4 and WebM are called **[container formats](/en-US/docs/Web/Media/Guides/Formats/Containers)**. They define a structure in which the audio and/or video tracks that make up the media are stored, along with metadata describing the media, what codecs are used to encode its channels, and so forth.

A WebM file containing a movie which has a main video track and one alternate angle track, plus audio for both English and Spanish, in addition to audio for an English commentary track can be conceptualized as shown in the diagram below. Also included are text tracks containing closed captions for the feature film, Spanish subtitles for the film, and English captions for the commentary.

![Diagram conceptualizing the contents of a media file at the track level.](containersandtracks.png)

The audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. Different formats are used for audio tracks versus video tracks. Each audio track is encoded using an [audio codec](/en-US/docs/Web/Media/Guides/Formats/Audio_codecs), while video tracks are encoded using (as you probably have guessed) [a video codec](/en-US/docs/Web/Media/Guides/Formats/Video_codecs). As we talked about before, different browsers support different video and audio formats, and different container formats (like MP3, MP4, and WebM, which in turn can contain different types of video and audio).
The audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media. Different formats are used for audio tracks versus video tracks. Each audio track is encoded using an [audio codec](/en-US/docs/Web/Media/Guides/Formats/Audio_codecs), while video tracks are encoded using (as you probably have guessed) [a video codec](/en-US/docs/Web/Media/Guides/Formats/Video_codecs). As we talked about before, different browsers support different video and audio formats, and different container formats (like OGG, MP4, and WebM, which in turn can contain different types of video and audio).

For example:

Expand All @@ -99,7 +99,7 @@ For example:

There are some special cases. For example, for some types of audio, a codec's data is often stored without a container, or with a simplified container. One such instance is the FLAC codec, which is stored most commonly in FLAC files, which are just raw FLAC tracks.

Another such situation is the always-popular MP3 file. An "MP3 file" is actually an MPEG-1 Audio Layer III (MP3) audio track stored within an MPEG or MPEG-2 container. This is especially interesting since while most browsers don't support using MPEG media in the {{HTMLElement("video")}} and {{HTMLElement("audio")}} elements, they may still support MP3 due to its popularity.
Another example is the ever-popular "MP3 file". An "MP3 file" is an audio file encoded using MPEG-1 Audio Layer III compression. While it can include metadata, it is not encapsulated within a separate MPEG or MPEG-2 container. Its widespread support in the {{htmlelement("audio")}} and {{htmlelement("video")}} elements is largely a testament to its enduring popularity.

An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.

Expand Down
114 changes: 84 additions & 30 deletions files/en-us/web/media/guides/formats/containers/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,12 @@ See [Codecs used by WebRTC](/en-US/docs/Web/Media/Guides/Formats/WebRTC_codecs)

While there are a vast number of media container formats, the ones listed below are the ones you are most likely to encounter.
Some support only audio while others support both audio and video.
The MIME types and extensions for each are listed. The most commonly used containers for media on the web are probably MPEG-4 (MP4), Web Media File (WEBM), and MP3 format.
However, you may also encounter Ogg, WAV, AVI, MOV, and other formats.
Not all of these are broadly supported by browsers, however; some combinations of container and codec are sometimes given their own file extensions and MIME types as a matter of convenience, or because of their ubiquity.
The MIME types and extensions for each are listed. The most commonly used containers for media on the web are probably MPEG-4 Part-14 (MP4) and Web Media File (WEBM). However, you may also encounter Ogg, WAV, AVI, MOV, and other formats.
Not all of these are broadly supported by browsers; some combinations of container and codec are sometimes given their own file extensions and MIME types as a matter of convenience, or because of their ubiquity.
For example, an Ogg file with only an Opus audio track is sometimes referred to as an Opus file, and might even have the extension `.opus`.
But it's still actually just an Ogg file.

In other cases, a particular codec, stored in a certain container type, is so ubiquitous that the pairing is treated in a unique fashion.
A good example of this is the MP3 audio file, which is in fact an MPEG-1 container with a single audio track encoded using MPEG-1 Audio Layer III encoding.
These files use the `audio/mp3` MIME type and the `.mp3` extension, even though their containers are just MPEG.
In some cases, a particular codec becomes so ubiquitous that its usage is treated as a unique format. A prime example is the MP3 audio file, which isn't stored in a conventional container. Instead, an MP3 file is essentially a stream of MPEG-1 Audio Layer III-encoded frames, often accompanied by metadata such as ID3 tags. These files use the `audio/mpeg` MIME type and the `.mp3` extension.

### Index of media container formats (file types)

Expand Down Expand Up @@ -326,8 +323,7 @@ FLAC files can only contain FLAC audio data.
The **[MPEG-1](https://en.wikipedia.org/wiki/MPEG-1)** and **[MPEG-2](https://en.wikipedia.org/wiki/MPEG-2)** file formats are essentially identical.
Created by the Moving Picture Experts Group (MPEG), these formats are widely used in physical media, including as the format of the video on DVD media.

On the internet, perhaps the most common use of the MPEG file format is to contain [Layer_III/MP3](https://en.wikipedia.org/wiki/MPEG-1) sound data; the resulting files are the wildly popular MP3 file used by digital music devices around the world.
Otherwise, MPEG-1 and MPEG-2 are not widely used in Web content.
On the internet, perhaps the most common application of the MPEG standard is for [MPEG-1 Audio Layer III](https://en.wikipedia.org/wiki/MPEG-1), commonly known as MP3, sound data. These MP3 files are wildly popular with digital music devices around the world, even though MPEG-1 and MPEG-2, as a whole, are not widely used in other web content.

The main differences between MPEG-1 and MPEG-2 take place in the media data formats rather than the container format.
MPEG-1 was introduced in 1992; MPEG-2 was introduced in 1996.
Expand Down Expand Up @@ -1041,22 +1037,13 @@ The relative importance of each will depend on your needs, your license requirem

### Guidelines

The best choice also depends on what you'll be doing with the media.
Playing back media is a different thing than recording and/or editing it.
If you're going to be manipulating the media data, using an uncompressed format can improve performance, while using a lossless compressed format at least prevents the accumulation of noise as compression artifacts are multiplied with each re-compression that occurs.
When selecting the appropriate media format, your decision should depend on your intended usage. Playing back media is different from recording or editing it. For manipulation, uncompressed formats can improve performance, while lossless compression prevents the accumulation of noise from repeated recompression.

- If your target audience is likely to include users on mobile, especially on lower-end devices or on slow networks, consider providing a version of your media in a 3GP container with appropriate compression.
- If you have any specific encoding requirements, make sure the container you choose supports the appropriate codecs.
- If you want your media to be in a non-proprietary, open format, consider using one of the open container formats such as FLAC (for audio) or WebM (for video).
- If for any reason you are only able to provide media in a single format, choose a format that's available on the broadest selection of devices and browsers, such as MP3 (for audio) or MP4 (for video and/or audio).
- If your media is audio-only, choosing an audio-only container format likely makes sense.
Now that the patents have all expired, MP3 is a widely supported and good choice.
WAVE is good but uncompressed, so be aware of that before using it for large audio samples.
FLAC is a very good choice, due to its lossless compression, if the target browsers all support it.

Unfortunately, neither of the relatively major lossless compression formats (FLAC and ALAC) are universally supported.
FLAC is the more broadly supported of the two, but is not supported by macOS without additional software installed, and is not supported at all on iOS.
If you need to offer lossless audio, you may need to provide both FLAC and ALAC to get close to universal compatibility.
- If your media is audio-only, choosing an audio-only format likely makes sense. See below for a comparison of the various audio-only formats.

### Container selection advice

Expand All @@ -1066,26 +1053,93 @@ Be sure to consider the needs of your application and your organization before s

#### Audio-only files

| If you need… | Consider using this container format |
| --------------------------------------------- | ------------------------------------ |
| Compressed files for general-purpose playback | MP3 (MPEG-1 Audio Layer III) |
| Losslessly compressed files | FLAC with ALAC fallback |
| Uncompressed files | WAV |
<table>
<thead>
<tr>
<th>Need</th>
<th>Format</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Compressed files for general-purpose playback</strong></td>
<td><strong>MP3 (MPEG-1 Audio Layer III)</strong></td>
<td>Widely compatible and recognized; uses lossy compression to provide a good balance between file size and audio quality.</td>
</tr>
<tr>
<td rowspan="2"><strong>Lossless compression</strong></td>
<td><strong>FLAC (Free Lossless Audio Codec)</strong></td>
<td>Offers lossless compression, ensuring that the original audio remains intact while reducing file size.</td>
</tr>
<tr>
<td><strong>ALAC (Apple Lossless Audio Codec)</strong></td>
<td>Similar to FLAC but designed for Apple devices; it's a great fallback when working within the Apple ecosystem.</td>
</tr>
<tr>
<td rowspan="2"><strong>Uncompressed files</strong></td>
<td><strong>WAV (Waveform Audio File Format)</strong></td>
<td>Contains uncompressed PCM audio, delivering the highest fidelity at the cost of larger file sizes.</td>
</tr>
<tr>
<td><strong>AIFF (Audio Interchange File Format)</strong></td>
<td>Comparable to WAV in terms of quality and file size, though it's often favored on Apple platforms.</td>
</tr>
</tbody>
</table>

Now that MP3's patents have all expired, the choice of audio file format has become much easier to make.
It's no longer necessary to choose between MP3's broad compatibility and the need to pay royalties when using it.

Unfortunately, neither of the relatively major lossless compression formats (FLAC and ALAC) are universally supported.
FLAC is the more broadly supported of the two, but is not supported by macOS without additional software installed, and is not supported at all on iOS.
If you need to offer lossless audio, you may need to provide both FLAC and ALAC to get close to universal compatibility.

#### Video files

| If you need… | Consider using this container format |
| --------------------------------------------------- | --------------------------------------------------- |
| General purpose video, preferably in an open format | WebM (ideally with MP4 fallback) |
| General purpose video | MP4 (ideally with WebM or Ogg fallback) |
| High compression optimized for slow connections | 3GP (ideally with MP4 fallback) |
| Compatibility with older devices/browsers | QuickTime (ideally with AVI and/or MPEG-2 fallback) |
<table>
<thead>
<tr>
<th>Need</th>
<th>Format</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>General purpose video (preferably open format)</strong></td>
<td><strong>WebM</strong></td>
<td>
Designed for modern web usage, WebM is an open, royalty-free container that offers efficient compression and native support in most browsers.
</td>
</tr>
<tr>
<td><strong>General purpose video</strong></td>
<td><strong>MP4</strong></td>
<td>
MP4 is the industry standard for video content, widely supported across devices and browsers.
</td>
</tr>
<tr>
<td><strong>High compression for slow connections</strong></td>
<td><strong>3GP</strong></td>
<td>
Optimized for mobile devices and low-bandwidth environments, 3GP delivers acceptable video quality under constrained conditions.
</td>
</tr>
<tr>
<td><strong>Compatibility with older devices/browsers</strong></td>
<td><strong>QuickTime</strong></td>
<td>
QuickTime is a legacy container originally popular on Apple platforms. It is still commonly produced by macOS video recording software.
</td>
</tr>
</tbody>
</table>

These suggestions make a number of assumptions.
You should carefully consider the options before making a final decision, especially if you have a lot of media that will need to be encoded.
Very often, you would want to provide multiple fallback options for these formats—for example, MP4 fallback for WebM or 3GP, or AVI for QuickTime.

## Maximizing compatibility with multiple containers

Expand Down