title: Dynamically control HTML5 audio with JavaScript
body: <p>I've got a gallery of sorts with 10 or so thumbnails that each represent one song. To control the playback of each, I've set a play button to fades in via jQuery. After some digging around Apple's Dev Center I found some native JavaScript to control audio. It works beautifully, but is written for control of one object at a time. What I'd like to do is rewrite it as one function that dynamically controls the playback/pause of the thumbnail you're selecting.</p>
  
  <p>Below is the code that I found.. works, but it'd be a lot of unnecessary code to write it 10 times.</p>
  
  <p>Thanks for your help and advice, always!</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="thumbnail" id="paparazzixxx"&gt;
          &lt;a href="javascript:playPause();"&gt;
              &lt;img id="play" src="../images/icons/35.png" /&gt;
          &lt;/a&gt;
          &lt;audio id="paparazzi"&gt;
              &lt;source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" /&gt;
              &lt;source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" /&gt;
              Your browser does not support HTML5 audio.
          &lt;/audio&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
         function playPause() {
         var song = document.getElementsByTagName('audio')[0];
         if (song.paused)
             song.play();
         else
             song.pause();
         }
  &lt;/script&gt;
  </code></pre>