HTML · Module 06 · Lesson 25 of 54

Native Audio Playback

What is the Audio Element?

Think of a cassette player. To listen to a tape, you need the cassette player (the <audio> tag), some controls (play, pause, volume knobs), and the physical tape itself inserted inside (the <source> tag).

In HTML, we embed sound files using the <audio> tag:

controls: An attribute that displays the native browser play, pause, progress bar, and volume controls.

<source>: Nested inside <audio> to specify the path (src) and the file type (type).

Why does it matter?

Adding native audio elements allows visitors to listen to podcasts, music tracks, or sound snippets directly on your site without installing third-party players or plugins.

How to write it

Create the audio container with controls and nest the source file:

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

▶ Play

0:42

Common Mistakes

Forgetting the controls attribute: If you write <audio> without controls, the browser will render absolutely nothing on the screen! The sound file will load in the background, but the user won't be able to play it.

Forgetting the type attribute on the source: Specifying type="audio/mpeg" helps the browser know if it can play the format before downloading it.

Quick Reference

<audio controls> — Outer audio block.

<source src="file.mp3" type="audio/mpeg"> — Nested track configuration.

Your Task

Create an `<audio>` tag with the `controls` attribute. Inside it, place a `<source>` with `src="track.mp3"` and `type="audio/mpeg"`.

index.html

Type code above to start the lesson.

Live Preview