HTML Audio

🎵 What is HTML Audio?

The HTML <audio> element allows you to embed sound files directly into your web pages. Perfect for music, podcasts, sound effects, or any audio content!


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

Audio Element Features

🎛️

Controls

Built-in play, pause, and volume controls

<audio controls></audio>

🔁

Autoplay & Loop

Automatic playback and repeat options

<audio autoplay loop></audio>

🔇

Muted Start

Begin playback without sound

<audio muted></audio>

📱

Multiple Formats

Support for different audio formats

<source src="song.mp3">
<source src="song.ogg">

🔹 Basic Audio Element

Here's how to add a simple audio player to your webpage:

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

Output:

Audio player with standard controls

🔹 Audio Attributes

Control audio behavior with these attributes:

Essential Attributes:

controls: Shows play/pause buttons and volume control
autoplay: Starts playing automatically (often blocked by browsers)
muted: Starts with sound off
loop: Repeats the audio when it ends
preload: How much to load: "none", "metadata", or "auto"

Note: Most browsers block autoplay unless the audio is muted!

<audio 
    controls 
    autoplay 
    muted 
    loop 
    preload="metadata">
    <source src="background-music.mp3" type="audio/mpeg">
    <source src="background-music.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

🔹 Multiple Audio Formats

Support different browsers by providing multiple formats:

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.wav" type="audio/wav">
    <p>Your browser doesn't support HTML audio. 
       <a href="audio.mp3">Download the audio</a> instead.</p>
</audio>

Audio Format Guide:

MP3 (.mp3): Most widely supported, good compression
OGG (.ogg): Open source, good quality
WAV (.wav): Uncompressed, large files but high quality
AAC (.aac): Good compression, supported by modern browsers

Recommendation: Always include MP3 as your primary format!

🔹 JavaScript Audio Control

Control audio with custom buttons using JavaScript:

<audio id="myAudio">
    <source src="song.mp3" type="audio/mpeg">
</audio>

<button onclick="playAudio()">▶️ Play</button>
<button onclick="pauseAudio()">⏸️ Pause</button>
<button onclick="changeVolume(0.5)">🔉 50% Volume</button>

<script>
const audio = document.getElementById("myAudio");

function playAudio() {
    audio.play();
}

function pauseAudio() {
    audio.pause();
}

function changeVolume(volume) {
    audio.volume = volume; // 0.0 to 1.0
}
</script>

🔹 Simple Audio Playlist

Create a basic playlist with JavaScript:

<audio id="playlist" controls>
    <source id="audioSource" src="song1.mp3" type="audio/mpeg">
</audio>

<ul>
    <li><button onclick="changeSong('song1.mp3')">🎵 Song 1</button></li>
    <li><button onclick="changeSong('song2.mp3')">🎵 Song 2</button></li>
    <li><button onclick="changeSong('song3.mp3')">🎵 Song 3</button></li>
</ul>

<script>
function changeSong(songUrl) {
    const audio = document.getElementById("playlist");
    const source = document.getElementById("audioSource");
    
    source.src = songUrl;
    audio.load(); // Reload the audio element
    audio.play();
}
</script>