Beat Bridge

Beat Bridge is a feature-rich music player built entirely with HTML, CSS, and vanilla JavaScript without relying on frameworks, libraries, or prebuilt components. The project was created to explore browser APIs, application state management, and interactive UI development while building a complete audio playback experience from the ground up.

The application supports 36 local audio tracks and provides a full music management workflow including playback controls, playlists, queue management, search functionality, bookmarks, keyboard shortcuts, sleep timers, and persistent user preferences. Audio playback is powered by the HTML5 Audio API, while all application logic was manually implemented using modular JavaScript architecture.

A custom queue system allows users to add songs from any playlist or song table and schedule tracks to play automatically after the currently playing song finishes. Multiple playlists can be managed independently, and users can instantly switch between tracks through searchable song collections and dedicated playlist sections.

To improve usability, the player includes complete playback controls such as play, pause, next, previous, automatic track progression, adjustable playback speed from 0.25x to 3.0x, volume controls, and accurate real-time tracking of current and total song duration. Loading states were added to ensure a smoother experience while audio content is being prepared.

One of the major features is persistent state management through localStorage. The application remembers the last played song, playback position, bookmarks, volume settings, playback speed, and user preferences, allowing users to continue listening from the exact point where they left off even after refreshing or reopening the browser.

The project also includes a bookmarking system that allows users to save favorite songs and quickly access them later. A built-in search engine provides instant song filtering, making navigation easier as the music library grows. User listening statistics such as play counts are tracked and displayed within the interface.

Productivity-focused features were added through an extensive keyboard shortcut system containing more than ten shortcuts for playback control, navigation, volume adjustment, playback speed management, sleep timer controls, and quick access to an interactive shortcut guide. The shortcut reference is available through a floating help panel for easier discovery.

A configurable sleep timer system was implemented with predefined durations as well as custom timer options. Once the selected timer expires, playback automatically stops without requiring further interaction from the user.

During development, I worked through challenges involving audio synchronization, queue management, localStorage persistence, keyboard event handling, timer management, playback state restoration, dynamic UI updates, and browser audio behavior. Building Beat Bridge strengthened my understanding of DOM manipulation, event-driven programming, browser APIs, application architecture, state persistence, and creating complete interactive applications using only core web technologies.