title: Why does audio not start when 'play' button is first clicked?
body: <p>I'm having trouble with audio in Firefox. I have an .ogg audio clip in an <code>&lt;audio&gt;</code> tag, and Firefox does not start playing the file when the play button is fisrt pressed. However, if the play button is pressed and then a time is selected from the timeline, the audio will start playing from the time selected. The file will also start playing if the play button is pressed repeatedly (e.g. play/pause/play).</p>
  
  <p>I'm also using the web audio API to run the audio through an AnalyserNode. The issue, however, does not seem to relate to the analyser specifically, as this can be removed without affecting this issue. It seems to have something to do with <code>createMediaElementSource</code>. If I remove the JavaScript code related to this, the issue disappears.</p>
  
  <p>The audio file is being served from the same origin, so I'm fairly certain this is not a CORS issue (as described <a href="https://stackoverflow.com/questions/19708561/firefox-25-and-audiocontext-createjavascriptnote-not-a-function">here</a>). As I said, the audio will play, but only if a time is selected on the timeline.</p>
  
  <p>I'm including the simplest example of the issue below. This would likely need to be run from an HTTP server (<code>python -m http.server</code>, <code>python -m SimpleHTTPServer</code> or whatever) in order to avoid any CORS issues. For this reason, I don't think I can include a JSFiddle demonstration of this issue here.</p>
  
  <p>This issue appears to be Firefox only. It definitely does not affect Chrome, but I haven't actually tested any other browsers yet.</p>
  
  <pre><code>&lt;audio id="audio" controls&gt;
    &lt;source src="piano-sonata-no13.ogg" type="audio/ogg" /&gt;
  &lt;/audio&gt;
  
  &lt;script&gt;
      var audio_node = document.getElementById('audio');
      var audioctx = new (window.AudioContext || window.webkitAudioContext)();
      var analyser = audioctx.createAnalyser();
  
      window.addEventListener('load', function(e) {
          var source = audioctx.createMediaElementSource(audio_node);
          source.connect(analyser);
          source.connect(audioctx.destination);
      }, false);
  &lt;/script&gt;
  </code></pre>
  
  <p>Edit: An example of this issue can be found here: <a href="http://mdn.github.io/media-source-buffer/" rel="nofollow noreferrer">http://mdn.github.io/media-source-buffer/</a></p>