JavaScript Music Player
Learn to create interactive audio experiences with JavaScript - from basic playback to advanced controls
Introduction to Audio in JavaScript
JavaScript provides powerful tools for working with audio on the web. Using the HTML5 Audio API, you can create rich audio experiences including play/pause functionality, volume control, playlists, and visualizations.
- Use the
<audio>
element to embed sound - Control playback with JavaScript methods like
play()
andpause()
- Adjust volume and playback rate programmatically
- Create playlists and manage multiple tracks
- Visualize audio with the Web Audio API
The examples below demonstrate practical implementations of JavaScript audio controls that you can incorporate into your own projects.
Basic Audio Player
A simple audio player with play/pause controls. This example shows how to create a basic audio interface using the HTML5 Audio element and JavaScript controls.
// Basic Audio Player Implementation const musicPlayer = document.getElementById('music'); const playBtn = document.getElementById('playBtn'); const pauseBtn = document.getElementById('pauseBtn'); function playMusic() { musicPlayer.play(); playBtn.disabled = true; pauseBtn.disabled = false; } function pauseMusic() { musicPlayer.pause(); playBtn.disabled = false; pauseBtn.disabled = true; } // Initialize button states pauseBtn.disabled = true;
Basic Audio Player Demo
Click the buttons to play or pause the music.
Volume Control
Add volume control to your audio player. This example demonstrates how to adjust audio volume dynamically using a range input.
// Volume Control Implementation const volumeControl = document.getElementById('volumeSlider'); function setVolume() { const volume = volumeControl.value / 100; musicPlayer.volume = volume; document.getElementById('volumeValue').textContent = volumeControl.value; } // Initialize volume setVolume();
Volume Control Demo
Playlist Player
Create a playlist player that allows users to select between multiple tracks. This example shows how to manage multiple audio sources and create a track selection interface.
// Playlist Player Implementation const playlist = [ { title: "Ambient Piano", src: "https://assets.codepen.io/4358584/sample-music.mp3" }, { title: "Electronic Beat", src: "https://assets.codepen.io/4358584/sample-music-2.mp3" }, { title: "Classical Strings", src: "https://assets.codepen.io/4358584/sample-music-3.mp3" } ]; const playlistPlayer = document.getElementById('playlistPlayer'); const trackTitle = document.getElementById('trackTitle'); const playlistContainer = document.getElementById('playlistContainer'); let currentTrack = 0; // Create playlist items playlist.forEach((track, index) => { const item = document.createElement('div'); item.className = 'playlist-item'; item.textContent = track.title; item.addEventListener('click', () => { playTrack(index); }); playlistContainer.appendChild(item); }); function playTrack(index) { currentTrack = index; playlistPlayer.src = playlist[index].src; playlistPlayer.play(); // Update UI trackTitle.textContent = `Now Playing: ${playlist[index].title}`; document.querySelectorAll('.playlist-item').forEach((item, i) => { item.classList.toggle('active', i === index); }); playBtn2.textContent = "Pause"; playBtn2.innerHTML = ' Pause'; } function togglePlayPause() { if (playlistPlayer.paused) { playlistPlayer.play(); playBtn2.textContent = "Pause"; playBtn2.innerHTML = ' Pause'; } else { playlistPlayer.pause(); playBtn2.textContent = "Play"; playBtn2.innerHTML = ' Play'; } } function nextTrack() { currentTrack = (currentTrack + 1) % playlist.length; playTrack(currentTrack); } function prevTrack() { currentTrack = (currentTrack - 1 + playlist.length) % playlist.length; playTrack(currentTrack); } // Initialize playTrack(0);
Playlist Player Demo
More Examples
Explore more JavaScript examples to enhance your web development skills: