title: HTML Audio Play/Stop
body: <p>I'm making a chat application and one of the features is sending a sound. The HTML that gets sent is the following:</p>
  
  <pre><code>&lt;p&gt;
     &lt;audio autoplay&gt;
        &lt;source src="sounds/lol.mp3" type="audio/mpeg"&gt;
     &lt;/audio&gt;
     LOL
     &lt;a href="#" id="soundStop"&gt;Stop&lt;/a&gt;
     &lt;a href="#" id="soundPlay" style="display:none;"&gt;Play&lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>The 'autoplay' works fine when it is sent the first time. So now i need a play/stop link to hear the sound again as many times as you want. I have the following Javascript:</p>
  
  <pre><code>$(document).on('click', '#soundStop', function(e) {
      $(this).hide();
      $(this).next("a").show();
      $('audio').each(function(){
          this.pause();
          this.currentTime = 0;
      });
      e.preventDefault();
  });
  
  $(document).on('click', '#soundPlay', function(e) {
      $(this).hide();
      $(this).prev("a").show();
      $(this).closest("audio").play();
      //alert("play sound again!");
      e.preventDefault();
  });
  </code></pre>
  
  <p>The stop function works (although I'm not sure targeting all 'audio' elements is a good idea). But I'm stuck at how to target the audio element to .play() in the second function. I might be going at this the completely wrong way?</p>
  
  <p>Any help or advice is appreciated.</p>
  
  <p>EDIT: Just to clarify, there might be multiple instances of these sounds that get sent which is why I need a way to only target that specific 'audio' for each.</p>