React JS路由跳转时当前播放歌曲暂停，如何实现歌曲持续后台播放？

核心原因 #

这个问题的根本原因是音频播放实例被绑定在了路由匹配的页面组件内部，路由切换时对应页面组件卸载，播放器实例也跟着被销毁，播放自然中断。

可行实现方案 #

方案1：将播放器实例提升到路由组件外层 #

这是最直接、易维护的方案：

• 把音频播放相关的状态（当前播放歌曲、播放进度、音量、播放状态等）和Audio实例统一放到路由外层的公共位置，该位置的实例不会随着路由切换被销毁
• 页面内的播放控制按钮仅调用公共层暴露的播放、暂停、切歌方法即可，无需自行维护音频实例
• 如果你使用的是react-router v6 版本，应用结构参考如下：

// App.jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Navbar from './components/Navbar'
import PlayerBar from './components/PlayerBar' // 全局固定的底部播放控制条
import Home from './pages/Home'
import Search from './pages/Search'
import Playlist from './pages/Playlist'
import { PlayerProvider } from './context/PlayerContext'

function App() {
  return (
    <PlayerProvider> {/* 全局播放状态放在最外层，不随路由销毁 */}
      <Router>
        <Navbar />
        <div className="page-content">
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/search" element={<Search />} />
            <Route path="/playlist/:id" element={<Playlist />} />
          </Routes>
        </div>
        <PlayerBar /> {/* 固定在底部的播放条，不随路由切换卸载 */}
      </Router>
    </PlayerProvider>
  )
}

• 全局播放状态可以用Context API或者Redux、Zustand这类状态管理器实现，用Context API的示例如下：

// context/PlayerContext.js
import { createContext, useContext, useRef, useState } from 'react'

const PlayerContext = createContext()

export function PlayerProvider({ children }) {
  const audioRef = useRef(new Audio()) // 全局唯一的音频实例，不会随路由销毁
  const [currentTrack, setCurrentTrack] = useState(null)
  const [isPlaying, setIsPlaying] = useState(false)

  const play = (track) => {
    if (track?.url !== currentTrack?.url) {
      audioRef.current.src = track.url
      setCurrentTrack(track)
    }
    audioRef.current.play()
    setIsPlaying(true)
  }

  const pause = () => {
    audioRef.current.pause()
    setIsPlaying(false)
  }

  return (
    <PlayerContext.Provider value={{ audioRef, currentTrack, isPlaying, play, pause }}>
      {children}
    </PlayerContext.Provider>
  )
}

export function usePlayer() {
  return useContext(PlayerContext)
}

• 任意页面要触发播放，直接调用usePlayer()拿到play方法即可，路由切换不会影响外层的audioRef实例，播放会一直持续。

方案2：封装独立单例播放器（适合复杂项目） #

如果你的项目有更复杂的播放逻辑（比如支持退出页面后后台播放、记忆播放进度），可以把播放器逻辑封装成独立的单例类，不和React组件生命周期绑定：

// utils/audioPlayer.js
class AudioPlayer {
  constructor() {
    if (AudioPlayer.instance) {
      return AudioPlayer.instance
    }
    this.audio = new Audio()
    this.currentTrack = null
    this.isPlaying = false
    AudioPlayer.instance = this
  }

  play(track) {
    if (track?.url !== this.currentTrack?.url) {
      this.audio.src = track.url
      this.currentTrack = track
    }
    this.audio.play()
    this.isPlaying = true
  }

  pause() {
    this.audio.pause()
    this.isPlaying = false
  }
}

export default new AudioPlayer()

• 这个单例实例在整个应用生命周期内只会创建一次，不管组件怎么卸载重建都不会影响播放，你只需要在需要同步播放状态到UI的组件里监听实例的播放事件更新状态即可。

避坑提示 #

• 不要把<audio>标签写在任意路由对应的页面组件内，一定会随着组件卸载被销毁
• 如果用了框架级的路由懒加载，注意不要把全局播放器相关的代码拆进懒加载包，确保首屏就加载完成
• 如果需要支持移动端后台播放，还要额外配置媒体会话API，但和路由切换的问题不冲突

内容的提问来源于stack exchange，提问作者faijan memon