Html5 Audio Looping

Custom Loop with JavaScript

Craft a Loop with the 'ended' Event

Loop your audio by listening to the ended event and creating a custom loop:

var audio = new Audio('your-audio-file.mp3');
// When the music stops, it doesn't mean the party's over.
audio.addEventListener('ended', function() {
    this.currentTime = 0; 
    this.play();
}, false);
audio.play(); // kick-start that never-ending party!


Checking Browser Support

Modern browsers should play nice with the loop attribute, but it's best to ensure compatibility:

// Let's ask our audio politely if it would loop.
var audio = new Audio('your-audio-file.mp3'); 
if (typeof audio.loop == 'boolean') { 
    audio.loop = true;
} else {
    // If audio isn't in the mood, we persuade it.
    audio.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
}
audio.play();


This little chat with the browser checks if it supports the loop attribute and uses the event listener procedure if needed.

Buffering Audio for Continuous Play

Make sure your audio track is ready before setting the loop to prevent any hiccups:

// Audio. Ready for a long journey?
var audio = new Audio('your-audio-file.mp3');
audio.addEventListener('canplaythrough', function() {
    audio.loop = true; // Audio's ready. Get set. Loop!
    audio.play();
}, false);


The canplaythrough event tells us when the audio is fully buffered and ready to play.

Bulletproof Actions and Troubleshooting

Resolving Browser Issues

Looping seems simple enough, but browser-specific issues can come into play. So, always test your code in different browsers.

Audio File Compatibility

Nothing is more annoying than incompatible file format. For smooth playback, stick to universally supported formats like MP3 and OGG.

Test in Real Environment

For accurate testing and troubleshooting, demo your issue in live examples or in online code playgrounds like CodePen.

Handling Imperfect Loops

For those pesky tiny gaps in the loop, adjust the currentTime just before the track ends:

// Agent: Audio. Mission: Seamless Looping.
// Potential issue: Tiny gaps in the loop. Your solution, agent?
audio.addEventListener('timeupdate', function() { 
    var buffer = 0.44; // Agent Buffer to the rescue!
    if(this.currentTime > this.duration - buffer){
        this.currentTime = 0;
        this.play();
    }
}, false);


This method allows us to maneuver just before the audio officially ends, hence reducing the delay caused by the ended listener.