What You'll Build
In this tutorial, you'll build a modern JavaScript music player entirely from scratch — no libraries, no frameworks, just clean HTML, CSS, and vanilla JavaScript. The result is a production-quality audio player with a dynamic playlist, full playback controls, and animated visual effects.
This project is ideal if you want to practice DOM manipulation, event-driven programming, and the HTML5 Audio API — all in one real-world project.
Key Features of This Music Player
Get the Source Code
The full source code is split across three files — index.html, style.css, and
script.js.
Explore the code below or wait for the countdown to get the GitHub Gist link.
/* Loading source code... */// Loading source code...index.html in your browser. No server or build process required —
the site runs immediately.
How It Works — Step by Step
Let's break down the eight core building blocks of this JavaScript music player so you fully understand what each part does.
Songs Data Structure
A JavaScript array stores each song as an object with title, artist,
cover, and src properties. This flat structure makes it trivial to add
tracks — just push a new object into the array.
Centralized State Object
A single state object tracks isPlaying, currentIndex,
isShuffle, isRepeat, and volume. Centralizing state
prevents bugs from scattered variables and makes the app easy to reason about.
Playback Controls with the Audio API
togglePlay() calls audio.play() or audio.pause() based on
state.isPlaying. nextSong() and prevSong() update the index
and call loadSong() to swap the audio source and album art.
Seekable Progress Bar
The timeupdate event fires continuously during playback. Each time it fires, the
progress bar's width is recalculated as (currentTime / duration) × 100%. A click
listener on the bar reverses this formula to allow seeking.
Shuffle & Repeat Modes
Shuffle uses Math.floor(Math.random() × songs.length) to pick a random index,
with a loop to avoid the current track. Repeat sets audio.currentTime = 0 and
replays when the ended event fires. Toast notifications confirm mode changes.
Volume Slider & Mute Toggle
An input[type="range"] element controls audio.volume (0–1).
Mute stores the last volume level and sets it to 0. The volume icon swaps between
muted, low, and high dynamically based on the current value.
Dynamic Playlist Rendering
The playlist is built programmatically: the songs array is mapped with Array.forEach()
to create DOM elements, injected into a container, and assigned click listeners that
call loadSong(index) directly.
CSS Animations & Particle Effects
The album art uses a CSS @keyframes spin animation. Particle effects are generated
as absolutely-positioned <span> elements with randomized positions, opacity,
and animation delays — no canvas or library needed.
JavaScript Concepts Used in This Project
This project is a great way to practice these fundamental JavaScript skills:
- HTML5 Audio API —
play(),pause(),currentTime,duration,volume, and audio events liketimeupdateandended. - DOM Manipulation — Dynamically creating,
querying, and updating elements with
querySelector,innerHTML, andstyle. - Event Listeners — Responding to click, input, and audio events in an organized, non-repetitive way.
- State Management — Keeping all mutable values in a single object to avoid bugs and improve readability.
- Array Methods — Using
forEachandMath.random()for playlist rendering and shuffle logic. - CSS Custom Properties & Animations — Using
@keyframes,animation-delay, and transitions for visual effects.
index.html directly as a file:// URL may block
audio loading in some browsers due to CORS policy.
Frequently Asked Questions
How do I build a music player with JavaScript?
timeupdate event to sync the progress bar. Implement shuffle and repeat logic.
Full source code is available in the tabs above.
Can I build this music player without any JavaScript framework?
How does shuffle mode work in JavaScript?
Math.floor(Math.random() * songs.length) to pick a random index.
A while loop ensures the new index doesn't match the current song, preventing the same
track from playing twice in a row.
How do I add a seekable progress bar to an HTML audio player?
timeupdate event on your audio element. Calculate
(audio.currentTime / audio.duration) * 100 and set your progress bar's
width to that percentage. For seeking, add a click listener to the bar:
set audio.currentTime = (clickX / barWidth) * audio.duration.
Is this music player mobile-responsive?
clamp(), percentages),
CSS Grid/Flexbox, and media queries to ensure the player looks and works great on
screens from 320px mobile to large desktop monitors.
How do I add my own songs to this player?
songs array at the top. Add a new
object following the same pattern —
{ title: "...", artist: "...", cover: "path/to/cover.jpg", src: "path/to/audio.mp3" } —
and the player will automatically include it in the playlist.
Conclusion
This music player project demonstrates how far vanilla JavaScript can take you. By combining the HTML5 Audio API, DOM manipulation, CSS animations, and a clean state management pattern, you get a professional, feature-rich audio player — with zero dependencies.
Whether you're a beginner looking to level up or an intermediate developer practicing real-world patterns, this project covers the concepts that matter most. Copy the source code above, add your own tracks, and make it your own.
Found this useful? Share it with other developers, and check out the related projects in the sidebar.