Offline Sound: No Flash, No File

I just did some tinkering with offline sound and it turns out you can embed an audio clip in an HTML file, and play it without using Flash. I could have demo’d this in a raw HTML file, but it was just as easy to stick it in a Tiddlywiki file. So I made a TiddlyWiki called JinglyWiki. Click on the button and it will play a sound. If you grab the file (safest using a tool like Curl or wget, as the browser will sometimes Save As something different), you can run it offline and it will still play the sound.

JinglyWiki started after an office conversation yesterday. We had a flaky wifi connection and were pleased to be able to play a beat on http://instantrimshot.com to signify a re-connection. This got us thinking about playing beats in Tiddlywiki. Jeremy mentioned the possibility of data: URIs, and I thought back to Reinier’s great effort in playing sound without Flash. I wondered if it would work with data: URIs and to my pleasant surprise, it did. At least in FF3, which is all I’ve tested so far. I also forgot how tiny the code is to play audio without Flash – you just add an element to the page.

The point of JinglyWiki is you can stick a 300K file on your local file system or a USB stick and play gratuitous sounds without being online. Your iPod cost you several hundred bucks, whereas JinglyWiki is entirely free. Free as in you can spend your money on beer instead. JinglyWiki may well be the best portable music player you never paid a penny for. Groovy.

It would be so much more useful with some code to dynamically generate WAVs, but that’s a project for another day.

As for the name, it’s a play on the much more important project Phil Hawksworth has initiated to build a JQuery based Tiddlywiki framework: JigglyWiki. I think this nascent effort is going to produce some wonderful plugins for the JQuery community and be an important enough project to derive novelty joke names out of :), so I’m setting the trend here.

The data itself is 15KB for about a second of voice content.

Here’s the plugin code. Trivial or wot?!!!

javascript

  1. config.macros.jingle = {}
  2. config.macros.jingle.handler = function(place,macroName,params,wikifier,paramString,tiddler) {
  3.  
  4.   button = document.createElement("button");
  5.   button.style.fontSize = "4em";
  6.   button.innerHTML = "Play Me! Play Me!"
  7.   button.onclick = function(ev) {
  8.     startWav(SOUND_URL);
  9.   }
  10.   place.appendChild(button);
  11.  
  12.   // cancel dbl-click so we can follow our natural urge to click on the button incessantly
  13.   story.getTiddler(tiddler.title).ondblclick = function() {}
  14.  
  15. }
  16.  
  17. // non-flash sound handling adapted from http://www.zwitserloot.com/files/soundkit/soundcheck.html
  18.  
  19. var embedEl;
  20.  
  21. function startWav(uri) {
  22.         stopWav();
  23.         embedEl = document.createElement("embed");
  24.         embedEl.setAttribute("src", uri);
  25.         embedEl.setAttribute("hidden", true);
  26.         embedEl.setAttribute("autostart", true);
  27.         document.body.appendChild(embedEl);
  28. }
  29.  
  30. function stopWav() {
  31.   if (embedEl) document.body.removeChild(embedEl);
  32.   embedEl = null;
  33. }
  34.  
  35. // To make a new sound, cut and paste into hixie's handy Data URI Kitchen
  36. // http://software.hixie.ch/utilities/cgi/data/data.pl
  37.  
  38. var SOUND_URL="data:audio/x-wav,RIFF%17%1C%00%00WAVEfmt%20%10%00%00%00%01%00%01%00%40%1F%00%00%40 ........................" // snipped

Where’s that Sound Coming From?

Stop the Noise. Don't really stop the noise, I usually like it, but nonetheless I like this photo too.

Sound Thinking

Where's that sound coming from?
An app inside my box?
Is it ITunes on the desktop
Or YouTube in the 'Fox?

A Skyper shouting at me?
Or Pandora playing faves?
Media Player come to life?
Hmmm ... Real with recent saves?

A podcast I'm preparing?
A vidcast made for nerds?
Nope, it seems to be this picture,
It says a thousand words!

Huh?

I started writing the first four lines of this post when I realised I was writing a “poem”, so I just kept going even though I’m clearly no “poet”.

Anyway, my point is:

  • People multitask, running ten or more browser and desktop apps at the same time.
  • Sound is arising a lot inside the browser these days, and I’m not talking about Axel F midis running in an off-colour GeoCities page. YouTube and wannabees, Flash telephony like JaJah, Podcasts being played by publishers as well as aggregators, Flash and Ajax games. Hopefully we’ll see more Ajax developers introduce Richer Plugins to include sound, because good sound effects make interaction more productive and more fun.
  • So I’d like to see an app that locates the visual source of the sound, which 95% of the time, can indeed be traced back to a particular window or browser tab. And if there is such an app, it should be baked into the OS. For instance, you could use an Alt-Tab-like sequence to isolate each sound as you rotate through the various sources. Nothing more annoying than having twenty browser tabs open and not knowing where the sound is coming from.

Update Feb 26, 2012: And finally Chrome introduces it. Available now on Canary channel.