title: Audio playback halts/stops on Chrome 64
body: <p>Google just changed how Chrome preloads <code>audio</code> and <code>video</code>; see: <a href="https://googlechrome.github.io/samples/media/preload-metadata" rel="nofollow noreferrer">https://googlechrome.github.io/samples/media/preload-metadata</a></p>
  
  <p>It's my understanding that simply setting <code>preload</code> attribute to <code>auto</code> should fix the problem, however, I have been unable to do so:</p>
  
  <ul>
  <li><a href="https://jsfiddle.net/NinoSkopac/f4zscrdy/1/" rel="nofollow noreferrer">https://jsfiddle.net/NinoSkopac/f4zscrdy/1/</a></li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let mp3 = 'https://s3-staging.read2me.online/audio/5a745d88483d86.76121223.mp3';
  let audio = new Audio(mp3);
  audio.preload = 'auto';
  
  audio.play();</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li><a href="https://jsfiddle.net/NinoSkopac/rst8aspm/" rel="nofollow noreferrer">https://jsfiddle.net/NinoSkopac/rst8aspm/</a></li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;audio src="https://s3-staging.read2me.online/audio/5a745d88483d86.76121223.mp3" preload="auto" autoplay&gt;&lt;/audio&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Both of these will stop playing within a minute on Chrome 64 and Chrome 65-dev (other browsers and older Chromes are unaffected). I have replicated this issue on Mac, Windows and Android.</p>
  
  <p>During my debug process, I have attached all <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events" rel="nofollow noreferrer">possible media events</a> to the JS object (i.e. <code>audio.addEventListener('timeupdate', () =&gt; { console.log('timeupdate') })</code>) and at first the events were firing like this:</p>
  
  <p><code>
  progress
  timeupdate
  progress
  timeupdate
  [...]
  </code></p>
  
  <p>Later like this:
  <code>
  timeupdate
  timeupdate
  timeupdate
  [...]
  </code></p>
  
  <p>When the audio playback stopped, I got a handful of <code>error</code> events, and dumping <code>audio.error</code> returns: <code>PIPELINE_ERROR_DECODE: Failed to send audio packet for decoding: timestamp=81763265 duration=26122 size=201 side_data_size=0 is_key_frame=1 encrypted=0 discard_padding (ms)=(0, 0)</code></p>
  
  <p>How do I fix this? Is this a Chrome bug?</p>
  
  <p>UPDATE:</p>
  
  <ul>
  <li>OGG plays fine: <a href="https://jsfiddle.net/NinoSkopac/2hktqcqt/1/" rel="nofollow noreferrer">https://jsfiddle.net/NinoSkopac/2hktqcqt/1/</a></li>
  <li>This does seem to be a Chrome bug: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=794782" rel="nofollow noreferrer">https://bugs.chromium.org/p/chromium/issues/detail?id=794782</a></li>
  <li>A similar error on Github: <a href="https://github.com/video-dev/hls.js/issues/1529" rel="nofollow noreferrer">https://github.com/video-dev/hls.js/issues/1529</a></li>
  </ul>
  
  <p>UPDATE 2:</p>
  
  <p><code>chrome://media-internals/</code> reveals this:</p>
  
  <p><a href="https://i.stack.imgur.com/A5lCt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A5lCt.png" alt="enter image description here"></a></p>
  
  <p>UPDATE 3:</p>
  
  <p>This issue has been fixed in Chrome 65.</p>