T

音乐播放器

网页端纯前端音乐播放器

Music Player

Not Playing

Unknown Artist

0:000:00

音乐播放器 工具说明

网页端纯前端音乐播放器

这是一个功能完备、体验流畅的纯浏览器端音乐播放器,利用现代 Web API 实现类原生应用的本地音乐管理与播放体验。

核心功能需求

1. 基础播放控制

  • 核心操作:播放/暂停、上一首/下一首、进度条拖动/点击跳转。
  • 播放模式:顺序播放、随机播放、单曲循环、列表循环。
  • 定时功能:支持设置延迟(如 15/30/60 分钟)后自动停止播放或淡出。
  • 音量控制:支持线性调节,切换曲目时可选平滑淡入淡出。

2. 文件与媒体管理

  • 文件夹加载:通过 File System Access API 一键导入整个本地音乐文件夹(保留目录结构信息)。
  • 元数据解析:自动提取音频文件内嵌的专辑封面(Cover)、曲名、艺术家、专辑名等标签。
  • 数据持久化:使用 IndexedDB 存储文件句柄和解析后的元数据,刷新页面无需重复加载。
  • 实时搜索:支持在当前播放列表中快速查找歌曲或艺人。

3. UI/UX 体验

  • 动态封面:播放时专辑封面平滑旋转,且背景色根据封面主色调自动适配(毛玻璃效果)。
  • 歌词展示:同步读取并显示外部或内嵌的 .lrc 歌词文件,支持歌词点击跳转播放。
  • 响应式布局:完美适配移动端(全屏播放页、手势划动切换)与桌面端(常驻侧边列表)。
  • 系统交互:集成 Media Session API,支持在手机锁屏界面、系统通知栏控制播放。

技术细节

  • 音频引擎:基于 Howler.js 实现高性能音频解码与跨浏览器兼容。
  • 元数据解析:使用 music-metadata-browser 深度解析各类音频格式标签。
  • 本地存储:利用 Dexie.js (IndexedDB 封装) 高效管理大量音频元数据。
  • 性能优化:采用虚拟列表渲染超大播放列表,确保数千首曲目下依然丝滑。

隐私与安全

  • 纯前端处理:所有音频解析、存储和播放均在本地浏览器中完成,绝不上传任何音乐文件到服务器。
  • 安全沙箱:基于浏览器的权限模型,仅在用户授权后访问所选文件夹。