ForestMist » Programming

HTML5 Audio Loops

Daniel — Mon, 12 Apr 2010 00:02:01 +0000

One of the neatest things about HTML5 is support for the new tag. Like 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.

Loop Method 2

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

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.

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 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!

Aha, gotcha!

Daniel — Tue, 21 Oct 2003 04:33:23 +0000

Squished two bugs in the Lifestone forum. The first was an annoying yet harmless index not defined message. The second was a bug in the Page 1, 2 link code for longer threads. In certain situations with 10 replies, the paging code would not count the topic in it’s logic. This would cause the topic and 9 messages show up on the first page with no links to the second page which contained the 10th reply. I’m happy to say it’s all fixed now and thanks to Parr for spotting that one.

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?

Tweak Tweak Tweak

Daniel — Sun, 28 Sep 2003 04:53:17 +0000

Finally fixed the missing looping texture behind the Lifestone graphic to the top right. That’s been bugging me for like a year now, just never got around to fixing it. I also changed all php include() statements to require(). English translation of that is a minor speed boost for all pages on the site, woot.

Other misc updates include more code for the private messaging function. (I can only private message myself for testing which makes for very strange conversations, hehe.) Cleaning up some unused files from an the older odinsrealm and other minor tweaks.

I know it’s not the best site in the world or even the best site in australia but it’s my site and I love working on it. It makes me feel like I’m giving something of myself back to the world. That and I do have some very specific plans to create some web things that you’ve never seen anywhere before. Muhahaha!

No it doesn’t involve marshmallow peeps but it will be just as adorable.

Mod Reader v000 launched!

Daniel — Sun, 22 Jun 2003 05:37:14 +0000

It’s here, the thing I’ve been working on for more than a month of countless nights. It’s a PHP mod file reader and it works bloody great!

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!