Reactjs 在音乐播放器中切换播放/暂停

我正在使用react音乐播放器（lijinke666/react音乐播放器）进行音频应用。我的工作很好，但我有一个用例，我必须从播放器外的按钮控制音频的播放和暂停。播放器的播放和暂停按钮工作正常，但根据m用例，它也应该从外部播放/暂停按钮进行控制

以下是到目前为止的实施情况：

  this.state = {
      playing: false,
      options: {
        audioLists: [
          {
            singer: "Jay Chou",
            cover: this.props.thumbnail,
            musicSrc: this.props.streamUrl,
          },
        ],
        autoPlay: true,
        mode: "full",
        clearPriorAudioLists: true,
      },
      defaultPosition: {
        bottom: 0,
      },
    };

    <ReactJkMusicPlayer {...options}  />

this.state={
玩：错，
选项：{
音频列表：[
{
歌手：“周杰伦”，
封面：this.props.缩略图，
音乐：this.props.streamUrl，
},
],
自动播放：对，
模式：“满”，
clearPriorAudioLists：没错，
},
默认位置：{
底部：0，
},
};

---

关于如何从播放机外部触发play/puse函数的任何建议？

使用

getAudioInstance

回调获取对音频实例的引用，然后对其调用操作

const getAudioInstance = instance => {
  this.player = instance;
}

<ReactJkMusicPlayer {...options} getAudioInstance={getAudioInstance} />

---

您是否可以使用

componentDidUpdate

来切换传递的播放/暂停道具值并设置内部状态？顺便说一句，这种模式通常不被推荐，因为它会导致多个真相来源。部件通常应完全受控或不受控。介意为控制组件和受控组件共享整个组件代码吗？@DrewReese state playing与toogle playing没有任何关系，我只是想做点什么，但ws无法实现。@DrewReese我提供了实现的代码，这是中唯一的代码component@DrewReese这就是我正在使用的库。只是想澄清一下：你应该在你的useEffect或component中创建实例并调用。当你的外部按钮将被单击时，你应该更新这些播放/暂停方法。一旦你有了实例，就不需要将其与外部组件的内部组件耦合国家。我同意这可能是一个稍微干净的代码，但OP只是希望能够从外部控制播放器。@drewrese这是可行的，之前也实现了它，但这个实现中的问题是自定义按钮不在播放器按钮的接收器中。就像暂停一首歌曲一样，它会暂停，但播放器按钮仍处于播放状态mode@DrewReese是的，但OP应该如何在自定义按钮中使用外部控制，该按钮可以放置在UI的不同部分？我只看到3个选项：1）通过父组件回调地狱2）通过顶级父组件上下文地狱3）或只添加到通量状态变量（如playerStatus）中，并存储在播放或不播放状态和控制的位置button@Nishant_061我还注意到播放器的播放按钮也与外部控件不同步，但在国际海事组织，这是一个与玩家的内部状态有关的问题。我认为这是你应该在项目中提出的问题。（我检查了，没有看到关于外部控件过时UI的任何打开或关闭的问题）。使用外部控件播放/暂停时，您可以看到曲目时间暂停/开始，但播放按钮仍保持在“播放”位置。

this.player.play();
this.player.pause();