Skip to main content
前台右下角的全站音乐播放器 + 后台「音乐管理」页(R2 直传、文件名识别、同步删除)。

前台播放器

  • 悬浮按钮:右下角圆形音符按钮,平时缩进窗口外露出一点圆弧,悬停 / 点击即滑出
  • 弹出面板:点击按钮弹出卡片面板 —— 曲目信息 · 可拖动进度条 · 上一首 / 播放暂停 / 下一首 · 音量 · 播放列表(点击切换、当前曲目高亮 + 均衡动画);点面板外部或 ✕ 收起
  • 记忆:自动连播;记忆上次曲目与进度、音量持久化(localStorage),刷新后恢复但不自动出声
  • 自适应:无音乐或接口失败时完全隐藏;后台路由(/admin/write、编辑页)自动收起

后台音乐管理

  • 上传:选择 / 拖拽音频文件,浏览器直传 R2(预签名 URL),显示上传进度;选择文件后按文件名自动识别**「歌曲名-歌手」**预填输入框
  • 列表:行内试听 / 删除(删除与 R2 对象同步);曲目多时列表卡片内滚动、表头吸顶,上传区不随列表滚走
  • 管理端列表请求带 ?_=<时间戳> 穿透 s-maxage 边缘缓存,增删即时可见

上传架构(R2 直传)

  • 音频文件不经过 Worker,规避请求体上限与带宽计费(R2 egress 免费)
  • 环境变量:R2_ACCESS_KEY_ID / R2_SECRET_ACCESS_KEY / R2_ENDPOINT / R2_BUCKET / R2_PUBLIC_BASE
  • 格式白名单:mp3 / m4a / ogg / wav / aac / opus / flac,单文件 ≤ 30MB
  • 降级:未配置 R2 凭据时,读取播放列表仍可用(D1),上传返回 503

API

获取播放列表(公开)

响应:
只读接口带 s-maxage=60 边缘缓存;管理后台以 ?_=<时间戳> 穿透缓存取最新列表。

签发预签名上传 URL(需登录)

请求体:
响应:
  • 预签名 URL 有效期 1 小时,SigV4 + UNSIGNED-PAYLOAD
  • 浏览器拿到后直接 PUT 上传(Content-Type 与响应一致);上传失败时调用删除接口清理孤儿对象(幂等)

注册曲目(需登录)

请求体:

删除曲目(需登录)

  • 先向 R2 发起服务端签名 DELETEx-amz-content-sha256: UNSIGNED-PAYLOAD + x-amz-date,SignedHeaders host;x-amz-content-sha256;x-amz-date),成功后再删除 D1 行
  • R2 删除失败时返回 502 并附 R2 响应片段,D1 行保留(数据一致优先)

表结构