A modern Apple Music–inspired web interface built using HTML, CSS, and minimal JavaScript, focusing on clean UI, smooth interactions, and macOS-style design aesthetics.
This project is actively under development and will evolve into a full-stack music streaming application
👉 Live Website:
https://anu-apple-music.vercel.app/
This project showcases my frontend development skills by recreating the look and feel of Apple Music’s “Listen Now” page.
The current version emphasizes layout accuracy, UI polish, and user experience, while keeping the codebase clean and scalable for future updates.
Due to limited development time, JavaScript usage is currently minimal (approximately 10%), and is focused only on essential functionality such as audio playback and basic interactions.
- 🎧 Apple Music–style dark theme UI
- 🧊 macOS-style frosted glass sidebar
- 📜 Horizontal scrolling rows (albums, playlists, charts)
- 🎵 Real audio playback using HTML5 Audio API
▶️ Bottom music player with Play / Pause controls- ⌨️ Keyboard navigation highlights (accessibility)
- ⚡ Live deployment using Vercel
- HTML5 – semantic markup and structure
- CSS3 – Flexbox, Grid, animations, glassmorphism
- JavaScript (Vanilla) – basic audio control & interactions
- Vercel – deployment and hosting
apple-music-clone/
│
├── index.html
├── style.css
├── script.js
│
├── audio/
│ ├── song1.mp3
│ ├── song2.mp3
│ ├── song3.mp3
│ └── song4.mp3
🚧 Project Status & Development Notes JavaScript is currently used only for essential functionality The bottom play button works, and sample songs are included Images may change on page refresh, as AI-generated placeholder images were used during rapid UI prototyping.
🔮 Future Enhancements (Planned)
🎶 Full song selection logic (play selected song) 🖼 Stable image assets 🧠 Increased JavaScript usage 🔐 Backend integration (users, playlists, likes) 🌐 Full-stack music streaming platform This project will be fully upgraded in the coming weeks
📌 Inspiration & Disclaimer
UI inspired by Apple Music (macOS). This project is created for educational and portfolio purposes only. No commercial use intended.
Author
Anu Full stack Developer (in progress) Built with ❤️.
📜 License
This project is licensed under the MIT License.
⭐ If you like this project, consider giving it a star — it really helps!