前台播放器
- 悬浮按钮:右下角圆形音符按钮,平时缩进窗口外露出一点圆弧,悬停 / 点击即滑出
- 弹出面板:点击按钮弹出卡片面板 —— 曲目信息 · 可拖动进度条 · 上一首 / 播放暂停 / 下一首 · 音量 · 播放列表(点击切换、当前曲目高亮 + 均衡动画);点面板外部或 ✕ 收起
- 记忆:自动连播;记忆上次曲目与进度、音量持久化(
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 发起服务端签名 DELETE(
x-amz-content-sha256: UNSIGNED-PAYLOAD+x-amz-date,SignedHeadershost;x-amz-content-sha256;x-amz-date),成功后再删除 D1 行 - R2 删除失败时返回
502并附 R2 响应片段,D1 行保留(数据一致优先)
