2

I'm having trouble getting jPlayer to play tracks on iOS and Android devices. It does work on Windows Phone. I need to download a tracklist as JSON over AJAX call. Doing so, causes Android Chrome to cancel the GET request to the set track.

This is making my head hurt since it works on desktop & windows phone :-)

Below is a small snippet of the code with similar idea.

$('.container').on('click', '.start', function(){
  $.ajax({
        url: "json/jsondata.json",
        dataType: "json",
        type: "GET",
        cache: true,
        context: document.body
  }).done(function(response){
    // while-loop through response
    // put track names in array etc...

    var mp3file = trackarray[0];
    App.$jmlPlayer.jPlayer("setMedia", {
        mp3: mp3file
    });

    // This doesn't work on iOS / Android
    $('.jmlPlayer').jPlayer("play");
  });
});

$('.container').on('click', '.next', function(){
  if(something){
    var mp3file = trackarray[nextIdx];
    App.$jmlPlayer.jPlayer("setMedia", {
        mp3: mp3file
    });
    // This does work on iOS / Android
    $('.jmlPlayer').jPlayer("play");     
  }
});
billyblaze
  • 69
  • 8

2 Answers2

3

I believe this is due to both iOS and Android needing the initial play on an HTML5 audio element to be driven by a user click event - this is to prevent pages auto-playing audio.

Even though a user has initiated the play, as your actual call to play is inside the AJAX callback, the browser thinks this is not user-driven as the AJAX call could have been initiated by anything.

The workaround is, as you found, to trigger a play of some kind while inside the user click event context. Any additional calls to the player should then work from that point onwards as expected (wherever they originate from).

Alternatively setting async: false in your ajax call options seems to work as well, I guess this keeps the AJAX callback in the user click event context.

actionshrimp
  • 5,219
  • 3
  • 23
  • 26
  • Further confirmation from [this post](http://stackoverflow.com/a/12220394/706561): "I know that in mobile safari any javascript call to play() must be in the same call stack as a user initialted click event". – c24w Jun 27 '14 at 13:45
2

Ok, after "few" hours of debugging this on iOS and Android devices, I found it to be easiest to play an empty .mp3 file on first user click/touch gesture. This way it works from there on out.

I have on idea why this works, but it just does.

billyblaze
  • 69
  • 8
  • Triggering `play()` once on jPlayer's ` – c24w Jun 27 '14 at 14:32
  • @billyblaze . you mean at the top of function before ajax we call play for empty mp3 ? – user1788736 Jan 03 '18 at 05:29