Archive for category HTML5

Mac Safari Web Developer Tools (inc javascript debugging!)

make sure you don’t have safari running, then go to the terminal window and type;

defaults write IncludeDebugMenu 1

You will have a new menu when you launch safari entitled “develop” in safari 5, and “debug” i believe in earlier versions.

No Comments

HTML5 Audio and Video (Media) Tags – How do you know when the data’s loaded? And how to play multiple instances of the same sample at the same time

Quick post with a snippet of code I’ve used for the 8 week game competition I’m in- I’m going to be using html5 audio element for all my game’s sounds and needed a way to make sure the samples were totally loaded so the resource manager knows when to hand control to the game- So after flicking through the html5 spec came up with this code (utilising jQuery to bind my event handler)

Note- This applies to any media object- so the video tag as well, but I’ve only tried this with audio.

var ao = new Audio();
$(ao).bind('canplaythrough', function() { // totally loaded
alert('ready to play');
ao.src = 'sounds/my_sound.wav';

The above example will wait until the media element has enough data to comfortably play through without stopping to buffer. if you wanted you could also bind to a whole host of other events in exactly the same way, which you can read about here. You can check the status at any time to see how loaded the audio/video file is like this;


This will return you back a number between 0 (HAVE_NOTHING) to 4 (HAVE_ENOUGH_DATA) – full info can be found here.

Because I’m building a game I have slightly different requirements to the average web project- The way I use this is have a central “ResourceLoader” which I load up with all the url’s to the asset’s I’ll be using, this then reports when all the assets are totally loaded and hands control to the game. So there is a single instance of every image and audio element I’m using- I then hand each loaded sound to the sound manager to play. This raises a problem when i want to play the same sample more than once, overlapping because you are essentially just passing around reference to the same audio object- so i execute the play method, then execute it again and nothing happens because it is already playing! The answer is to perform a deep copy of the audio element before playing- because this is a DOM object you can do this easily like so;

var instance1 = ao.cloneNode(true);
var instance2 = ao.cloneNode(true);;;

This way you can hit the play() method of instance1, and the instance2 and they will both play at the same time, totally independant of each other, even though they both originate from the pre-loaded instance ao.

Anyway- you can see live demos of this here;

Notice the need for 2 demos because chrome cant read wav and mozilla wont do MP3! Ogg vorbis is a common format for the two, but i couldn’t quickly find any example files to use! Read here for browser file format support.

These demo’s were made for us in the 8weekgame site – bare in mind the sound manager class I literally started about an hour ago so it’s got hardly any functionality but it does play sounds so take a look at the source code and hopefully it will all make sense!

No Comments

8 Week Game Competition

I’m currently participating in the 8weekgame competition.  This 8 week sprint is dedicated to (by picking out of a hat) a clone of the retro classic, “Manic Miner“- I’ve chosen to build mine using javascript and the canvas element in html5 (and probably the audio elements also).  The other 2 guys are using Microsoft XNA framework; with Martin targetting windows, and Gareth targetting XBox live arcade.  You can follow our progress here ;

No Comments

Backwards compatible Embedded HTML 5 Video

A couple of useful guides about how to be handling embedded video which is compatible with the iPhone & iPad (given the lack of flash support) using HTML 5, while still offering a flash alternative for older (main-stream) browsers


No Comments

HTML5 & the Processing.js JavaScript library

Just reading up on html5 and the processing.js javascript library which takes advantage of the new canvas element to do some pretty cool stuff (check out their ‘exhibition’ section) – came across this site which has loads of useful stuff on it..

No Comments