Cant stop the Audio going unless click on the PLAY/STOP button

[kondricz]

Hi,

First of all, thank You for the amazing work, it has been a pleasure to Use the SoundPlayer. However we faced a big issue. We have a menu, which toggles content in the main view. For Each content a different audio is attached. It is not starting automatically, only if the user clicks on it.

Something like this:

Start and Stop of the audio is working fine. Trouble hits when the audio is playing, and the user changes menu without stopping the audio. This way the graphic re-renders and updates, but the audio is still playing.

When we do return (<p> SHOULD STOP AND CHANGE NOW! </p>) the player does not stop.

Our code:

import React from "react";
import PropTypes from "prop-types";
import { PlayButton, Timer, Progress } from "react-soundplayer/components";
import { withSoundCloudAudio } from "react-soundplayer/addons";

const AWSSoundPlayer = withSoundCloudAudio(props => {
  if (!props.stopping){
  return (
    <div className={props.playing ? "player playerplay" : "player"}>
       <PlayButton {...props} className="player__button" />
      {props.playing ? (
        <div className="player">
          <Progress {...props} className="player__progress" />
          <Timer {...props} className="player__timer" />
        </div>
      ) : (
        <div className="audio__text">Lyssna på avsnittet som ljudbok.</div>
      )}
    </div>
  )} else {
    console.log(props)
    return (<p> SHOULD STOP AND CHANGE NOW! </p>)
  }
});

class Audio extends React.Component {
  state = { change: false}
  componentWillReceiveProps(next){
    if (this.props.audioURL !== next.audioURL){
      this.setState({ change: true});
      setTimeout(() => { this.setState({ change: false}) },500)
    }
  }
  render(){
    return (
      <div id="player" className="audio">
      <AWSSoundPlayer
        key={this.props.audioURL}
        streamUrl={this.props.audioURL}
        preloadType="metadata"
        stopping={this.state.change}
      />
    </div>
    )
  }
}

export default Audio;

Audio.propTypes = {
  audioURL: PropTypes.string
};
`

[voronianski]

hey! your app looks cool, feel free to share the link here - #58

regarding issue - you need to stop player from playing manually. What you're doing now it's just simple re-render of plain components which are rendered inside higher-order container. Container provides soundCloudAudio instance in props which you can use to control audio (check api - https://github.com/voronianski/soundcloud-audio.js):

const AWSSoundPlayer = withSoundCloudAudio(props => {
  if (!props.stopping){
  return (
    <div className={props.playing ? "player playerplay" : "player"}>
       <PlayButton {...props} className="player__button" />
      {props.playing ? (
        <div className="player">
          <Progress {...props} className="player__progress" />
          <Timer {...props} className="player__timer" />
        </div>
      ) : (
        <div className="audio__text">Lyssna på avsnittet som ljudbok.</div>
      )}
    </div>
  )} else {
    props.soundCloudAudio.stop();
    // or 
    // props.soundCloudAudio.pause();
    return (<p> SHOULD STOP AND CHANGE NOW! </p>)
  }
});

[kondricz]

Thanks for the answer.
I digged up closed issues where I have seen this before. Unfortunatelly, your solution was not working. I called this function ( .pause() ) too, but the audio didn't stop.
I literally placed that everywhere:
your solution, before the render(), in the render()... but was not working.

Can it be the reason, that we dont have any registration, nor client_id at soundcloud-audio?

[dnlsandiego]

Can you try this solution below? I believe the issue here is that when you navigate from content to content which causes re-rendering of the components, the underlying audio object is still playing. Your component will have to be refactored to a class component as it will need a react lifecycle hook.

class CustomPlayer extends Component {
    componentWillUnmount() {
        const { playing, soundCloudAudio } = this.props;
        if (playing && soundCloudAudio) {
            soundCloudAudio.pause();
        }
    }

    render() {
        if (!this.props.stopping) {
            return (
                <div className={this.props.playing ? 'player playerplay' : 'player'}>
                    <PlayButton {...this.props} className="player__button" />
                    {this.props.playing ? (
                        <div className="player">
                            <Progress {...this.props} className="player__progress" />
                            <Timer {...this.props} className="player__timer" />
                        </div>
                    ) : (
                        <div className="audio__text">Lyssna på avsnittet som ljudbok.</div>
                    )}
                </div>
            );
        }
    }
}

const AWSSoundPlayer = withSoundCloudAudio(CustomPlayer);

[voronianski]

should be fixed in version 1.0.4