A responsive, web-based audio player designed to handle local MP3 file uploads with a focus on fluid user interaction. The application parses filename metadata to automatically display artist and track information, providing a clean and immediate listening experience.
The core of the project focuses on robust State Synchronization. Instead of relying on redundant variables that can desync from the audio engine, the interface creates a direct binding to the HTMLAudioElement. This ensures the progress bar and timer are always mathematically accurate to the actual playback frame, regardless of browser lag or buffering.
The UI features a custom-built Asynchronous Seek Engine (Ghost Seeking). When interacting with the progress bar, the visual indicator temporarily detaches from the playback state. This allows users to "scrub" through the timeline smoothly while the audio continues to play uninterrupted, only committing the jump when the mouse is released. The layout handles these dynamic states using a responsive mix of CSS Grid and Flexbox to maintain alignment across different screen sizes.