← Back to HTML Course | Chapter 6: Canvas, SVG & Media | Lesson 5 of 6

HTML Audio

Imagine building an online music catalog, but there are no play buttons or controls—just text lists of song titles and lyrics. If users want to hear a track, they have to download the file, open a separate program, and wait for it to load. They would likely give up and leave. HTML audio tags solve this issue. They define a native, lightweight audio player directly inside your webpage, allowing your visitors to stream and listen to music, podcasts, or sound alerts cleanly with a single click. It is the perfect tool for adding background music loops, audio lessons, or voice instructions directly on your page.

In this page:

  1. Embedding Audio Natively
  2. Playback Controls (controls)
  3. Muting and Auto-playing Audio
  4. Optimizing with preload
  5. Selecting the Best Formats
  6. Track Element for Audio Captions
  7. Building an Accessible Audio Player
Syntax
markup 
<audio src="audio-url" controls>
  Fallback text
</audio>

Embedding Audio Natively

To embed an audio file, you use the audio tag. Inside this container, you place source elements pointing to your audio file paths, which allows the browser to select and play the first compatible format it finds.

Note:
  • Offer both MP3 and OGG formats to ensure your audio files play smoothly on all devices.
  • Accepted attributes:
  • src — audio file URL
  • controls — boolean
  • autoplay / loop / muted — booleans
  • preload — none | metadata | auto
Warning: Always write fallback text inside your audio tag to assist users on ancient, unsupported devices.

Example: Embedding Audio Natively

markup 
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

Playback Controls (controls)

By default, browsers hide audio players completely unless you include the controls attribute. The controls attribute tells the browser to display standard system buttons for playing, pausing, adjusting volume, and skipping tracks.

Note:
  • Always include the controls attribute so your users have full control over the audio playback.
  • Accepted values:
  • controls — boolean attribute (present or controls="")
  • Shows play, pause, seek and volume
Warning: Failing to add the controls attribute will make your audio player completely invisible and unclickable on the page.

Example: Playback Controls (controls)

markup 
<audio src="song.mp3" controls></audio>

Muting and Auto-playing Audio

Modern browsers block audio files from auto-playing with sound enabled to protect user experience. To make an audio file start playing automatically on page load, you must include both the autoplay and muted attributes.

Note:
  • Use JavaScript to trigger sound effects in response to user clicks (like clicking a submit button) instead of auto-playing on load.
  • Accepted attributes:
  • autoplay — boolean; blocked by many browsers
  • muted — boolean
  • loop — boolean
Warning: Attempting to auto-play audio files with sound enabled will be blocked by the browser.

Example: Muting and Auto-playing Audio

markup 
<audio src="song.mp3" autoplay muted></audio>

Optimizing with preload

The preload attribute tells the browser how much of the audio file to download in the background when the page loads.

You can set this attribute to none (to save bandwidth), metadata (to download file duration and specs), or auto (to download the entire file).

Note:
  • Use preload="none" on pages with multiple audio players to keep your site loading quickly.
  • Accepted values:
  • none — do not preload
  • metadata — load duration and metadata only
  • auto — browser may load the whole file
  • (empty) — same as auto
Warning: Overusing preload="auto" can waste substantial server bandwidth and slow down page loads for mobile users.

Example: Optimizing with preload

markup 
<audio src="song.mp3" controls preload="none"></audio>

Selecting the Best Formats

Web performance relies heavily on selecting the correct audio format. Use MP3 for maximum compatibility, OGG for high performance open-source compression, or WAV when you need high-fidelity, uncompressed audio.

Note:
  • Provide both MP3 and OGG formats to ensure your audio files play smoothly on all devices.
  • Accepted attributes:
  • source src — file URL
  • source type — audio/mpeg | audio/ogg | audio/wav | audio/mp4 | audio/webm
Warning: WAV files are uncompressed and can be very large; avoid using them for long audio tracks to keep page speeds fast.

Example: Selecting the Best Formats

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

Track Element for Audio Captions

Just like video, the audio element supports the track element for adding captions or subtitles, which is especially valuable for podcasts, interviews, or any spoken content.

Captions let users follow along in noisy environments or when they cannot use sound at all.

Note:
  • Always provide at least an English caption track for any spoken audio content to make it usable without sound.
  • Accepted attributes:
  • kind — subtitles | captions | descriptions | chapters | metadata
  • src — .vtt file URL
  • srclang — language code
  • label — menu text
  • default — boolean
Warning: Not all browsers display audio captions with the same built-in interface as video captions — always test the actual behavior in your target browsers.

Example: Track Element for Audio Captions

markup 
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  <track src="captions.vtt" kind="captions" srclang="en" default>
</audio>

Building an Accessible Audio Player

An accessible audio player always includes visible native controls, a text alternative like a transcript link nearby, and never autoplays with sound, which can be jarring or even disorienting for some users, including people using screen readers.

Note: Link to a full text transcript next to every audio element so users who cannot or prefer not to listen still get the content.
Warning: Autoplaying audio with sound the moment a page loads is one of the most reported accessibility and usability complaints on the web.

Example: Building an Accessible Audio Player

markup 
<audio src="podcast.mp3" controls></audio>
<a href="transcript.html">Read the full transcript</a>
Live Example
Related Topics

HTML Audio/Video Reference · HTML Video · HTML Plug-ins · HTML Media

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to include the controls attribute, leaving your audio player completely invisible on the page.
  2. Attempting to auto-play audio files with sound enabled, which modern browsers will block.
  3. Using large, uncompressed WAV files for long tracks, which slows down your site's load speed.
Chapter Summary
  • The audio tag embeds a native, mobile-friendly media player directly inside your webpage.
  • Always include controls for user convenience, and provide both MP3 and OGG formats to ensure maximum browser support.
  • Use the preload attribute to optimize background loading speeds and save server bandwidth.
Browser Support

HTML5 audio elements and core file formats are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson HTML Video Next Lesson → HTML Plug-ins

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.