Practical Exercise 13: Integrating Audio into HTML
Discover how to insert sound files into your web pages using the <audio> tag. This practical exercise teaches you how to play audio in HTML with custom controls and modern compatibility.
Activity
Insert an audio file using the <audio> tag. Inside a folder, you should have your HTML file and your audio file, which can be in a subfolder. Use the MP3 format preferably, as it is smaller and offers good quality.
Interactive Solution
Solution with complete HTML code
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Audio Integrado</title>
</head>
<body>
<h1>Audio</h1>
<audio controls>
<source src="audio/mi_audio.mp3" type="audio/mpeg" />
Tu navegador no soporta la reproducción de audio.
</audio>
</body>
</html>
Variants of the Same Exercise
Variant 1: Multiple Sources for Maximum Compatibility
Each browser supports different audio formats. To ensure your audio plays in all browsers, provide multiple formats with <source>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Multi-Format Audio</title>
</head>
<body>
<h1>Podcast</h1>
<audio controls preload="metadata">
<!-- The browser picks the first format it supports -->
<source src="audio/podcast.mp3" type="audio/mpeg" />
<source src="audio/podcast.ogg" type="audio/ogg" />
<source src="audio/podcast.wav" type="audio/wav" />
<!-- Fallback if no format works -->
<p>
Your browser doesn't support HTML5 audio.
<a href="audio/podcast.mp3">Download episode</a>
</p>
</audio>
</body>
</html>
The browser tests each <source> in order and uses the first format it recognizes. MP3 is the most universal, followed by OGG (open-source) and WAV (uncompressed, very large files).
Variant 2: Background Ambient Audio
Ideal for background music on websites, presentations, or immersive experiences. The audio plays automatically, in a loop, and without visible controls.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Background Audio</title>
<style>
body {
font-family: sans-serif;
text-align: center;
padding: 60px 20px;
}
.toggle-btn {
padding: 12px 28px;
font-size: 16px;
background: #333;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
margin-top: 20px;
}
.toggle-btn:hover {
background: #555;
}
</style>
</head>
<body>
<h1>Ambient Sound</h1>
<p>This site has background music to enhance the experience.</p>
<!-- autoplay: plays on load | loop: repeats infinitely | muted: required for autoplay -->
<audio id="audio-fondo" autoplay loop muted>
<source src="audio/ambiente.mp3" type="audio/mpeg" />
</audio>
<button class="toggle-btn" onclick="document.getElementById('audio-fondo').muted = !document.getElementById('audio-fondo').muted;">
🔇 Toggle Music On/Off
</button>
</body>
</html>
Key points for background audio:
autoplayonly works withmutedin modern browsersloopautomatically restarts the audio when it ends- Without
controls, the user doesn't see the player (ideal for ambiance) - The button with JavaScript allows the user to control the sound
Variant 3: Podcast with Advanced Controls
When publishing podcast episodes or educational audio, you can use additional attributes for a better experience.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Podcast</title>
</head>
<body>
<h1>Episode 42: Introduction to HTML5</h1>
<p>Duration: 45 minutes | Published: June 10, 2026</p>
<audio
controls
controlsList="nodownload noplaybackrate"
preload="metadata"
>
<source src="audio/episodio-42.mp3" type="audio/mpeg" />
<source src="audio/episodio-42.ogg" type="audio/ogg" />
</audio>
<p>
<a href="audio/episodio-42.mp3" download="episodio-42-divzone.mp3">
⬇ Download episode (MP3, 42 MB)
</a>
</p>
</body>
</html>
Advanced attributes:
controlsList="nodownload"— hides the native player's download buttoncontrolsList="noplaybackrate"— hides the playback speed controlpreload="metadata"— only loads duration and info, saving data
Variant 4: Audio from External URL (CDN)
If you store your audio files on a CDN or external server, use the full URL as src. This is common on sites using services like Amazon S3, Cloudinary, or SoundCloud.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Audio from CDN</title>
</head>
<body>
<h1>External Audio</h1>
<!-- Using an absolute URL to the audio file -->
<audio controls>
<source
src="https://cdn.ejemplo.com/audio/podcast-semanal.mp3"
type="audio/mpeg"
/>
Tu navegador no soporta la reproducción de audio.
</audio>
<p>This audio is loaded from an external server (CDN).</p>
</body>
</html>
Using a CDN for audio files improves loading speed by distributing content globally. Make sure the external server has CORS headers configured (Access-Control-Allow-Origin) or the audio may not load.
Best Practices and Common Mistakes
| ✅ Best Practice | ❌ Common Mistake |
|---|---|
Use preload="metadata" to save bandwidth | Use preload="auto" if the audio is larger than 10 MB |
| Offer MP3 + OGG for cross-browser compatibility | Use only WAV format (huge files, 10x heavier) |
| Include a download link as fallback | Assume all browsers support <audio> |
Add muted when using autoplay | Force autoplay without muted (doesn't work in browsers) |
Use controlsList to limit downloads if needed | Don't inform the user of the file duration and size |
Frequently Asked Questions (FAQ)
Which audio format is best: MP3, OGG, or WAV?
MP3 is the most universally compatible format. OGG (Vorbis) is open-source and patent-free, supported by all browsers except Safari in some older versions. WAV has no compression, so files are up to 10 times larger — only use it if you need lossless studio quality.
Why doesn't my audio play in Safari?
Safari has strict restrictions on autoplay and sometimes doesn't support OGG. For maximum compatibility: 1) put MP3 as the first <source>, 2) don't use autoplay without muted, 3) make sure the server accepts range requests (HTTP 206 Partial Content) for streaming.
Can I protect audio from being downloaded?
Not completely. The controlsList="nodownload" attribute hides the download button in Chrome, but a technical user can always access the file URL from the source code or developer tools. For real protection, you need server-side solutions like temporary tokens or encrypted streaming (HLS/DASH).
Does HTML audio affect SEO?
Audio itself doesn't directly affect SEO, but Google can index audio content if it's accompanied by text transcripts. To improve accessibility and SEO, always include a summary or transcript of the audio content on the same page.
🎵 Want to know more about multimedia tags? Explore HTML Elements and Tags to learn about all the audio, video, and iframe options available.