title: Audio HTML5 Autoplay WebWorks
body: <p>How does one get the HTML5 Audio tag to work in a webworks app with the Autoplay option?</p>
  
  <p>Ex:
  On document load Audio element's src changed via javascript then audioElement.play() - this doesn't work, you have to bind the click of another link or button to audioElement.play() and click AGAIN...</p>
  
  <p>Any ideas?</p>
  
  <pre><code>function playSongNow(currentID) {
      var audioElement = document.createElement('audio');
      audioElement.setAttribute('autoplay', 'true');
      audioElement.setAttribute('preload', 'true');
      audioElement.setAttribute('src', 'http://' + sessionStorage.url + ':' + sessionStorage.port + '/rest/stream.view?u=' + sessionStorage.user + '&amp;p=' + sessionStorage.pass + '&amp;v=1.6.0&amp;c=BerrySonic&amp;id=' + currentID);
      audioElement.load();
      audioElement.addEventListener("load", function() {
          audioElement.play();
          $(".duration span").html(audioElement.duration);
          $(".filename span").html(audioElement.src);
      }, true);
      $('.play').click(function() {
          audioElement.play();
      });
      $('.pause').click(function() {
          audioElement.pause();
      });
      $('.volumeMax').click(function() {
          audioElement.volume=1;
      });
      $('.volumestop').click(function() {
          audioElement.volume=0;
      });
      $('.stop').click(function() {
          audioElement.pause();
          audioElement.currentTime = 0;
      });
      $('.playatTime').click(function() {
          audioElement.currentTime= 35; //Testing skipping so used 35
          audioElement.play();
      });
  }
  </code></pre>
  
  <p>playSongNow is called by the HTML:</p>
  
  <pre><code>&lt;a onclick="playSongNow('2f6d656469612f52616964426f782f4d757369632f4164656c652f32312f4164656c65202d2052756d6f7572204861732049742e6d7033');"&gt;&lt;li&gt;Rumour Has It&lt;/li&gt;&lt;/a&gt;
  </code></pre>
  
  <p><strong>NEW: Actually I think I've narrowed the issue down to :</strong></p>
  
  <pre><code>audioElement.addEventListener("load", function() {
      audioElement.play();
      $(".duration span").html(audioElement.duration);
      $(".filename span").html(audioElement.src);
  }, true);
  </code></pre>
  
  <p>I tried using "canplaythrough"
  But neither works to determine when enough data has passed in to actually play because if you do:</p>
  
  <pre><code>audioElement.load();
  audioElement.play();
  </code></pre>
  
  <p>I tried the following event:</p>
  
  <pre><code>audioElement.addEventListener('canplay', function() {
      alert('canplay');
      audioElement.play();
  });
  </code></pre>
  
  <p>And this works but this doesn't mean that the audio can play without buffering does it? It also immidiately fires the "canplaythrough" event.</p>
  
  <p>Some guidance on these events would be handy.</p>