CODEWITHSUNDEEP
javascriptreactjs
user6002037
user6002037

Reputation:

toggle play/pause in react with audio

I have made an audio player, with one button to play and pause. This should perform a play action if the playing is false, and will pause if playing is true.

I am not sure if it is because thinking in React still isn't 100% natural to me, but I cannot figure out how to do this.

Can anyone point me in the right direction?

Please see my code below.

var Player = React.createClass({

   getInitialState: function(){
       return{
           songs:[],
           playing: false
       }
   },

   audio: new Audio,

   playSong: function(){
       this.setState({playing = true});
       this.audio.src = this.state.songs[this.props.song];
       this.audio.play();
   },

   pauseSong: function() {
       this.setState({playing = false});
       this.audio.pause();
   },

  render: function(){
      return(
        <p onClick={...}>Play/Pause<p/>
      )
  }

I guess I can create another function to toggle play and pause like the following. Is this the best way to do this?

togglePlayPause:function() {
    if(this.state.playing === false) {
        this.playSong();
    }else {
        this.pauseSong();
    }
},
render: function(){
      return(
        <p onClick={this.togglePlayPause}>Play/Pause<p/>
      )
  }

Upvotes: 5

Views: 14407

Answers (1)

Salvatore
Salvatore

Reputation: 177

var Player = React.createClass({

  getInitialState: function() {
    return {
      songs: [],
      playing: false
    }
  },

  audio: new Audio,

  playSong: function() {
    console.log("play")
    this.setState({ playing: true });
    this.audio.src = this.state.songs[this.props.song];
    this.audio.play(); 
  },

  pauseSong: function() {
    console.log("pause");
    this.setState({ playing: false });
    this.audio.pause();
  },

  render: function() {
    return(
      <p onClick={this.state.playing ? this.pauseSong : this.playSong}>Play/Pause</p>
    )
  }

});

ReactDOM.render(
  <Player/>,
  document.getElementById('container')
);

you can do this with ternary onclick you can decide which function you want to call. probably are typo but you need to do this.setState({key:value}); and not this.setState({key = value});

https://jsfiddle.net/69z2wepo/183621/

Upvotes: 4

Related Questions