React.js实现组件切换歌曲持续播放及底部导航栏状态同步

前置设计思路 #

你之前切换组件歌曲自动暂停的核心原因是audio实例或者播放ref放在了歌曲列表/专辑详情这类路由子组件里，组件卸载时audio实例也被销毁，播放自然中断。同时要实现底部播放栏全局同步，必须把播放相关的状态和能力提升到所有路由组件的外层，这里用React原生的useContext + useReducer实现全局状态管理，不需要引入第三方库，对新手友好。

第一步：创建全局播放上下文 #

1. 新建播放状态管理文件 src/context/PlayContext.js #

import { createContext, useContext, useReducer, useRef, useEffect } from 'react';

// 初始化全局播放状态
const initialState = {
  currentSong: null, // 存储当前播放歌曲的完整信息：{id, name, url, 专辑名...}
  isPlaying: false, // 播放状态标记
};

// 定义状态修改逻辑
const playReducer = (state, action) => {
  switch (action.type) {
    case 'SET_CURRENT_SONG':
      return { ...state, currentSong: action.payload };
    case 'SET_PLAYING':
      return { ...state, isPlaying: action.payload };
    default:
      return state;
  }
};

// 创建上下文实例
const PlayContext = createContext();

// 全局上下文包裹组件，要套在整个应用外层
export const PlayProvider = ({ children }) => {
  const [state, dispatch] = useReducer(playReducer, initialState);
  // 全局唯一的audio实例，切换组件不会被销毁
  const audioRef = useRef(new Audio());

  // 监听歌曲切换，自动加载新歌曲并播放
  useEffect(() => {
    if (state.currentSong) {
      audioRef.current.src = state.currentSong.url;
      audioRef.current.play().catch(err => console.log('播放异常：', err));
      dispatch({ type: 'SET_PLAYING', payload: true });
    }
  }, [state.currentSong]);

  // 暴露给子组件的播放控制方法
  const playSong = (song) => {
    dispatch({ type: 'SET_CURRENT_SONG', payload: song });
  };

  const togglePlay = () => {
    if (audioRef.current.paused) {
      audioRef.current.play();
      dispatch({ type: 'SET_PLAYING', payload: true });
    } else {
      audioRef.current.pause();
      dispatch({ type: 'SET_PLAYING', payload: false });
    }
  };

  return (
    <PlayContext.Provider value={{ ...state, playSong, togglePlay }}>
      {children}
    </PlayContext.Provider>
  );
};

// 自定义调用钩子，简化子组件调用逻辑
export const usePlay = () => useContext(PlayContext);

2. 全局注册上下文 #

在入口文件 src/index.js 中用PlayProvider包裹整个应用：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { PlayProvider } from './context/PlayContext';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <PlayProvider>
    <App />
  </PlayProvider>
);

第二步：改造原有播放逻辑，解决切换组件暂停问题 #

原来你在歌曲列表组件里用本地ref调用播放，现在替换成全局的playSong方法即可，以专辑详情页的歌曲项组件为例：

import { usePlay } from '../context/PlayContext';

// 单个歌曲组件
const SongItem = ({ song }) => {
  const { playSong } = usePlay();

  const handleClickPlay = () => {
    // 直接调用全局播放方法，不需要在当前组件创建audio实例
    playSong(song);
  };

  return <div onClick={handleClickPlay}>{song.name}</div>;
};

这一步完成后，切换任意组件全局audio实例都不会销毁，歌曲会持续播放，第二个需求已经实现。

第三步：实现底部固定播放导航栏 #

1. 创建播放栏组件 src/components/PlayerBar.js #

import { usePlay } from '../context/PlayContext';
import './PlayerBar.css';

const PlayerBar = () => {
  const { currentSong, isPlaying, togglePlay } = usePlay();

  // 没有播放歌曲时隐藏播放栏
  if (!currentSong) return null;

  return (
    <div className="player-bar">
      <span className="song-name">{currentSong.name}</span>
      <button className="play-control" onClick={togglePlay}>
        {/* 可替换为你项目的UI图标 */}
        {isPlaying ? '⏸️' : '▶️'}
      </button>
    </div>
  );
};

export default PlayerBar;

2. 新增样式文件 src/components/PlayerBar.css #

.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #1e1e1e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 999;
}
.play-control {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

3. 全局挂载播放栏 #

在你的路由配置文件App.js里把播放栏放在路由出口的同级，保证所有页面都显示：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import AlbumDetail from './pages/AlbumDetail';
import PlayerBar from './components/PlayerBar';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/album/:id" element={<AlbumDetail />} />
      </Routes>
      {/* 底部播放栏固定在所有页面最上层 */}
      <PlayerBar />
    </Router>
  );
}

export default App;

这一步完成后，只要有歌曲播放，底部就会同步显示当前歌曲名和播放状态，点击按钮可切换播放/暂停，第一个需求实现。

功能验证步骤 #

1. 进入专辑详情页点击任意歌曲播放，底部出现播放栏显示对应歌曲名，状态为播放中
2. 切回首页或者其他页面，歌曲持续播放，底部播放栏状态不变
3. 点击底部播放栏的控制按钮，可正常切换播放/暂停状态

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