Continuous HTML5 audio/video playback in iOS?

Question

I'm working on a mobile web app and want to allow for continuous playback of HTML5 audio or video in both Android and iOS (i.e. queue up a playlist of YouTube videos or Grooveshark songs and have them all play in a row automatically).

Android doesn't seem to be an issue, but everything I've read has suggested that Safari prevents audio from playing unless it's initiated by a user, and prevents continuous play if the screen becomes locked.

That said, Grooveshark's mobile web app will play an entire playlist of songs in my iPhone 5 (iOS 7). It'll play the next song even if I'm in another Safari tab or I lock the screen.

So the question: How do they do that?

Answer 1

This code (jQuery) works for me in iPhone Safari iOS7 for continuous playback. Even if I have my screen locked/other tab it changes track when the first has ended (given a bit of patience for the new track to load)

<audio id="audio1" src="song1.mp3" controls></audio>
<script type="text/javascript">
$('#audio1').on('ended',function(){
    $(this).attr('src','song2.mp3');
    $(this)[0].play();
    });
</script>

I've read has suggested that Safari prevents audio from playing unless it's initiated by a user.

=> That is true and is by design - no work around known as of today (well ... I have seen ugly attempt to make it work).