Meliora
沉浸式 · 视听一体的网页音乐播放器
Meliora 是一个基于 Vue 3 + TypeScript + Pinia 构建的现代化网页音乐播放器,致力于把「听音乐」做成一种视听同步的沉浸式体验。它通过实时节拍分析驱动背景呼吸效果,通过封面取色实时切换主题色,让画面与音乐同频共振。
核心理念
播放器不只是一个控件,而是一个被声音「点亮」的舞台。Meliora 把 Web Audio、Document Picture-in-Picture、MediaSession、PWA 等现代浏览器能力编织在一起,让一个网页应用呈现出接近原生 App 的流畅与质感,同时保持对无障碍与减弱动效偏好的尊重。
体验亮点
- 视听同频:Web Audio 实时节拍分析驱动背景呼吸,Worker 异步从封面提取主题色,整页色调随当前曲目流动
- 零延迟切歌:三 Audio 池 + 预加载槽 + 650ms 交叉淡化,曲目切换无停顿、无爆音
- 歌词跟随:LRC 解析(含
[00:00.00-1]扩展标签)+ FLIP 牵引滚动,可独立弹出 Picture-in-Picture 小窗常驻桌面 - 类原生交互:PWA 可安装、MediaSession 锁屏控制、移动端触感反馈、Chrome 工具栏自动隐藏
- 匿名曲库:远程歌单(网易云 / QQ 音乐)与本地音乐自动合并去重,无需账号
- 无障碍优先:遵循
prefers-reduced-motion、focus trap、键盘完全可达
技术构成
- 框架层:Vue 3.5 + TypeScript 6 + Pinia 3,组合式 API 全量使用
- 样式层:SCSS,主题色通过 CSS 自定义属性下发
- 音频层:Web Audio API + AudioBufferSource 池化预加载
- 离线层:Service Worker + Web App Manifest,构建期注入版本化缓存名
- 工程化:Vite 8、Vitest 4、ESLint 10、Prettier 3、Husky + commitlint + lint-staged,Conventional Commits 规范
部署形态
为 Vercel、Netlify、Cloudflare Pages、GitHub Pages 四个平台预置开箱即用的配置,均预设安全响应头、SW 缓存策略与 SPA fallback,构建命令统一为 pnpm build。
适用场景
适合作为个人歌单的展示型播放器、独立音乐人的作品集站点,或是需要在浏览器中获得「类客户端」听感的任何场景。配置入口集中在 src/config/music.ts,把歌单 ID 或本地资源填进去即可拥有一个属于自己的私人电台。
协议
AGPL-3.0-or-later。修改后部署到公网的衍生版本必须向用户提供完整源代码;闭源商用请联系作者协商授权。