5

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?

neowinston
  • 7,584
  • 10
  • 52
  • 83
ACPrice
  • 667
  • 2
  • 10
  • 25

1 Answers1

4

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).

Arnaud Leyder
  • 6,674
  • 5
  • 31
  • 43
  • Beautiful. Thanks very much. I'll give this a shot. Accepting the answer for now. – ACPrice Apr 25 '14 at 18:37
  • That helped a lot! One addon-question: Why do you need to call `$(this)[0].play();` instead of `$(this).play();`? – Christian Jul 30 '14 at 09:49
  • the play() method does not work on a jQuery object. You need to have a reference to the actual audio tag hence the $(this)[0] which selects the audio tag from the $(this) jQuery object – Arnaud Leyder Jul 30 '14 at 09:56
  • This is possible, as stated in apples documentation, and confirmed on a iPhone4 and 5s. http://goo.gl/HzUVWc – QueueHammer Nov 14 '14 at 04:15
  • Old thread but I think it’s still relevant and adding my comment. This was fixed and added in iOS 14 (continuous playback when you have a playlist in html/JavaScript) but now that I’ve upgraded to ios15.3 from 14.3 it doesn’t work unless I have safari open. I can be on another tab than my web player. If I lock the phone it will not keep playing the next song in my playlist (when it did before in iOS 14). – ikwyl6 Feb 05 '22 at 17:41