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.

Key Audio Concepts:
  • Use the <audio> element to embed sound
  • Control playback with JavaScript methods like play() and pause()
  • 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

80%

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

Now Playing: Ambient Piano

More Examples

Explore more JavaScript examples to enhance your web development skills:

Digital Dice

Interactive dice with random number generation

View Example

Counter Timer

Create a countdown timer with JavaScript

View Example

Slide Show

Image slideshow with transition effects

View Example

Video Player

Custom video player with JavaScript controls

View Example