站点升级手记 04：让音乐在站内一直播放，播放器状态同步怎么做
问题从多个播放器开始
网站里曾经同时存在底部播放器、独立音乐页播放器和 Gallery 播放器。它们各自能播放，但状态不同步：底部点了播放，页面播放器不知道；随机切歌后进度乱跳；更严重时，多个音频实例会同时播放。
这类问题不是样式问题，而是状态所有权问题。只要每个播放器都认为自己是主播放器，就一定会出现互相打架。
统一播放状态
升级后把播放状态抽象成一个共享状态：当前歌曲、播放/暂停、当前时间、总时长和随机切歌结果。不同位置的播放器只负责展示和控制，不再各自维护一套互不相认的音频。
底部播放器、独立音乐页和 Gallery 都监听同一组状态变化。一个地方播放，其他地方同步按钮和进度；一个地方切歌，其他地方更新封面和标题。
- 切歌前停止旧音频，避免多首歌叠在一起。
- 进度条更新要防抖，避免随机切歌后时间来回跳。
- APlayer 对空 TimeRanges 比较敏感，需要处理未加载完成的边界。
- 页面切换时保留音频状态，用户不离开网站就不主动中断播放。
体验上的收益
这个功能让网站更像一个完整的空间，而不是一组互相独立的页面。用户在文章、相册、赞助页之间切换时，音乐可以继续播放，页面状态也不会突然断掉。
从工程角度看，它也提醒我：只要组件跨页面存在，就不能用传统“每个页面初始化一次”的思维处理，必须有明确的生命周期和状态归属。
相关推荐
开发者工具
请我喝咖啡
如果内容帮到了你，可以赞赏支持继续更新。
赏