0Pricing
HTML Academy · Lesson

The audio Element src controls loop autoplay

Embed audio players with native HTML5 attributes.

The audio Element src controls loop autoplay is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Native Audio in HTML5

HTML5 introduced the <audio> element for embedding audio without plugins:

<audio src="podcast.mp3" controls>
  Your browser does not support audio.
</audio>
<!-- controls: show the default player UI (play, pause, volume) -->
<!-- Fallback text is shown to browsers that don't support audio -->

The controls Attribute

The controls attribute displays the browser's built-in audio player:

<!-- Without controls: audio plays but no UI is visible -->
<audio src="bg-music.mp3"></audio>

<!-- With controls: browser shows play/pause, volume, scrubber -->
<audio src="podcast.mp3" controls></audio>

<!-- Always include controls for user-accessible audio
     Unless it is a background ambient sound (use controls anyway for accessibility) -->

The loop Attribute

The loop attribute restarts audio when it ends:

<audio src="bg-music.ogg" controls loop></audio>
<!-- loop is a boolean attribute -->
<!-- Good for: background music, demo soundscapes -->
<!-- Bad UX: loops without user consent are annoying -->

The autoplay Attribute

The autoplay attribute starts playing when the page loads:

<audio src="alert.mp3" autoplay></audio>
<!-- Most modern browsers BLOCK autoplay for audio by default -->
<!-- Exception: autoplay + muted is allowed -->
<!-- Browsers allow autoplay if the user has interacted with the page -->

<!-- The muted workaround: -->
<audio src="bg.mp3" autoplay muted loop></audio>

The muted Attribute

The muted attribute starts the audio muted:

<!-- Muted audio can autoplay in most browsers: -->
<audio src="ambient.mp3" autoplay muted loop></audio>

<!-- User can unmute with the controls -->
<audio src="ambient.mp3" autoplay muted loop controls></audio>

The preload Attribute

The preload attribute hints at how much data to load:

<audio src="podcast.mp3" controls preload="none">...</audio>
<!-- none: don't preload anything (saves bandwidth on mobile) -->

<audio src="short-clip.mp3" controls preload="auto">...</audio>
<!-- auto: preload the entire file (browser decides) -->

<audio src="song.mp3" controls preload="metadata">...</audio>
<!-- metadata: preload only duration and basic info (good default) -->

JavaScript Audio Control

Control audio with JavaScript:

const audio = document.getElementById('my-audio');

// Play:
audio.play();

// Pause:
audio.pause();

// Current time (seconds):
audio.currentTime = 30;  // jump to 30 seconds

// Volume (0 to 1):
audio.volume = 0.5;

// Duration:
console.log(audio.duration);

Audio Events

Common audio events:

audio.addEventListener('play', () => console.log('Playing'));
audio.addEventListener('pause', () => console.log('Paused'));
audio.addEventListener('ended', () => console.log('Finished'));
audio.addEventListener('timeupdate', () => {
  console.log('Position:', audio.currentTime);
});
audio.addEventListener('error', () => console.log('Error loading audio'));

Custom Audio Player

Build a custom player with JavaScript and CSS:

<div class="audio-player">
  <audio id="player" src="podcast.mp3" preload="metadata"></audio>
  <button id="play-btn" aria-label="Play">▶</button>
  <input type="range" id="scrubber" value="0" min="0" max="100">
  <span id="time">0:00</span>
</div>
<script>
const audio = document.getElementById('player');
document.getElementById('play-btn').addEventListener('click', () => {
  audio.paused ? audio.play() : audio.pause();
});
</script>

Accessible Audio

Accessibility requirements for audio:

  • Provide a transcript for all audio content
  • For podcasts: link to a text transcript
  • Auto-playing audio violates WCAG 1.4.2 if it lasts more than 3 seconds
  • Ensure controls are keyboard-accessible (native controls are)

src vs source Element

Specify format alternatives with <source> (next lesson):

<!-- Single format: -->
<audio controls src="podcast.mp3">...</audio>

<!-- Multiple formats: -->
<audio controls>
  <source src="podcast.opus" type="audio/ogg; codecs=opus">
  <source src="podcast.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Quick Check

Which audio attribute shows the browser's built-in player UI?

Recap: audio Element

Audio element essentials:

  • controls — show player UI (almost always include this)
  • loop — restart when finished
  • autoplay — play on load (blocked by most browsers)
  • muted — start muted (enables autoplay in most browsers)
  • preload="metadata" — good default for podcast/music
  • Provide transcripts for accessibility

Frequently asked questions

Is the “The audio Element src controls loop autoplay” lesson free?

Yes — the full text of “The audio Element src controls loop autoplay” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “The audio Element src controls loop autoplay”?

Embed audio players with native HTML5 attributes. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The audio Element src controls loop autoplay” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. The audio Element src controls loop autoplay
  2. The video Element and Aspect Ratio
  3. The source Element for Multiple Formats
  4. Subtitles with track and WebVTT
← Back to HTML Academy