HTML5 Audio doesn't play until I physically rotate Nexus 7

Question

I'm trying to get HTML5 audio sprites working on a Nexus 7 using the Android Chrome browser. To change the audio being played, I change the source of the audio player, then reload the audio player.

I then have to detect two 'timeupdate' events to make sure the audio is actually playing, because HTML5 audio on Android can be a bit unreliable.

It's one part of a large page so I can't post it all, but the setup boils down to basically:

<body>
    <audio id="myAudioPlayer" src="audio_1.wav">

<script type=javascript>
    function changeAudio() {
        var audioplayer = document.getElementByID("myAudioPlayer");
        audioplayer.currentSrc = getNextAudioClip();
        audioplayer.load();  
        audioplayer.play();
        audioplayer.addEventListener('timeupdate', firstTimeUpdate, false);
    }

    function firstTimeUpdate() {
        this.removeEventListener('timeupdate', firstTimeUpdate, false);
        this.addEventListener('timeupdate', secondTimeUpdate, false);
        this.play();
    }

   function secondTimeUpdate() {
        this.removeEventListener('timeupdate', secondTimeUpdate, false);
        this.addEventListener('timeupdate', timeSliderUpdate, false);
    }
</script>
</body>

So, this works fine the first few times. The audio is changed, 'timeupdate' fires to get us to firstTimeUpdate(), then the audio starts playing and 'timeupdate' fires again to get to secondTimeUpdate().

But the 6th or 7th time I change the audio, the second 'timeupdate' event doesn't fire, so secondTimeUpdate() is never reached, unless I rotate the Nexus 7 90 degrees and then rotate it back again, whereupon the audio starts playing, the second 'timeupdate' is fired, and everything begins to work again.

This continues until I change audio for the 12th or 13th time, where the same thing is observed. The getNextAudioClip() function is working fine (i.e. it's returning a valid audio file).

I'm stumped by this. Can anyone hazard a guess as to what could be going on here, or why rotating the Nexus 7 "fixes" it?

EDIT: Ok, so after having a bit more time to play with this, it seems that the issue is related to garbage collection. Rotating the Nexus 7 seems to trigger garbage collection on the previously-loaded audio sprites, which allows the new sprite to load and play. Changing to a different tab and then back again also does this. So if I could just get this audio GC'd automatically somehow, I could have a workaround.

HTML5 Audio doesn't play until I physically rotate Nexus 7

0 Answers0