muc1muc2

播放器介绍文档

  去年利用DeepSeek，手搓了一个html网页音乐播放器，基本上还算满意。因为添加歌曲要服务器修改文件，比较麻烦，所以这两天又用腾讯的小龙虾增加了添加歌曲的功能。初步实现了添加歌曲和歌词功能。

项目概述

碧落山水间品清韵悠扬 是一款以中国风为主题的在线音乐播放器，由 子夜歌 开发和维护。

核心功能

🎵 音乐播放

  • 支持 MP3 / AAC / M4A 三种音频格式，根据文件扩展名自动切换音频源
  • 播放 / 暂停 / 上一首 / 下一首完整控制
  • 音量调节
  • 进度条点击跳转
  • 播放模式：顺序播放 / 循环播放 / 随机播放

📜 歌词同步

  • 自动加载同目录下的 .lrc 歌词文件
  • 支持 [mm:ss.xx] 和 [mm:ss] 两种时间标签格式
  • 自动解析毫秒（2位=厘秒 / 3位=毫秒）
  • 当前歌词行高亮，自动滚动居中
  • 修复：歌词加载时显示占位文字被覆盖的 bug

🎨 界面设计

  • 中国风主题配色（墨绿、深红、古铜色调）
  • 左侧歌曲列表 + 右侧播放区双栏布局
  • 响应式设计，适配桌面 / 平板 / 手机
  • 播放中歌曲高亮显示

🔧 管理后台（admin.php）

  • 密码保护（默认密码：123321）
  • 添加 / 删除歌曲（编辑 songs.json）
  • 上传 / 更新歌词文件（.lrc）
  • 删除歌曲时自动清理本地歌词文件（保留外部链接歌词）
  • PRG（Post-Redirect-Get）模式，防止表单重复提交

文件结构

127.0.0.1/
├── index.html      # 主页面，HTML 结构
├── audio.js       # 播放器核心逻辑（ES6 Module）
├── audio.css      # 样式表
├── songs.json     # 歌曲数据（50首歌曲）
├── songs.php      # 动态读取 songs.json 输出 JS
├── admin.php      # 管理后台
├── .htaccess      # Apache 伪静态配置
├── 404.html       # 404 错误页面
└── music/          # 音乐文件目录
    ├── *.mp3 / *.aac / *.m4a
    └── *.lrc       # 歌词文件

技术亮点

DOM 复用优化

歌词渲染采用 DOM 节点缓存机制，避免频繁 innerHTML 操作造成页面回流，提升滚动性能。

数据与视图分离

歌曲数据统一存储在 songs.json，通过 songs.php 动态加载，无需修改 JS 代码即可管理歌曲列表。

跨平台兼容

  • fetch API 加载歌词，支持本地文件和外部 URL
  • 兼容 Windows（PHPStudy）和 Linux（Nginx/Apache）环境
  • LRC 歌词解析兼容多种换行符（\r\n / \n）

作者的话

本播放器专为传播中国风音乐而设计，界面素雅，声韵悠长。愿每一位聆听者都能在这片碧落山水间，寻得片刻清宁。