title: JavaScript function to play audio file
body: <p>I would like a clean way to to write a JavaScript function that fires at a specific click to a <code>#div</code> element and triggers a sound file, without looping. Is there anyway to write a function that grabs a sound file, plays it and then stops. It is going to be apart of a large array of functions that exist per click, and are assigned to a custom number of clicks done by the user; at one specific <code>#main_div</code> button.</p>
  
  <p>Currently I have a solution that displays a 'Play Button' using <code>.show .hide</code> within a function. </p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>function function8() {
      $("#area1").hide(0).delay(1500).show(0);
      $("#area2").hide(0).delay(1500).show(0);
      $("#sound1").show(0).delay(1500).hide(0); // This one 
  // I would like the above to directly play the sound when fired. Not overlay a new play button.
  </code></pre>
  
  <p>Mark-Up:</p>
  
  <pre><code>&lt;div id="sound1"&gt;&lt;div&gt;
  &lt;audio id="id1" src="01.mp3"&gt;&lt;/audio&gt;
  &lt;button onClick="document.getElementById("id1").play()"&gt;Play&lt;/button&gt;
  &lt;button onClick="document.getElementById("id1").pause()"&gt;Stop&lt;/button&gt;
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But this requires an extra 'Click' to play; and also I don't want a button specific to this audio play. I would like this to exist via the main <code>#main_div</code> box button; where all of the functions will occur when clicked on; essentially I want; say Click = 3 to 'Play Sound File' automatically without requiring an extra step.</p>