HTML5 Audio

Overview

The HTML5 <audio> element provides a standard way to embed audio in webpages without relying on third-party plugins.

Basic Syntax

<audio src="music.mp3" controls>
    Your browser does not support the audio tag.
</audio>

Audio Attributes

Common Attributes

<audio 
    src="music.mp3"
    controls
    autoplay
    loop
    muted
    preload="auto">
    Your browser does not support the audio tag.
</audio>

Attributes:

• controls - Display audio controls
• autoplay - Auto-play (most browsers restrict this)
• loop - Loop playback
• muted - Mute audio
• preload - Preload strategy (none/metadata/auto)

Multiple Format Support

Provide multiple audio formats for cross-browser compatibility:

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

Audio Formats

Format	MIME Type	Browser Support
MP3	audio/mpeg	Widely supported
Ogg Vorbis	audio/ogg	Firefox, Opera, Chrome
WAV	audio/wav	Widely supported
AAC	audio/aac	Safari, Chrome

JavaScript Control

Basic Control

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

<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="stopAudio()">Stop</button>

<script>
    var audio = document.getElementById("myAudio");
    
    function playAudio() {
        audio.play();
    }
    
    function pauseAudio() {
        audio.pause();
    }
    
    function stopAudio() {
        audio.pause();
        audio.currentTime = 0;
    }
</script>

Volume Control

<audio id="myAudio" src="music.mp3"></audio>

<button onclick="setVolume(0.1)">10%</button>
<button onclick="setVolume(0.5)">50%</button>
<button onclick="setVolume(1.0)">100%</button>

<script>
    var audio = document.getElementById("myAudio");
    
    function setVolume(volume) {
        audio.volume = volume;
    }
</script>

Playback Speed Control

<audio id="myAudio" src="music.mp3" controls></audio>

<button onclick="changeSpeed(0.5)">0.5x</button>
<button onclick="changeSpeed(1.0)">1.0x</button>
<button onclick="changeSpeed(1.5)">1.5x</button>
<button onclick="changeSpeed(2.0)">2.0x</button>

<script>
    var audio = document.getElementById("myAudio");
    
    function changeSpeed(speed) {
        audio.playbackRate = speed;
    }
</script>

Audio Events

<audio id="myAudio" src="music.mp3" controls></audio>
<p id="status"></p>

<script>
    var audio = document.getElementById("myAudio");
    var status = document.getElementById("status");
    
    audio.addEventListener("play", function() {
        status.textContent = "Audio is playing";
    });
    
    audio.addEventListener("pause", function() {
        status.textContent = "Audio paused";
    });
    
    audio.addEventListener("ended", function() {
        status.textContent = "Audio playback ended";
    });
    
    audio.addEventListener("timeupdate", function() {
        var current = Math.floor(audio.currentTime);
        var duration = Math.floor(audio.duration);
        status.textContent = `Progress: ${current}s / ${duration}s`;
    });
    
    audio.addEventListener("volumechange", function() {
        status.textContent = `Volume: ${Math.floor(audio.volume * 100)}%`;
    });
</script>

Playlist Example

<audio id="audio" controls></audio>

<div class="playlist">
    <div class="playlist-item" data-src="song1.mp3">Song 1</div>
    <div class="playlist-item" data-src="song2.mp3">Song 2</div>
    <div class="playlist-item" data-src="song3.mp3">Song 3</div>
</div>

<script>
    const audio = document.getElementById('audio');
    const items = document.querySelectorAll('.playlist-item');
    
    items.forEach(item => {
        item.addEventListener('click', function() {
            items.forEach(i => i.classList.remove('active'));
            this.classList.add('active');
            audio.src = this.dataset.src;
            audio.play();
        });
    });
    
    // Auto-play next song
    audio.addEventListener('ended', () => {
        const current = document.querySelector('.playlist-item.active');
        const next = current.nextElementSibling;
        
        if (next && next.classList.contains('playlist-item')) {
            next.click();
        }
    });
</script>

Best Practices

1. Provide multiple formats for cross-browser compatibility
2. Avoid autoplay to respect user experience
3. Optimize file size by compressing audio files
4. Provide controls to let users control playback
5. Consider mobile devices bandwidth and battery consumption
6. Provide fallback content for unsupported browsers
7. Use appropriate preload strategy to balance performance and UX

Summary

HTML5 Audio element provides powerful functionality for audio playback on webpages. By properly using its attributes and JavaScript API, you can create feature-rich audio experiences, from simple background music to complex audio players and visualizations.