It turns out that browser caching behavior for <audio> data varies wildly among browsers. The following table shows the HTML5 <audio> caching behavior of various browsers. I tested all of them on OS X 10.6 with the standard Mac Apache server hosting all of the tested audio files.

* Though not cache related, audio output in Chrome is often clipped before the end of the actual audio data. When this occurs, Chrome fires the onended event even before the audible output finishes.

Except for Firefox 3.6, all of these browsers seem to exhibit pretty terrible caching behavior when it comes to audio. I've reported bugs where I thought appropriate, but maybe I'm missing something. Am I supposed to include additional headers in the server-side response? Or maybe I'm glossing over some key part of the <audio> API? If so, please let me know. If not, yikes: <audio> support has definite room for improvement.

Below is an example instance of the widget panning, zooming, and crossfading three images. The BSD code for the widget is in KenBurns.js. The code for this particular demo can be seen by viewing the source of kenburns-demo.html.

I didn't take the time to comment this little experiment. If you'd like more info about how to use it or how it works, drop me a comment.

http://github.com/parente/spaceship

The project BSD licensed and hosted on Launchpad. PyPI tracks downloads for the latest stable version and documentation.

For completeness, here's the code I sent him that accomplishes the same thing using the older Glade.XML object for those that are interested. It answers a long standing mailing list question about using Glade.XML.Autoconnect in IronPython.

import clr
clr.AddReference('gtk-sharp')
clr.AddReference('glade-sharp')
import Gtk
import Glade
 
def PyGladeAutoconnect(gxml, target):
    def _connect(handler_name, event_obj, signal_name, *args):
        name = ''.join([frag.title() for frag in signal_name.split('_')])
        event = getattr(event_obj, name)
        event += getattr(target, handler_name)
 
    # add all widgets
    for widget in gxml.GetWidgetPrefix(''):
        setattr(target, gxml.GetWidgetName(widget), widget)
    # connect all signals
    gxml.SignalAutoconnectFull(_connect)
 
class Application:
    def __init__(self):
        gxml = Glade.XML("test.glade", "window1", None)
        PyGladeAutoconnect(gxml, self)
        # window1 comes from glade file
        self.window1.ShowAll()
 
    def onWindowDelete(self, o, args):
        # connected via glade file definition
        Gtk.Application.Quit()
 
Gtk.Application.Init()
app = Application()
Gtk.Application.Run()

Here's a new example script that does work with the latest Outfox 0.3.5 release. Instead of polluting the example with all the complications of navigating the GMail DOM, I've picked a much simpler target. This script simply speaks the number of major sections (level 2 headings) in a Wikipedia article when the page loads. It's not as sexy, but the code is much easier to understand.

To try this script, make sure you have the Greasemonkey 0.8 and Outfox 0.3.5 extensions installed on Firefox 3.0 or 3.5. Then visit the following link to have GM install the script: citation_announcer.user.js.

// ==UserScript==
// @name Sections count
// @namespace http://www.mindtrove.info/
// @description Speaks the number of h2 sections in a Wikipedia article
// @include http://*.wikipedia.org/wiki/*
// @require http://www.json.org/json2.js
// @require http://outfox.googlecode.com/svn/trunk/js/outfox.js
// ==/UserScript==
 
// number of major sections
var sections = 0;
 
function onOutfoxAudioInit(response) {
    // say the number of main sections
    outfox.audio.say(sections + ' main sections');
    // return the parameter for other outfox deferred callbacks
    return response;
}
 
function onOutfoxInit(version) {
    var content = document.getElementById('bodyContent');
    // count the number of main sections
    sections = content.getElementsByTagName('h2').length;
    // take one back for the TOC heading if it's present
    if(document.getElementById('toc')) {
        --sections;
    }
    // start the outfox audio service
    var def = outfox.startService('audio');
    def.addCallback(onOutfoxAudioInit);
    // return the parameter for other outfox deferred callbacks
    return version;
}
 
function onDOMContentLoaded() {
    // create a node for outfox use
    var div = document.createElement('div');
    document.body.appendChild(div);
    // initialize outfox
    var def = outfox.init(div, JSON.stringify, JSON.parse);
    def.addCallback(onOutfoxInit);
}
 
// this event triggers execution of the GM script
onDOMContentLoaded();

The result is Spaceship!, a JavaScript game for Firefox built using Creative Commons licensed music, sound, speech, and graphics; the Dojo toolkit; and the Outfox add-on. In the primary portion of the game, the player fires shots at a grid of tiles trying to hit enemy ships. When the player runs out of ammo, he or she plays a set of minigames in an attempt to earn more shots. Of course, hazards and bonuses abound to keep things interesting.

A text description is nice, but you're better off watching the gameplay video below to really understand what I'm jabbering about. Or, better yet, grab Outfox and Firefox 3 and play it yourself online at http://spaceship.mindtrove.info.

What a great exercise this turned out to be!  The payoff has been manyfold:

1. I learning a ton more about Dojo and writing custom widgets.
2. I developed some interesting MVC techniques for aural+visual event driven apps in Dojo. I hope to blog about these.
3. I built some nice, reusable Dojo components for future browser games.
4. I got to show off client-side music, sound, and speech in Firefox with pure JS. Maybe this will spur development of other audio apps?
5. I drummed up some interest in extending Spaceship! with new minigames. Hopefully more coming soon.
6. My wife was entertained. Yes, she will actually ask to play the game if she sees me working on it.
7. I had lots of teachers ask when the game will be online at Maze Day. Well, here it is, a month later.
8. And, most importantly, a steady stream of kids (and adults) got to play it at Maze Day. Hopefully even more can enjoy it now online.

If you try it out, leave a comment. It's new, there are bugs, and there is room for improvement. But anything you report will help in making the game better.

I owe many thanks to the artists who made their wonderful images, songs, and sounds available under open licenses. Their names appear in the Credits section off the main game menu. Be sure to check them out.

Oh, and of course the game code itself is BSD-licensed. Grab the code from http://svn.mindtrove.info/spaceship http://github.com/parente/spaceship if you're feeling adventurous.

Like many IBM news posts, the article included a video embed "for more information." Clicking the vid, I was greeted with a copy of this clip.

That's right. I was rickroll'd by IBM. I honestly did not see that coming.

If you're writing your test cases separate from the page under test (always a good idea), dojo.robotx craftily hides the iframe containing the page to test until the robot is ready. If you're not using dojo.robotx (my constraint), you must be careful to avoid that magic text box in a similar fashion.

Article at Gizmodo