T

Music Player

Online Web Music Player

Music Player

Not Playing

Unknown Artist

0:000:00

Music Player Beschreibung

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 IndexedDB to 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 .lrc lyric 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.js for high-performance audio decoding and cross-browser compatibility.
  • Metadata Parsing: Uses music-metadata-browser for 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.