在 react-music-player 中切换播放/暂停答案

【问题标题】：Toggle play/pause in react-music-player在 react-music-player 中切换播放/暂停
【发布时间】：2020-04-30 20:23:12
【问题描述】：

我正在为我的音频应用程序使用 react-music-player(lijinke666/react-music-player)。我工作正常，但我有一个用例，我必须从播放器外部的按钮控制音频的播放和暂停。播放器的播放和暂停按钮工作正常，但根据 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}  />

关于如何从播放器外部触发播放/puse 功能有什么建议吗？

【问题讨论】：

您可以使用componentDidUpdate 来切换传递的播放/暂停道具值并设置内部状态吗？顺便说一句，这种模式通常不被推荐，因为它会导致多个事实来源。组件通常应该是完全受控的或不受控的。介意共享控制组件和受控组件的整个组件代码吗？
@DrewReese 状态播放与toogle播放没有任何关系，我只是在尝试一些事情，但无法实现。
@DrewReese 我已经提供了实现的代码，这只是组件中的代码
@DrewReese github.com/lijinke666/react-music-player 这是我正在使用的库。

标签： reactjs html5-audio react-player

【解决方案1】：

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

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

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

打电话

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

【讨论】：

澄清一下：你应该在你的 useEffect 或 componentDidUpdate 这些播放/暂停方法中创建实例并调用，而当你的外部按钮将被点击时
拥有实例后，无需将其耦合到外部组件的内部状态。我同意这可能是更简洁的代码，但 OP 只是想要从外部控制播放器的能力。
@DrewReese 这行得通，之前也实现了它，但这个实现中的问题是自定义按钮不在播放器按钮的接收器中。就像如果您暂停一首歌曲，它会暂停，但播放器按钮仍处于播放模式状态
@DrewReese 是的，但是 OP 应该如何在自定义按钮中使用外部控件，可以放置在 UI 的不同部分？我只看到 3 个选项：1）通过父组件回调地狱 2）通过顶级父组件进行上下文地狱 3）或者只是添加到像 playerStatus 这样的通量状态变量并存储播放或不播放状态并使用它进行控制播放器和按钮
@Nishant_061 我也注意到播放器的播放按钮与外部控件也不同步，但是，IMO，这是播放器内部状态的问题。我认为这是您在项目中提出的问题。（我检查并没有看到任何关于带有外部控件的陈旧 UI 的打开或关闭问题）。当您使用外部控制播放/暂停时，您可以看到曲目时间暂停/开始，但播放按钮保持在“播放”上。