GitHubHelp

SadWood/wedding-player

wedding music player

★ 0Forks 0VueGitHub ↗Compare

README

Wedding Player

婚礼仪式现场专用的音乐播放面板，支持上传本地音频、配置播放区间与音量，并通过流畅的控制台快速切换曲目。

功能亮点

  • 🎛️ 音乐控制台：上一首 / 播放 / 下一首 / 停止 / 循环，一键切换顺序或循环模式。
  • 📃 播放列表管理：拖拽排序，当前播放歌曲自动滚动到列表顶部；卡片展示起始时间、时长、总时长、音量与循环状态。
  • 📁 音频导入：拖拽或点击上传任意音频文件，自动解析总时长；public/audio 中的静态资源可批量生成默认歌单。
  • ⚙️ 逐曲配置：编辑显示名称、播放区间（起始 / 时长）、循环与音量。

快速开始

bun install                  # 安装依赖
bun dev                      # 本地开发 (http://localhost:5173)
bun run build                # 类型检查 + 生产构建
bun run preview              # 预览 dist 产物
bun run type-check           # 单独运行类型检查
bun run lint                 # Oxlint + ESLint
bun run format               # Prettier 格式化 src/
bun run generate:default-songs  # 根据 public/audio 生成默认歌单

若已安装 music-metadata，生成脚本会写入精确时长；否则以 0 占位。

目录结构

├── public/                     # 静态资源 (favicon、自定义音频等)
├── src/
│   ├── components/             # AudioPlayer、PlaylistPanel、SongItem 等 UI 组件
│   ├── data/                   # 默认歌单数据 (默认配置 + 自动生成文件)
│   ├── stores/                 # Pinia 播放列表状态管理
│   ├── utils/                  # 时间格式化、localStorage 序列化等工具函数
│   ├── App.vue                 # 页面布局与装饰
│   └── main.ts                 # 入口，挂载 Pinia 与路由
└── scripts/
    └── generate-default-songs.ts  # 默认歌单生成脚本

开发约定

  • 统一使用 <script setup lang="ts"> 与组合式 API，缩进 2 空格。
  • 样式优先使用 Tailwind 原子类，必要时在 index.css 中扩展。
  • 当前未引入自动化测试，提交前请手动验证：
    • 播放 / 暂停 / 顺序与循环模式
    • 歌曲拖拽排序与手动配置（起始、时长、音量）
    • 上传音频后的播放状态是否正常

IDE & 调试建议

  • VS Code + Vue (Official) 插件（建议禁用 Vetur）。
  • 浏览器安装 Vue Devtools，开启自定义对象格式化以便调试 Pinia 状态。

许可证

本项目基于 MIT 许可开源，详情见 LICENSE。欢迎在保留原版权与许可声明的前提下自由使用、修改与分发；若对外商业发布，可按需扩展功能或整合自定义后端服务。

Contributors

SadWood

Issues