explaingit

mirage-bin/mirageplayer

14HTMLAudience · generalComplexity · 1/5ActiveLicenseSetup · easy

TLDR

Windows music player built in plain HTML, CSS, and JavaScript, styled with frosted-glass effects, 21 macaron palettes, a virtual CD, and LRC lyric sync.

Mindmap

mindmap
  root((MiragePlayer))
    Inputs
      MP3 and FLAC files
      LRC lyric files
      ID3v2 metadata
    Outputs
      Audio playback
      Synced lyrics
      Color extracted UI
    Use Cases
      Play a local music library
      Match palette to song art
      Show synced lyrics
    Tech Stack
      HTML
      CSS
      JavaScript
      SVG filter

Things people build with this

USE CASE 1

Play a personal MP3 and FLAC library with synced LRC lyrics

USE CASE 2

Switch between 21 macaron color palettes that follow the active song

USE CASE 3

Demo a frosted-glass HTML/CSS UI with no framework dependencies

Tech stack

HTMLCSSJavaScript

Getting it running

Difficulty · easy Time to first run · 5min

Personal music needs separate LRC files and ID3v2 tags filled in with an outside tool like MusicTag before lyrics and cover art display correctly.

MIT-style license restricted to study use only, with no commercial use permitted.

In plain English

Mirage Player is a music player for Windows built around a visual style the author calls liquid glass plus frosted glass. The README is in Chinese and explains that this is a side project by a Chinese high school student, written using only plain HTML, CSS, and JavaScript, with no framework or library dependency. The repo has 14 stars and HTML is the listed language. The headline feature is the way the player looks. There are 21 preset macaron color palettes covering reds, oranges, yellows, greens, blues, purples, pinks, and grays, with one called Teal as the default. Each palette is defined as a set of five colors that drive an accent color, a background gradient, blurred circles, doodle illustrations, and a dark gradient end. A button in the bottom bar swaps palettes at random, and the songs themselves can trigger a fitting color scheme. The central element on screen is a virtual CD that uses CSS backdrop blur together with an SVG filter for stereoscopic light effects and reacts to the mouse hovering over it. Around this, the player offers a real time audio waveform that follows the active palette, lyrics synced from LRC files with same name matching to the audio file, automatic cover and color extraction from MP3 ID3v2 and FLAC metadata, drag and drop import of folders, album grouping, a playback speed slider from 0.2 to 3 times, a collapsible sidebar, and a responsive layout that adapts to mobile. The README explains how to try it: download the installer from the Releases page, run setup, and import the bundled demo playlist folder. For personal music, it points users to an external site to fetch songs and a separate tool called MusicTag to fill in lyrics, covers, and album info, then place matching LRC files next to the audio. The project is at version 1.0.0.0. Planned future work includes online search, more playback modes, custom themes, and more languages. License is MIT with study use only and no commercial use.

Copy-paste prompts

Prompt 1
Walk me through importing a folder of MP3s plus matching LRC files into MiragePlayer
Prompt 2
Explain how MiragePlayer extracts cover art and accent color from ID3v2 and FLAC tags
Prompt 3
Help me add a 22nd macaron palette and wire it into the random palette button
Prompt 4
Show how the CSS backdrop blur plus SVG filter trick creates the virtual CD effect
Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.