title: HTML5 Audio element - Track length misreported by some Android browsers
body: <p>I'm working on an audio player using the HTML5 <code>&lt;audio&gt;</code> element and am trying to iron out a few issues cross-browser.</p>
  
  <p>This player is configured to switch between audio tracks when a link for a different track is clicked. Internally, it pauses the <code>&lt;audio&gt;</code> element, sets its <code>currentTime</code> to <code>0</code> (as explained in <a href="https://stackoverflow.com/questions/13716731/html5-audio-not-playing-multiple-times-in-android-4-0-4-device-native-browser">HTML5 audio not playing multiple times in Android 4.0.4 device Native Browser</a>) and removes it from the DOM before a new <code>&lt;audio&gt;</code> element is created with the new source track specified. The <code>play()</code> method is called on the element to load the track and start playing.</p>
  
  <p>On desktop browsers, an iPhone and iPad, this works fine. It also works on a colleague's Samsung Galaxy S3 Mini. However on a different test phone, a full-size Samsung Galaxy S3, the playback of subsequent tracks fails - the track won't even play and it shows in the playback bar as having completed. This is also the case on the stock Android 4.1.2 browser on my Motorola Xoom tablet.</p>
  
  <p>The first track specified on page load always works fine.</p>
  
  <p>After adding a few debugging statements among the JavaScript code, particularly the <code>timeupdate</code> callback function, I have found that in the cases where playback fails, the <code>&lt;audio&gt;</code> element's <code>duration</code> has a value of <strong>1</strong> in the two instances when <code>timeupdate</code> is raised. Normally, the duration is reported as anything from <strong>350</strong> to just over <strong>1000</strong> for a 3-4 min track. This explains why the playback bar immediately showed the newly-loaded track as having completed playback.</p>
  
  <p>I'm thinking that the subsequent track isn't being loaded properly; even if it has been previously loaded and cached on the phone, surely it must be able to be loaded correctly. All tracks are MP3s and are able to be played in the respective browsers. </p>
  
  <p>What am I missing here? Any idea what the problem is and how to get this to work?</p>
  
  <p>Many thanks.</p>
  
  <p><strong>More Info:</strong>
  I've hooked up other events to the <code>&lt;audio&gt;</code> element to trace what may be happening:</p>
  
  <ul>
  <li><code>progress</code> (with a report on the buffered ranges)</li>
  <li><code>loadedmetadata</code></li>
  <li><code>canplay</code></li>
  <li><code>error</code></li>
  </ul>
  
  <p>On desktop (where this works correctly), the events are as follows:
  <code>timeupdate</code> (with NaN duration), <code>progress</code> x3 (0 buffered ranges), <code>loadedmetadata</code>, <code>canplay</code>, <code>timeupdate</code> with duration of 121.172368, <code>progress</code> with 1 buffered range [0, 11.507715], followed by a sequence of <code>timeupdate</code>  and <code>progress</code> events as the track continues to play. The iPhone has a similar sequence of events.</p>
  
  <p>On the Samsung S3, I get the following events: <code>timeupdate</code> with a duration of 1, followed by <code>progress</code> (0 buffered ranges), <code>loadedmetadata</code>, <code>canplay</code>, and finally a <code>timeupdate</code> with duration still at 1.</p>
  
  <p>This page has been very useful in explaining the events and data structures: <a href="http://www.sitepoint.com/essential-audio-and-video-events-for-html5/" rel="nofollow noreferrer">http://www.sitepoint.com/essential-audio-and-video-events-for-html5/</a></p>