title: toggle play/pause in react with audio
body: <p>I have made an audio player, with one button to play and pause. This should perform a play action if the <code>playing</code> is false, and will pause if <code>playing</code> is true.</p>
  
  <p>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.</p>
  
  <p>Can anyone point me in the right direction?</p>
  
  <p>Please see my code below.</p>
  
  <pre><code>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(
          &lt;p onClick={...}&gt;Play/Pause&lt;p/&gt;
        )
    }
  </code></pre>
  
  <p>I guess I can create another function to toggle play and pause like the following. Is this the best way to do this?</p>
  
  <pre><code>togglePlayPause:function() {
      if(this.state.playing === false) {
          this.playSong();
      }else {
          this.pauseSong();
      }
  },
  render: function(){
        return(
          &lt;p onClick={this.togglePlayPause}&gt;Play/Pause&lt;p/&gt;
        )
    }
  </code></pre>