单例模式下的全局播放，一次跨越

2023-09-08 12:42:53

前言

对大多数具备音频能力的应用而言，为了保证音频体验上的流畅，全局播放基本是一项必备的能力，很难想象使用一个不具备全局播放能力的应用是种什么样的体验。设想一下，你在听一首歌的时候，突然跳出一个视频，并在你不容分说之际就开始播放，此刻的你是否会气愤不已？这正是全局播放存在的意义——无论你身处应用的哪个角落，正在做什么事，它总能时刻听候你的指令，在你需要时，开始或停止播放，或者将正在播放的内容替换成你指定的内容。

单例模式简介

单例模式是一种常用的设计模式，其核心思想是保证一个类仅有一个实例存在，并提供一个全局访问点供外界访问该实例。在前端业务中，单例模式可以被用于实现全局播放。

实现单例模式的全局播放

在 React 中，我们可以使用 createContext API 来实现单例模式的全局播放。首先，我们需要定义一个全局播放的上下文对象：

const AudioPlayerContext = createContext(null);

然后，我们将这个上下文对象作为子组件的 context 属性传递给子组件：

const App = () => {
  const [isPlaying, setIsPlaying] = useState(false);
  const [currentSong, setCurrentSong] = useState(null);

  return (
    <AudioPlayerContext.Provider value={{ isPlaying, setIsPlaying, currentSong, setCurrentSong }}>
      <ChildComponent />
    </AudioPlayerContext.Provider>
  );
};

在子组件中，我们可以通过 useContext 钩子来访问这个上下文对象：

const ChildComponent = () => {
  const { isPlaying, setIsPlaying, currentSong, setCurrentSong } = useContext(AudioPlayerContext);

  return (
    <div>
      {isPlaying ? <p>正在播放：{currentSong}</p> : <p>没有正在播放的歌曲</p>}
      <button onClick={() => setIsPlaying(!isPlaying)}>播放/暂停</button>
      <button onClick={() => setCurrentSong('新的歌曲')}>播放新的歌曲</button>
    </div>
  );
};