Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Seamless audio looping trouble

Hi there, I'm developing a music site with "jam" tracks that need to loop seamlessly (i.e. no pause whatsoever!)

I'm using mp3s, and am aware of the fact that the mp3 codec "pads" at the beginning and end, but I have made sure to make the mp3s themselves seamlessly loop-able with a third-party tool. So the mp3 file itself is not the issue.

The repeat=true variable works, and causes the file to re-start, BUT there is still a noticeable pause. What seems to be happening is that the player keeps re-initializing at the start of each "repeat" (I can see the play/pause button toggling every time).

I'm imagining that there must be a way to handle this; unfortunately, I'm a newbie with API stuff. Please help with some idiot-proof suggestions. Thanks!

13 Community Answers

Up Down

JW Player

User  
0 rated :

Forgot to mention, it's the latest JWPlayer 6

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Do you have a link?

Up Down

JW Player

User  
0 rated :

Nope, no link - access for registered members.

After searching out some answers on my own, I found this very helpful code in one of the forums:

events: {
onTime: function(evt) {
if(evt.position >= 41.6) // you can use any number of seconds such as 15.8 , 12.3 etc.
{
this.seek(0); // jumps to 0 position (this way the video does not get reloaded)
}
}
}

It skips back to the beginning without actually re-loading. The tenth of a second variable needs to be played with, but once you hit on the right number, it loops pretty well.

Related question - how to get a seamless loop now in HTML5? The pause is back on iOS - doesn't seem to reload anymore, but there is still a noticeable pause. Please direct me to more information on the "loop" attribute. Here's a link for you:

http://www.longtailvideo.com/html5/autoloop/

From your own site. Any place I can go for more documentation on how this works? The test video seems to loop pretty well, but I'd like to test it on my audio. I have no idea how to do this though.

Up Down

JW Player

User  
0 rated :

Hmm, now looping has decided to stop happening on it's own on iOS. Seems very hit or miss. Is there a sure-fire way to ensure "repeating" or "looping" on iOS?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

@Brett – That link is using the default <video> tag, it isn’t even using the JW Player at all. That would mean the issue is an iOS issue in html5 <video> natively…

Up Down

JW Player

User  
0 rated :

I meant that my own mp3 file (using the jwplayer 6 with above code) has decided to stop looping on iOS, not the Buck Bunny video. That one works fine on iOS.

I'm looking for a solution that uses the jwplayer 6 to ensure reliable looping (and ideally seamless) on iOS / HTML5 failover. The above code makes it doable in Flash... I'm confused as to whether or not the repeat=true configuration has anything to do with making it loop on iOS (doesn't seem to make a difference). Any suggestions or suggested reading?

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

I don’t think it will make a difference. iOS won’t support in html5 <video> natively.

Up Down

JW Player

User  
0 rated :

It's strange, seems to be hit or miss. With the repeat/true config, the audio on iPhone 4 w/ ios 6 sometimes repeats a few times, sometimes only once, and sometimes not at all.

Is there a javascript solution that could work (one that I could still use the above javascript with)? I'm unfortunately not a javascript expert, I just lurk around online until I find something that works by trial and error...actually happens sometimes!

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Yes, it is hit or miss, as in really no supported at all. I don’t have any JS that will make this work, I’m afraid.

Up Down

JW Player

User  
0 rated :

Found this script on the apple dev site (http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1) under "Backwards compatible looping audio":

<!doctype html>
<html>
<head>
<title>Looping Audio</title>
<script type="text/javascript">
function init() {
var myAudio = document.getElementById("audio");
myAudio.addEventListener('ended', loopAudio, false);
}
function loopAudio() {
var myAudio = document.getElementById("audio");
myAudio.play();
</script>
</head>
<body onload="init();">
<audio id="audio" src="myAudio.m4a" controls></audio>
</body>
</html>

While not a totally audiophile-quality seamless loop, it nevertheless works consistently as a loop on the iOS. Also, on the iPhone and iPad there doesn't seem to be a way for the user to download the audio (a good thing).

Is there a way that I can use this code as a secondary option, while having my original JWPlayer code as the primary option? I figure that way, the only time HTML5 will be called is by a user on an iDevice - making the audio harder to steal, and still allowing me to have the look and control of the JWPlayer for the majority of users.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

You would have to use your own JS user agent detection, and check for iOS and show then, otherwise show the JW Player.

Up Down

JW Player

User  
0 rated :

Implementing this seems to do the trick:

http://www.aleosoft.com/flashtutorial_showimage.html

Enclosed each block of code from the above posts in their own div and followed the steps in the link. Voila!

JWPlayer from computer, HTML5 audio controls from iDevice.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Nice!

This question has received the maximum number of answers.