title: How to structure component when using new Audio in react
body: <p>I am new to React so getting to grip with thinking in React.</p>
  
  <p>I want to play an audio clip when a user clicks on a button in React. I want the know the best way to set up the <code>component</code> so that I have the audio in the correct method of the component. </p>
  
  <p>In my 'app' have 3 songs, but I only want to create one instance of the Audio object. </p>
  
  <p>In jQuery I would do something like this:</p>
  
  <pre><code>var songs = ['1.mp3', '2.mp3', '3.mp3'];
  var i = 0;
  var audio = new Audio();
  
  $('.play').click(function(){
     audio.src = songs[i];
     audio.play();
  });
  
  $('.next').click(function(){
     i++;
     audio.src = songs[i];
     audio.play();
  });
  </code></pre>
  
  <p>Currently my react code looks like below. Perhaps I am using <code>componentDidMount</code> incorrectly? Do I need to set <code>state</code> somewhere? or does it need to be a <code>prop</code>?</p>
  
  <pre><code>var Player = React.createClass({
  
     componentDidMount: function() {
        var audio = new Audio();
        audio.src = "test.mp3"
     },
  
     playSong: function() {  
       console.log(audio)
       audio.play();
     },
  
     render: function(){
       return(
         &lt;div className="footer"&gt;
           &lt;i onClick={this.playSong} className="play"&gt;&lt;/i&gt;
           &lt;i className="pause"&gt;&lt;/i&gt;
           &lt;i className="next-song"&gt;&lt;/i&gt;
         &lt;/div&gt;
       )
     }
   });
  </code></pre>