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!

In other programming news, I’m happy to report that my super ultra magic secret project is coming along great. I can’t reveal too much about it yet but let me just say that it involves Flash, PHP and MySQL working in unison. It’s also surprisingly efficient and will help everyone in the Lifestone communicate better than ever before.

If you think you know what I’m working on send me an email with your idea to {email expired}. Close guesses will get their Lifestone accounts upgraded to beta level access which will let you play around with my new creation before it officially comes out for everyone.

Mystery adds so more more excitement than simply surprising you doesn’t it?

The project started when I was thinking about hosting my old mod collection so that others could enjoy it. I wanted to make it a bit more informative than a directory listing though. I wanted to display the song title from inside the file, channels and file size.

After reading up on the mod file format and opening my mind to new concepts, I did just that. I created a nice little php script that could open and parse the mod file format and return the info I wanted. But wait… there was more goodies buried in the format. Things like the sample list which frequently contains messages from the author plus there was the holy grail, estimating the song length.

I kept working on more features each night, after a bit I was able to read the sample list messages, sample size, loop info and more. Things were going really well and I was learning a lot of new programming skills reading through these binary files. I decided that I would try to loop through all the pattern data and figure out how long each song is. What a quest it would be.

I started our reading the first note position then move on to different channels, rows and then finally patterns. I kept adding new functionality each night. An order reader, recording speed/bpm changes, delay effects, order jumps, pattern jumps and eventually odd song loops. It took me countless hours of work and quite a few major code changes along the way. Each problem brought with it more puzzles and eventual enlightenment when I figured out what was going on.

I can truly say I feel more like a programmer now more than ever. I’ve taken my lust for knowledge applied to to my beloved music collection and learned a lot of stuff along the way. I feel one step closer to my ultimate dream of becoming a video game programmer. I don’t know how long it will take or if I’ll even be successful but I know I’ll enjoy the quest and I will make a video game one day.

So without further ado please check out the new Music section which contains over 200 mod songs. Enjoy!