ReactJS中切换同站页面时如何保持歌曲播放并同步底部播放栏状态

解决方案 #

解决页面切换歌曲自动暂停问题 #

这个问题的根本原因是音频实例被放在了会随页面/组件切换销毁的子作用域里，只需要把音频相关逻辑抽离到全局顶层作用域即可：

单页应用（SPA，Vue/React/Angular等框架场景）

1. 将Audio实例、当前播放歌曲数据、播放状态统一放在全局状态管理中（如Pinia、Redux、Context API等），全局只实例化一次音频对象，不要在专辑页、歌曲列表页这类页面组件内实例化音频
2. 路由切换时只会卸载页面级组件，根作用域下的音频实例不会被销毁，播放就不会中断
   通用逻辑示例：

// 全局状态定义
const audioStore = {
  audio: new Audio(),
  currentSong: null,
  isPlaying: false
}

// 全局统一调用的播放方法
function handlePlay(song) {
  audioStore.audio.src = song.audioUrl
  audioStore.currentSong = song
  audioStore.audio.play()
  audioStore.isPlaying = true
}

传统多页应用（MPA，跳转刷新整页场景）

二选一实现即可：

• 采用iframe嵌套方案：站点内容放在下层iframe内跳转，音频实例放在顶层父页面，跳转仅刷新iframe，不影响父页面音频
• 接入PJAX无刷新跳转：拦截所有页面跳转请求，异步拉取新页面内容替换当前页的内容区块，不刷新整页，全局音频实例不会被销毁

实现底部全局音乐导航栏 #

和上面的全局音频方案配套实现即可：

1. 将底部导航栏组件放在根页面的顶层结构中，不要放到任何路由子页面里，确保页面切换时该组件不会被卸载
2. 组件直接订阅全局状态中的currentSong和isPlaying变量，状态更新时自动同步展示歌曲名称、切换播放/暂停按钮的状态
3. 导航栏的播放/暂停按钮直接操作全局audio实例，同步修改全局状态即可实现全站点状态同步
   控制逻辑示例：

// 播放状态切换逻辑，绑定到导航栏按钮点击事件
function togglePlayStatus() {
  if (audioStore.isPlaying) {
    audioStore.audio.pause()
    audioStore.isPlaying = false
  } else {
    audioStore.audio.play()
    audioStore.isPlaying = true
  }
}

注意事项 #

• 所有音频操作逻辑都要调用全局封装的方法，不要在页面组件内单独操作音频实例
• 如果需要刷新页面后恢复播放，可以将当前播放歌曲信息存入localStorage，全局状态初始化时读取恢复即可
• 要给全局音频实例添加错误监听，资源加载失败时同步更新全局状态，做对应的异常提示

内容的提问来源于stack exchange，提问作者Live Coder