🎵 Music Player Web App

My first website ever. Built with vanilla JavaScript, zero frameworks, and a lot of curiosity about how the DOM actually works.

This is a fully functional music player that taught me the fundamentals of event handling, state management, and real-time UI updates. It's not fancy, but it works—and I built it myself.

✨ What It Does

• Play/Pause – Click to play, click again to pause (so simple, yet so satisfying the first time)
• Skip Forward/Back – Navigate your playlist without lifting a finger
• Seek Bar – Drag to jump to any point in a track; I learned a lot about time calculations here
• Volume Slider – Control the audio level in real time
• Random/Shuffle Mode – Toggle shuffle to mix things up or play sequentially
• Live Time Display – Shows current time and total duration (MM:SS format)—this taught me about setInterval
• Rotating Album Art – The track artwork spins while playing (purely for vibes)
• Dynamic Gradient Backgrounds – Every song gets a random gradient background. I still think this is cool
• Auto-Play Next – When a track ends, the next one plays automatically

🎯 Why This Project

I built this to prove to myself that I could make something interactive from the ground up. No tutorials, no copy-paste. Just HTML, CSS, and JavaScript.

At the time, audio controls felt mysterious. How does pressing "play" actually play audio? How do you keep a progress bar in sync with a playing song? This project taught me the answer: events, state, and a little math.

It's not groundbreaking, but it's real. Every feature works because I made it work.

📋 Built With

• HTML – Semantic markup, nothing fancy
• CSS – For animations (rotating album art, gradient backgrounds, play/pause icon swap)
• Vanilla JavaScript – querySelector, event listeners, setInterval, and a lot of curiosity
• Font Awesome – Icons for the controls

Intentionally no frameworks. I wanted to understand the fundamentals before building abstractions on top of them.

🎼 The Playlist

I preloaded it with songs I actually listen to—9 tracks from artists like The Weeknd, Chris Brown, and others. The tracks are in a simple JavaScript array, which makes it super easy to swap in your own music.

Honestly? I was learning DOM manipulation and trying to finish this project, so I grabbed some tracks online. If you use this, just replace them with your own (or royalty-free alternatives).

🚀 Getting Started

What You Need

• A modern browser (anything made in the last 5 years works)
• Your own audio files—MP3s work best
• Album artwork images (JPGs/PNGs, at least 200x200 is nice)

Setup (It's Simple)

1. Get the code

   git clone <your-repo-url>
   cd music-player

2. Organize your files like this:

   project-root/
   ├── index.html
   ├── style.css
   ├── script.js
   ├── audio/
   │   ├── song1.mp3
   │   └── song2.mp3
   └── icons/
       ├── album1.jpg
       └── album2.jpg
   

3. Update script.js with your tracks:

   const music_list = [
     {
       img: "icons/my-favorite-album.jpg",
       name: "Song Name",
       artist: "Artist Name",
       music: "audio/my-song.mp3"
     },
     // Add as many as you want
   ];

4. Run it

   • Double-click index.html to open it, or
   • Spin up a quick local server:

     python -m http.server 8000

   • Then go to http://localhost:8000 in your browser

🎮 How to Use

Action	How
Play/Pause	Click the play button
Next Track	Click the forward button
Previous Track	Click the back button
Seek	Drag the seek bar or click at a position
Volume	Adjust the volume slider
Random Mode	Click the shuffle icon to toggle
Repeat	Click the repeat icon (if implemented)

🔧 What I Learned (Code Highlights)

The Main Functions

• loadTrack(track_index) – This loads the track's metadata (name, artist, image) and prepares the audio. The first function I really understood by reading my own code months later.

• playTrack() / pauseTrack() – These control playback AND the UI. That's when it clicked for me—audio is separate from the visual feedback. Managing that state consistently was harder than I expected.

• nextTrack() / previousTrack() – Navigation logic with a twist: handles random mode by picking a random index instead of just incrementing. Cool pattern.

• seekTo() – Maps the slider value (0-100) to the actual track duration. Math: (slider value / 100) × total duration. Took me a minute to figure that out.

• setUpdate() – This runs every 100ms to sync the seek bar with playback progress. It also formats the time display. This is where state management gets real.

• random_color() – Generates those random gradient backgrounds. Honestly, this function is a bit hacky (I picked it up from online research), but it works and makes the UI feel alive.

How It Works

The player is event-driven. Every click, pause, or track end triggers something. The setUpdate() function is the heartbeat—it runs on an interval to keep the UI in sync with the audio element. This was my first exposure to thinking about continuous feedback vs. discrete events.

The trickiest part? Keeping track of track_index, isPlaying, and isRandom consistently. State management matters, even in vanilla JS.

🎨 Make It Yours

Swap the Playlist

Just replace the music_list array with your own tracks. Dead simple.

Change the Gradient

The random_color() function generates random hex colors. You can make it more controlled:

// Use a specific palette instead of fully random
const colors = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#FFA07A"];
let color1 = colors[Math.floor(Math.random() * colors.length)];
let color2 = colors[Math.floor(Math.random() * colors.length)];

Tweak the Look

• The rotate animation speed is in the CSS—speed it up or slow it down
• The wave loader animation—also CSS
• The seek bar update frequency—change the 100 in setInterval(setUpdate, 100) to make updates faster or slower

These are the kinds of tweaks that feel magical when you realize you can control them.

📱 Browser Support

• ✅ Chrome/Edge – Works great
• ✅ Firefox – Tested and solid
• ✅ Safari – Should work fine (haven't tested on every version, though)
• ⚠️ Mobile – It works, but it wasn't optimized for touch. The controls are a bit clunky on phones

If you hit a weird bug, let me know.

🐛 What's Not Perfect Yet

• Mobile – It works, but it wasn't built mobile-first. The controls could be touch-friendly
• Repeat Mode – I have the UI ready but didn't finish the logic (it's on my list)
• Keyboard Shortcuts – Spacebar to play/pause would be nice; arrow keys to skip
• Local Storage – Would be cool to remember your volume and shuffle preference between sessions
• Dynamic Playlist – Right now the songs are hardcoded. Adding tracks on the fly would be next-level
• Dark Mode – Because apparently everything needs a dark mode now
• Accessibility – Screen readers could use some love

These aren't bugs, exactly. They're lessons I learned after shipping the first version. Which is the whole point of a first project.

💭 Reflections

When I built this, I had just learned what querySelector did. Event listeners felt like magic. I Googled "how to format time in JavaScript" so many times.

Looking back, I'd do a few things differently (better state management patterns, less DOM manipulation, more organized CSS). But I'm proud of it because it works, and I built every part myself. No tutorial copy-paste—just curiosity and documentation.

If you're looking at this and thinking, "I could do this too," you absolutely can. Start here. Break things. Fix them. That's how I learned.

📄 License

Use this however you like—personal projects, learning, portfolio, whatever. If you share it publicly, a mention would be cool, but no pressure.

---

Built from scratch as my first web development project. No frameworks, no shortcuts—just me and the DOM.