howler player在React/NextJS中的单个实例

Question

我在我的应用程序渲染(在NextJS中)的每个页面上都有许多音频。我希望当用户单击音频按钮时，任何其他音频播放停止(我想在同一时间只有一个音频播放)。我怎样才能做到这一点呢?(我用Howler)

我的想法是有一个单独的Howler实例作为它的单例?是否有可能拥有一个函数的单个实例并在整个应用程序中共享它?与React上下文?(但它们不是唯一的，对吧?)

Answer 1

为什么不创建一个React上下文并在其中存储Howler实例呢?https://reactjs.org/docs/context.html

export default ({ children }) => {
const [howler, setHowler] = useState(new Howl({ ... }));
return (
<HowlerContext.Provider value={howler}>
{children}
</AmplitudeContext.Provider>
);
};

这样你就可以把它共享给每个子节点