title: (React js) Audio src is updating on setState but the audio playing doesn't change
body: <p>I am trying to build a mini 2-track audio player with React. The audio is centrally controlled by a html audio element with a track-list inside a child component. The (yet to be styled) player can be seen <a href="http://theseboys.com/" rel="noreferrer">here</a>.</p>
  
  <p>I can tell in the React dev tools that clicking the individual track select buttons does update the src of the audio element (thanks to the help of a member on here), however, the playing audio doesn't change. I've posted the Application code below.</p>
  
  <p>Is it even possible to change the playing audio by updating the state in this way? Help would be hugely appreciated.</p>
  
  <pre><code>var TRACKLIST = [
      {
          id: 1,
          name: "song a",
          source: "./audio/test.m4a"
      },
      {
          id: 2,
          name: "song b",
          source: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/wwy.mp3"
      }
  ]
  
  function Track(props) {
      return (
          &lt;div className="track"&gt;
              &lt;div className="meta"&gt;
                  &lt;div className="name"&gt;
                      &lt;h2&gt;{props.name}&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;audio&gt;
                      &lt;source src={props.source} /&gt;
                  &lt;/audio&gt;
              &lt;/div&gt;
              &lt;button className="select" onClick={function() {props.onChange(props.source);}} &gt;
              &lt;/button&gt;
          &lt;/div&gt;
      )
  }
  
  var Application = React.createClass({
  
      getInitialState: function() {
          return {
              isPlaying: "./audio/test.m4a"
          };
      },
  
      onTrackChange: function(source) {
          this.setState({ isPlaying: source })
      },
  
      render: function() {
          return (
              &lt;div className="player"&gt;
                  &lt;div className="tracklist"&gt;
                      {this.props.tracklist.map(function(track){
                          return &lt;Track
                                      key={track.id}
                                      name={track.name}
                                      source={track.source}
                                      onChange={this.onTrackChange} /&gt;
                      }.bind(this))}
                  &lt;/div&gt;
                  &lt;div className="controls"&gt;
                      &lt;audio controls&gt;
                          &lt;source src={this.state.isPlaying} /&gt;
                      &lt;/audio&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  });
  
  // Render the UI
  ReactDOM.render(
      &lt;Application tracklist={TRACKLIST} /&gt;,
      document.getElementById('Player')
  );
  </code></pre>