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!

Here are some ways to target all the image elements on a page while leaving the rest of the hypertext in peace.

JavaScript

Lightweight, no framework required and works well in IE 6, 7, 8, Chrome, FireFox and Safari. Demo »

document.oncontextmenu = context_menu;

function context_menu(e) {
if (!e) var e = window.event;
	var eTarget = (window.event) ? e.srcElement : e.target;

	if (eTarget.nodeName == "IMG") {
		//context menu attempt on top of an image element
		return false;
	}
}

jQuery

Perhaps the prettiest code of the three. Demo »

$(document).ready(function(){
	$(document).bind("contextmenu",function(e){
		if(e.target.nodeName == 'IMG'){
			//context menu attempt on top of an image element
			return false;
		}
	});
});

MooTools

Moo… Demo »

window.addEvent('domready', function() {
	$(document.body).addEvent('contextmenu', function(e) {
		if(e.target.nodeName == 'IMG') {
			//context menu attempt on top of an image element
			return false;
		}
	});
});

Final Thoughts

With a bit more code you can target specific IDs, class names or any number of elemental combinations. Doing so will limit your context menu friendly fire and keep both you and your users in a happy balance.

Cheers!

Founder of the home for the experimentally insane.

I’ve added a new experimental section to the site which I hope will contain many a mad thing for you dear visitor.

On on first journey we find out if its possible to create strange shapes using only CSS.

So come one and come all to see the gross disregard for copyright law as we make your very own Bahamas logo using CSS!

Bookmarks are easily forgotten but with a few tweaks FireFox 3 can back them up for you.

Customize your bookmark backup settings

Open FireFox 3.

Go to about:config in your location bar.

Specify browser.bookmarks as your filter.

Set browser.bookmarks.autoExportHTML to true.

Create a new string titled browser.bookmarks.file and set its value to the location you want to backup all your bookmarks to.

In my case I entered “D:\ForestMist\Personal\bookmarks.html”.

Restart FireFox.

Epilogue

Everytime you close FireFox it will export a fresh copy of all your bookmarks to the file you specified. There may a slight performance hit for doing this but I think the benefits far outweigh the cost.

Now you can mirror your bookmarks with services like SugarSync, share them easily with friends or just have peace of mind in case the new JSON database FireFox 3 uses behind the scenes explodes in a spectacular example of Murphy’s Law.

Pleasantries

• Right click in the address bar and you can “Paste and search” or “Paste and go” depending on the text in the clipboard.
• Local searches open up a pane which shows you the number of matches along with buttons that let you easily navigate to them. Matches are also displayed as colored lines in the vertical scroll bar.
  
  
• Input field highlighting is nice and obvious.
• Address bar highlighting.
• Downloads are unobtrusively displayed in a bar at the bottom of your browser.
  
  
• Tabs can be separated from their parent window and then recombined later.
• The special page “about:memory” not only shows you memory usage of Chrome but of any other competing web browsers that are open simultaneously.
  
  
• Incognito mode means they’ll never know where I go. Well, unless they subpoena my ISP records….
  
  
• The default page of popular, recent bookmarks and recently closed tabs is very helpful.
  
  

Unpleasant Fleas

• View source slowly reloads the page instead of reading from a local cache.
• I’ve had trouble pasting via keyboard shortcuts in certain HTML input fields. Right click + paste selection always works though.
• RSS feeds are viewed as plain text and there is currently no support for subscribing to them.
• Downloads started in one window are not displayed in the download manager of another. The download is not interrupted thankfully but you are unable to monitor it if you close its parent window.
• The circular download progress graphic is very hard to monitor at a glance. A simple bar would have been much more effective.
  
  
• CTRL+Mouse Wheel only changes text size. I would prefer it to zoom the entire page instead.

I will continue to use Chrome for select tasks but sadly relying on it fully would be folly. Lack of RSS features and a missing plugin architecture (NoScript is a must) is just too high of a cost.

I think of Chrome as speedy motorcycle in your garage of browsers. She’s great for tearing up the asphalt on the weekends but just don’t take her out in the rain or you’ll wind up as road pizza. Soggy, messy, squelchy burbling road pizza. Missing quite a few important toppings too I might add.