When trying to play static audio content via the jplayer plugin on our website, after 1.5 to 2 minutes the audio will restart to the beginning and continue doing that over and over.
It only happens in iOS products. I set up a webform where folks experiencing any playback issues can fill it out with several fields asking what technology they're using. 100% of responses so far are from folks using Apple products. This correlates with my experience trying to replicate the problem as well. Although one person complained and said he was on an iMac, I've tested with two macbooks and it works fine.
You can give it a listen here: http://kansaspublicradio.org/blog/dan-skinner/conversations-gordon-lafer-one-percent-solution (if you're using Chrome you'll need to enable Flash - that's another problem I'm working on, and I don't think they're related)
It doesn't happen in our app running on those devices, however, so we don't think it's a problem with our audio server - which is Icecast. Yes we're serving the static audio files on our streaming audio server.
Here's my jPlayer code:
jQuery(document).ready(function($){
var theSolution = "html,flash"; // use HTML5 or flash?
// we need to find if it's Chrome or not because HTML5 + icecast is not working in chrome
// see: http://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome/13348618#13348618
var isChromium = window.chrome,
winNav = window.navigator,
vendorName = winNav.vendor,
isOpera = winNav.userAgent.indexOf("OPR") > -1,
isIEedge = winNav.userAgent.indexOf("Edge") > -1,
isIOSChrome = winNav.userAgent.match("CriOS");
if(isIOSChrome){
// is Google Chrome on IOS
theSolution = "html,flash";
console.log('is google chrome on iOS');
} else if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isOpera == false && isIEedge == false) {
// is Google Chrome
theSolution = "flash,html";
console.log('is google chrome');
} else {
// not Google Chrome
theSolution = "html,flash";
console.log('is NOT google chrome');
}
$("#kpr_jplayer-1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3: "http://streaming.kansaspublicradio.org:8000/mp3/First_9665638.mp3",
});
},
swfPath: "/sites/all/libraries/jplayer",
supplied: "mp3",
play: function() {
// To avoid multiple jPlayers playing together.
$(this).jPlayer("pauseOthers");
},
cssSelectorAncestor: "#jp_container_1",
wmode: "window",
globalVolume: true,
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
preload: "auto",
solution: theSolution, // see above
});
});
Why is it doing this? What can I do to fix it?
