title: How to get Audio Tag to play?
body: <p>I'm changing an HTML5 Audio Tag source dynamically based on a current image in the gallery.</p>
  
  <p>But my HTML5 Audio player won't play at all for some reason.</p>
  
  <p>Here is my player:</p>
  
  <pre><code>&lt;div id="audioPlayer"&gt;
      &lt;a onclick="playSound()"&gt;
          &lt;audio class="audioPlayer" preload="none" controls src=""&gt;
              &lt;source type="audio/ogg" src="" class="audio-ogg" /&gt;
              &lt;source type="audio/mpeg" src="" class="audio-mp3" /&gt;
              &lt;source type="audio/wav" src="" class="audio-wav" /&gt;
          &lt;/audio&gt;
          &lt;img src="img/playBtn.png" alt="Play" /&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  
  
  function loadSound(galleryIndex) {
      document.getElementsByClassName('audio-ogg')[0].src = "sounds/" + galleryAudio.sounds[galleryIndex].ogg;
      document.getElementsByClassName('audio-mp3')[0].src = "sounds/" + galleryAudio.sounds[galleryIndex].mp3;
      document.getElementsByClassName('audio-wav')[0].src = "sounds/" + galleryAudio.sounds[galleryIndex].wav;
  }
  
  function playSound() {
      // galleryAudio.tag.play();
      // console.log(document.getElementsByClassName('audioPlayer')[0]);
      galleryAudio.tag.play();
      return false;
  }
  
  function initialise() {
      galleryAudio.tag = document.getElementsByClassName('audioPlayer')[0];
  }
  
  var galleryAudio = {
      tag: null,
      sounds: [{
              "ogg": "square.ogg",
              "mp3": "square.mp3",
              "wav": "square.wav"
          }, {
              "ogg": "rectangle.ogg",
              "mp3": "rectangle.mp3",
              "wav": "rectangle.wav"
          }, {
              "ogg": "circle.ogg",
              "mp3": "circle.mp3",
              "wav": "circle.wav"
          }, {
              "ogg": "equilateral-triangle.ogg",
              "mp3": "equilateral-triangle.mp3",
              "wav": "equilateral-triangle.wav"
          }, {
              "ogg": "isosceles-triangle.ogg",
              "mp3": "isosceles-triangle.mp3",
              "wav": "isosceles-triangle.wav"
          }, {
              "ogg": "right-angle-triangle.ogg",
              "mp3": "right-angle-triangle.mp3",
              "wav": "right-angle-triangle.wav"
          }, {
              "ogg": "scalene-triangle.ogg",
              "mp3": "scalene-triangle.mp3",
              "wav": "scalene-triangle.wav"
          }, {
              "ogg": "pentagon.ogg",
              "mp3": "pentagon.mp3",
              "wav": "pentagon.wav"
          }, {
              "ogg": "hexagon.ogg",
              "mp3": "hexagon.mp3",
              "wav": "hexagon.wav"
          }, {
              "ogg": "heptagon.ogg",
              "mp3": "heptagon.mp3",
              "wav": "heptagon.wav"
          }, {
              "ogg": "octagon.ogg",
              "mp3": "octagon.mp3",
              "wav": "octagon.wav"
          }
      ]
  };
  
  window.addEventListener('load', initialise, true);
  </code></pre>
  
  <p>Why won't my audio player play?</p>