Music Player Web App with Playlist Management

Streaming apps set a high bar for media UI: now-playing screens, queues, playlists and mini-players that survive navigation. This project builds Waveform, a web music player that meets that bar in a single file. The Now Playing view pairs gradient album art with track metadata, an animated visualizer canvas, a progress bar with timestamps, and transport controls including a working play/pause toggle, plus an up-next queue. The Playlists view shows six curated playlists (Workout Mix, Evening Lofi, Road Trip 2026 and more) as cover-art cards, a playlist creation form and a recently-played list. The Library view lists all eight tracks with genre and duration metadata and like states. A fixed bottom player bar with mini art, controls and progress persists across every view — the hallmark of real player architecture.

1. The app loads a catalog: tracks with title, artist, genre, duration and liked state, plus playlists with covers.
2. A playback state machine (current track, playing/paused, progress) drives the UI.
3. The Now Playing view renders art, metadata, the visualizer canvas and transport controls from that state.
4. The visualizer animation loop runs only while playing, freezing on pause.
5. The Playlists view renders cover cards and appends newly created playlists to the grid.
6. The bottom player bar mirrors the same playback state, so it stays in sync on every view.

Tech stack:

• HTML5, CSS3, vanilla JavaScript (ES6)
• Canvas 2D API for the audio visualizer
• Playback state machine (no audio library)
• Gradient album-art system
• Static deployment (no server or database)

• [Now-playing view] Album art, track metadata, animated visualizer, progress bar and transport controls.
• [Animated visualizer] Canvas bars that animate while playing and freeze on pause, driven by play state.
• [Up-next queue] Ordered queue of upcoming tracks rendered from the catalog.
• [Playlist management] Six curated playlists with cover art plus a working playlist-creation form.
• [Song library] Full track table with artists, genres, durations and like states.
• [Persistent player bar] Fixed bottom bar with mini art, controls and progress across all views.
• [Realistic catalog] Eight tracks with believable artists, genres and durations throughout.

• Complete source code (single-file player with all views)
• Realistic 8-track catalog and 6 playlists
• Visualizer and playback-state implementation
• Setup guide (wiring real audio files, Web Audio API analyzers)
• Project report PDF (media UI architecture, state design, methodology)
• PPT presentation for final review
• Viva Q&A preparation document (media apps, canvas animation, state machines)

• Playback state is fully modelled but audio output needs real files wired via the HTML5 audio element (documented extension).
• Progress is demonstrative; real timeupdate binding comes with audio wiring.
• No search backend, streaming or offline caching in this build.
• Single local catalog; no user accounts or synced libraries.