HTML Audio

Understanding HTML Audio

The HTML <audio> element embeds sound directly into a webpage without requiring a separate browser plugin.

Audio can be supplied with the src attribute or one or more <source> elements, while attributes such as controls, autoplay, loop, muted, and preload control playback behavior.

The <audio> Element

The <audio> element represents sound content such as music, narration, interviews, sound effects, or other audio recordings.

<audio src="/audio/example.mp3" controls></audio>

The src attribute identifies the audio file, while controls tells the browser to display its built-in playback controls.

Audio Controls

The boolean controls attribute displays the browser's built-in audio controls so users can operate the audio themselves.

<audio src="/audio/example.mp3" controls></audio>

The exact controls vary by browser but commonly include play and pause, a playback position, volume controls, and information about the audio duration.

For most ordinary embedded audio, providing controls gives users the clearest way to decide whether and when the audio should play.

Audio Sources

Instead of placing a single file in the src attribute, one or more <source> elements can be placed inside the <audio> element.

<audio controls>
  <source src="/audio/example.mp3" type="audio/mpeg">
  <source src="/audio/example.ogg" type="audio/ogg">
</audio>

The browser examines the available sources in order and can use the first source it supports. The type attribute identifies the media type of each file and can help the browser determine whether it can play that source.

Audio Formats

Common web audio formats include MP3, Ogg Vorbis, WAV, and AAC. Browser support varies by format, codec, and browser version, although widely used formats such as MP3 have broad modern browser support.

<source src="/audio/example.mp3" type="audio/mpeg">
<source src="/audio/example.ogg" type="audio/ogg">

When broad compatibility is important, providing appropriate alternative sources can give the browser another format to use if the preferred source cannot be played.

Autoplay and Muted Audio

The boolean autoplay attribute requests that audio begin playing automatically when it is ready.

<audio src="/audio/example.mp3" controls autoplay></audio>

Modern browsers commonly restrict autoplay with sound, so the presence of autoplay does not guarantee that playback will begin automatically.

The boolean muted attribute sets the audio's initial muted state.

<audio src="/audio/example.mp3" controls autoplay muted></audio>

Even when autoplay is technically permitted, unexpected audio can be distracting or disruptive. User-initiated playback is generally the better choice for ordinary webpage audio.

Looping Audio

The boolean loop attribute causes the audio to start again automatically after it reaches the end.

<audio src="/audio/example.mp3" controls loop></audio>

Looping can be useful for certain sound effects or repeating audio, but continuous sound should be used carefully and users should have a clear way to stop it.

Preloading Audio

The preload attribute provides a hint about how much audio data the browser should load before the user begins playback.

<audio src="/audio/example.mp3" controls preload="metadata"></audio>

The commonly used values are none, metadata, and auto.

• none suggests that the browser should not preload the audio.
• metadata suggests loading information such as the audio duration without downloading the complete file.
• auto suggests that the browser may preload the audio file.

The attribute is a hint rather than a command, so the browser may make a different loading decision based on factors such as user preferences or network conditions.

Fallback Content

Content placed between the opening and closing <audio> tags can provide a fallback for browsers that cannot use the audio element.

<audio controls>
  <source src="/audio/example.mp3" type="audio/mpeg">
  Your browser does not support the HTML audio element.
</audio>

A fallback can also provide a direct link to the audio file when that is appropriate.

<audio controls>
  <source src="/audio/example.mp3" type="audio/mpeg">
  <a href="/audio/example.mp3">Download the audio file</a>
</audio>

Audio Accessibility

Audio that contains spoken information should have an accessible text alternative so users who cannot hear the recording can still access its content.

For prerecorded audio containing speech, providing a transcript is often an effective way to make the same information available as text. The transcript should include important spoken content and other meaningful sounds when they are necessary for understanding the recording.

Users should also be able to control playback, and important information should not depend on audio alone.

HTML Audio Example

The following example demonstrates the HTML audio element with browser playback controls. Try changing attributes such as loop, muted, and preload in the editor and observe how the audio behaves.

HTML Audio Best Practices

• Provide playback controls when users need to start, stop, seek, or adjust audio.
• Avoid automatically playing audio with sound unless there is a strong reason for doing so.
• Use appropriate audio formats and provide alternative sources when compatibility requires them.
• Use the type attribute on <source> elements to identify the media type.
• Consider file size and loading behavior when choosing a preload value.
• Provide transcripts or other appropriate text alternatives for meaningful spoken audio.
• Make sure important information is not available only through sound.

Summary

The HTML <audio> element embeds sound directly into a webpage. Audio files can be supplied with src or nested <source> elements, while attributes such as controls, autoplay, muted, loop, and preload control playback and loading behavior.

Effective audio content should give users control over playback, use suitable file formats, consider download size and browser behavior, and provide accessible alternatives for meaningful audio information.