Toggle play/pause in react-music-player

Question

I am using react-music-player(lijinke666/react-music-player) for my audio application . I works fine but i have a use case where i have to control play and pause of the audio from a button outside the player . Player's play and pause button works fine but according to m use case it should controlled from outside play/pause button as well.

Here is the implementation done till now :

  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}  />

Any suggestions on how to trigger play/puse function from outside the player ?

Can you use `componentDidUpdate` for then the passed play/pause prop value toggles and set the internal state? BTW, this pattern generally is **not** recommended as it leads to multiple sources of truth. Components generally should be either fully controlled or uncontrolled. Mind sharing the entire component code for both the controlling and controlled components? — Drew Reese, Jan 14 '20 at 06:00
@DrewReese state playing doesn't have to do anything to with the toogle playing , I was just trying to something but ws not able to achieve it. — Nishant_061, Jan 14 '20 at 06:31
@DrewReese i have provided the code implemented, thisiis only code in the component — Nishant_061, Jan 14 '20 at 06:32
@DrewReese https://github.com/lijinke666/react-music-player this is the library i am using. — Nishant_061, Jan 14 '20 at 06:33

score 0 · Answer 1 · answered Jan 14 '20 at 08:19

0

Use getAudioInstance callback to get a reference to the audio instance and then call operations on it.

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

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

call

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

answered Jan 14 '20 at 08:19

Drew Reese

165,259
14
153
181

Just to clarify: You should make instance and call inside your's useEffect or componentDidUpdate these play/pause methods while when yours outer button will have clicked – Travnikov.dev Jan 14 '20 at 09:21
Once you have the instance there's no requirement to couple it to an outer component's internal state. I agree it may be slightly cleaner code but the OP simply wanted the ability to externally control the player. – Drew Reese Jan 14 '20 at 15:11
@DrewReese This works, implemented it earlier as well but the issue in this implementation is the custom button is not in sink with the player button. Like if you pause a song it gets paused but the player button remains in the state of play mode – Nishant_061 Jan 15 '20 at 07:22
@DrewReese yea, but how OP should use externally control in custom button which could be placed in different part of UI ? I see only 3 options: 1) Callback hell through parent components 2) Context hell through top level parents 3) Or just add to flux state variable like _playerStatus_ and store where play or not status and control with it player and button – Travnikov.dev Jan 15 '20 at 08:56
@Nishant_061 I had noticed as well that the player's play button wasn't in sync with the external controls either, but this, IMO, is an issue with the internal state of the player. I think this is something you'd file an issue about in the project. (I checked and don't see any open, or closed, issues about stale UI with external controls). When you play/pause with the external control you can see the track time pause/start, but the play button remains on the "play". – Drew Reese Jan 15 '20 at 15:24
@Nishant_061Actually, I see why. In [index.js](https://github.com/lijinke666/react-music-player/blob/master/src/index.js) the `onAudioPlay` handlers actually sets the internal state, but the `onAudioPause` handler does not. If you pause the player (press the player's pause button) and then click the outer "PLAY" button you correctly see the player toggle its UI back to play, but this doesn't work the other way around. There is a separate `_pauseAudio` function that pauses the audio element instance and sets state, that isn't accessible. – Drew Reese Jan 15 '20 at 15:28

Toggle play/pause in react-music-player

1 Answers1