#HTML5 Audio

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

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

<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 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>

<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>

<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 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>

<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>