title: Why the audio plays sometimes and sometimes not within the same browser?
body: <p>I have the following code and I am not sure what's wrong. Is there any problem with the remote  host on which we have the audio files? In Chrome, sometimes it plays and sometimes it doesn't play and when it doesn't play, it doesn't say that my browser doesn't support the audio format.</p>
  
  <pre><code>&lt;audio controls id="audio" style="display:none"&gt;
      &lt;source src="http://langcomplab.net/Honey_Gatherers_Master.mp3" type="audio/mpeg" /&gt;
      Your browser doesn't support this audio format.
  &lt;/audio&gt;
  &lt;button id="button"&gt;Play&lt;/button&gt;
  &lt;script type="text/javascript"&gt;
  
          // run on page load
      var button = document.getElementById('button');
      var audio = document.getElementById('audio');
  
      var onClick = function() {
          audio.play(); // audio will load and then play
      };
  
      button.addEventListener('click', onClick, false);
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/MfU7h/" rel="nofollow noreferrer">http://jsfiddle.net/MfU7h/</a></p>
  
  <p>UPDATE: The is really weird. In the source section I add   </p>
  
  <pre><code>&lt;/html&gt; tag for a block in Qualtrics but when I source my code using rich context editor the tags fade away. Any solution to this? 
  &lt;html&gt;
  &lt;body onload='Qualtrics.SurveyEngine.addOnload'&gt;
  &lt;p&gt;The next two stories will be the two stories presented auditorily. Please press the &amp;ldquo;Play Story&amp;rdquo; button now to hear an example auditory story. Be sure to adjust the volume of the device on which you are listening so that you can hear the auditory story clearly.&lt;/p&gt;
  
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
  &lt;div&gt;
  &lt;audio controls="" id="audio1" style="display:none"&gt;&lt;source src="http://langcomplab.net/Test_take2.mp3" style="width:50%" type="audio/mpeg" /&gt;Your browser doesn&amp;#39;t support this audio format.&lt;/audio&gt;
  &lt;/div&gt;
  
  &lt;div&gt;&lt;button name="play" onclick="disabled=true" style="height:25px; width:200px" type="button"&gt;Play Story&lt;/button&gt;
  
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/oiSOd.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/qLqXj.png" alt="enter image description here"></p>
  
  <p>P.S.: Am I using the right function in <code>onload</code> section?</p>