title: How do I play an audio file with jQuery?
body: <p>I'm having a difficult time getting audio to work with jQuery.  I've tried this with both .wav and .ogg formats. (Firefox 19.0.2)</p>
  
  <p>Clicking the <kbd>Start</kbd> button yields:</p>
  
  <blockquote>
    <p>TypeError: buzzer.play is not a function</p>
  </blockquote>
  
  <p>I'm not sure if jQuery selectors return an array, but I've tried the capture the audio file with both:</p>
  
  <pre><code>var buzzer = $('buzzer');
  </code></pre>
  
  <p>and</p>
  
  <pre><code>var buzzer = $('buzzer')[0]; 
  </code></pre>
  
  <p>Regardless, I can't get the audio elements to play.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;     
  &lt;html&gt;     
      &lt;head&gt;      
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;     
      &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt;    
  &lt;/head&gt;     
  
  &lt;body&gt;     
  
  &lt;audio id="buzzer" src="buzzer.ogg" type="audio/ogg"&gt;Your browser does not support the &amp;#60;audio&amp;#62; element.&lt;/audio&gt;    
  &lt;form id='sample' action="#" data-ajax="false"&gt;    
      &lt;fieldset&gt;    
       &lt;input value="Start" type="submit"&gt;    
       &lt;/fieldset&gt;    
  &lt;/form&gt;    
  &lt;script type="text/javascript"&gt;    
  
  var buzzer = $('buzzer')[0];    
  
  $(document).on('submit', '#sample', function()  {     
      buzzer.play();    
      return false;    
  });    
  
  &lt;/script&gt;    
  &lt;/body&gt;    
  &lt;/html&gt;  
  </code></pre>