← Websites
🎧
Music Artist Page with Audio Player
A musician's landing page with a real, working custom audio player for a track list.
🟡 MediumDifficulty
3-4 hoursTime
JavaScript, TypeScriptLanguages
What you're building
A landing page for a fictional music artist featuring a hero banner, a tour dates list, and a fully custom audio player (not the default browser widget) with play/pause, a track list you can click to switch songs, a progress bar you can scrub, and a running time display - built entirely on the HTML5 Audio API.
What you'll unlock 🔓
You'll need
- Basic HTML
- Basic CSS
- Basic JavaScript
🗺️ Build roadmap
01 Build the hero and bio section
→
02 Add tour dates list
→
03 Build the custom player UI
→
04 Wire up play/pause
→
05 Add the scrubbable progress bar
→
06 Add track switching
→
07 Polish and handle edge cases
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free