TrackNode - Music Player
TrackNode is a lightweight and responsive music player built entirely with HTML, Tailwind CSS, and plain JavaScript. It supports essential features like play/pause, next/prev, seek, volume control, and displays song metadata dynamically.
No Preview Available | Github
Tech Stack
Frontend:
HTML
Tailwind CSS
JavaScript
Backend:
Database:
ORM:
Tools:
Git
GitHub
VSCode
Deployment:
GitHub Pages
What the project is?
TrackNode is a custom music player UI with functional audio controls. It showcases dynamic rendering of song details, playlist looping, progress tracking, and responsive design—all without any external frameworks.
Why I built this?
I wanted to build a full UI-driven interactive project using only vanilla technologies to strengthen my JavaScript fundamentals, without depending on React or frameworks. It was a good way to focus purely on DOM, events, and CSS.
What problem it solves?
TrackNode demonstrates that rich and interactive user interfaces can be built without complex stacks. It’s perfect for learning how media elements work and how to control them entirely with JavaScript.
Key Features
What I Learned / Challenges
Improved my understanding of the HTML5 <audio> API, dynamic DOM manipulation, and responsive layouts with Tailwind CSS. Faced challenges in syncing UI updates with audio events like timeupdate and handling edge cases like song end and autoplay.