HTML5 Audio Loops

One of the neatest things about HTML5 is support for the new <audio> tag. Like <video> it allows you to natively support media in good browsers like Chrome, FireFox, Opera and Safari. Add a touch of JavaScript and a new era of  media applications become possible.

Synthesizers, music trackers and games require seamless audio loops though so we need something a bit simpler for our first foray into HTML5 audio.

Oooh, how about a retro beatbox with individual track adjustments (start/stop/loop/volume) that could be used to build a unique soundscape from many separate instruments. Perfect!

Fantasy can only become reality through hard work so let’s get started with some tests first.

Loop Method 1

Uses the ‘loop’ property.

<audio id="audio_1" controls preload loop>
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.ogg">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.wav">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.mp3">
</audio>

Loop Method 2

Uses a JavaScript function to loop when an ‘ended’ event is called.

<audio id="audio_2" controls preload>
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.ogg">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.wav">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.mp3">
</audio>

document.getElementById('audio_2').addEventListener('ended', function(){
this.currentTime = 0;
}, false);

Loop Method 3

Uses two JavaScript functions and two audio elements with the same source to alternate playback duties.

<audio id="audio_3" controls preload>
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.ogg">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.wav">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.mp3">
</audio>
<audio id="audio_4" controls preload>
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.ogg">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.wav">
	<source src="/wp-content/uploads/2010/04/html5-audio-loop.mp3">
</audio>

document.getElementById('audio_3').addEventListener('ended', function(){
this.currentTime = 0;
this.pause();
document.getElementById('audio_4').play();
}, false);

document.getElementById('audio_4').addEventListener('ended', function(){
this.currentTime = 0;
this.pause();
document.getElementById('audio_3').play();
}, false);

Browser Support

Tests were done on Windows 7 with Chrome 5.0.342.9 beta, FireFox 3.6.3, Internet Explorer 9.0 Preview, Opera 10.51 and Safari 4.0.5.

Chrome seems to trigger loops before the current sound is completely finished leading to some odd jumpiness. All loop methods are affected.

FireFox doesn’t seem to like the ‘loop’ property of method 1, odd. Method 2 has the slightest of delays between loops and method 3 was actually perfect! I didn’t believe it until verification at the millisecond level with Audacity. Hooray Mozilla!

Internet Explorer 9 doesn’t support the audio tag yet. Hopefully it will before an official release.

Opera performs almost as well as FireFox although there is still a small delay even when using method 3.

Safari seems slow to start playback which is very easy to detect once you hear a loop. All loop methods affected.

Feedback on other browsers/OS compatibility would be very interesting so please feel free to discuss any findings in the comments below.

Final Thoughts

As of right now (April 11, 2010) only FireFox can do a perfect loop by cheating a bit and using two <audio> elements with JavaScript.

So yeah, it’s a bit too early for HTML5 audio loops but don’t let that stop you from creating sound boards, media players and other fun things.

Hopefully with some more optimizations audio support will continue to improve and a HTML5 beatbox fantasy can become reality.

Until then there are plenty of other fun things to play with.

Cheers!