Music Player Descripción
Web-based Pure Front-end Music Player
A feature-rich, smooth-experience web music player that utilizes modern Web APIs to achieve a native-app-like local music management and playback experience.
Key Features
1. Basic Playback Control
- Core Operations: Play/Pause, Prev/Next, Progress bar dragging/seeking.
- Playback Modes: Order, Shuffle, Single track loop, Playlist loop.
- Timer Function: Supports setting a delay (e.g., 15/30/60 mins) to automatically stop playback or fade out.
- Volume Control: Supports linear adjustment, with optional smooth fade-in/fade-out when switching tracks.
2. File & Media Management
- Folder Import: Import an entire local music folder with one click using the
File System Access API(preserving directory structure). - Metadata Parsing: Automatically extract embedded album art (Cover), title, artist, album name, and other tags from audio files.
- Data Persistence: Uses
IndexedDBto store file handles and parsed metadata, so there's no need to reload after refreshing the page. - Real-time Search: Quickly find songs or artists in the current playlist.
3. UI/UX Experience
- Dynamic Cover Art: The album cover rotates smoothly during playback, and the background color automatically adapts to the cover's primary color (frosted glass effect).
- Lyric Display: Synchronously read and display external or embedded
.lrclyric files, with support for clicking lyrics to seek playback. - Responsive Layout: Perfectly adapted for mobile (full-screen player, gesture switching) and desktop (persistent sidebar playlist).
- System Integration: Integrated with
Media Session API, allowing playback control from lock screens and system notification bars.
Technical Details
- Audio Engine: Based on
Howler.jsfor high-performance audio decoding and cross-browser compatibility. - Metadata Parsing: Uses
music-metadata-browserfor deep parsing of various audio format tags. - Local Storage: Efficient management of large amounts of audio metadata using
Dexie.js(IndexedDB wrapper). - Performance Optimization: Virtual list rendering for large playlists ensures a smooth experience even with thousands of tracks.
Privacy & Security
- Pure Front-end Processing: All audio parsing, storage, and playback are performed locally in the browser. No music files are uploaded to any server.
- Security Sandbox: Based on the browser's permission model, access to selected folders is only granted after user authorization.