A couple of weeks ago, I started digging into the Web Audio API. Initially, I was just looking to find out what it was and see if any ideas for toys presented themselves but, kinda predictably, I ended up getting elbow-deep in a bucketful of audio routing graphs, gain nodes and impulse responses.

I'll write up a more detailed post about the API shortly but Max and I used it quite heavily in the 5apps hackathon we attended last week and I wanted to share the outcome of our hacking.

SoundScape

“A Nokia Map mashed together with a bunch of APIs and positional audio to create an immersive map experience.”

For a better explanation of how SoundScape works, check out Max's slides:

• http://mmarcon.github.com/slides/soundscape/

In essence, we use a Nokia Map as the base, add on a Flying Hamster, make a call to Freesound.org for geotagged audio samples, male a call to LastFM for upcoming concerts, make a call to Deezer for the most popular track by the artist playing the event reported by LastFM and put them all together in the browser using 3D positional audio. Basically.

The source is available on GitHub

The Actual Demo

SoundScape (Web Audio API-capable browser required)

I don't find myself using screensavers that much these days. Sure, they made sense when you needed to avoid burning a ghost of the windows start bar into your CRT monitor but with TFTs, LEDs, projectors, OLEDs and whatever else, it's rare you'll find hardware that actually needs protecting like that any more. On top of that, in my case, I'm either at my desk coding or at the coffee machine refilling. There aren't that many opportunities for me to appreciate a warp-speed starfield or some infinite pipes.

What I'm saying is: I miss screensavers.

Since I started writing for CreativeJS, I've seen a lot more examples of clever, cool, pretty and downright creative demos and toys written in JS than I ever had before. You can probably figure out where I'm heading with this: these would make cool screensavers.

A quick bit of googling later and I found a couple of applications that let you set a web-page fullscreen as your screensaver. Of course, you can't just set any old demo as your screensaver, many of them rely on user interaction which kinda defeats the purpose.

Downloads

OS X

WebSaver

Unfortunately, this uses plain-old standard WebKit so no WebGL demos. Maybe someone can fork Chromium to make it do this.

Windows

web-page-screensaver

This one seems to be based on IE so it probably won't work with the canvas-based demos below. If you can point me to a WebKit-based one, I'll include that instead.

Old-school screensavers

Flying Windows

http://dl.dropbox.com/u/16145652/flying/flying.html

Starfield by Chiptune

http://www.chiptune.com/starfield/starfield.html

Non-canvas

Insta-Art by me

http://thelab.thingsinjars.com/insta-art.html

Newsola by Nick Nicholaou

http://www.newsola.com/#/uk

Canvas

Falling blocks by Lionel Tardy

http://experiments.lionel.me/blocs

MMOSteroids by Seb Lee-Delisle

http://seb.ly/demos/MMOsteroids.html

Origami by Hakim El Hattab

http://hakim.se/experiments/html5/origami/

The Single Lane Superhighway by Aaron Koblin and Mr.doob

http://www.thesinglelanesuperhighway.com/

Ablaze by Patrick Gunderson

http://theorigin.net/ablazejs/

Visual Random by Dimitrii Pokrovskii

http://voxelrain.appspot.com/

Circle Worm by Ilari

http://style.purkki.ilric.org/projects/js_wave/

Boids by Jason Sundram

http://viz.runningwithdata.com/boids/

3D Globe by Peter Nederlof

http://peterned.home.xs4all.nl/demooo/

WebGL Needed

Just in case someone in the comments finds a WebGL-capable screensaver, here are the demos I liked that require WebGL.

Clouds by Mr.doob

http://mrdoob.com/lab/javascript/webgl/clouds/

WaterStretch by Edouard Coulon

http://waterstretch.ecoulon.com/

Further Development

The ideal screensaver would allow you to enter several different URLs to allow you to easily save them. There should also be a checkbox to mark demos as 'works offline'. That way, when the screensaver starts, it checks for connectivity displays a screensaver that doesn't require a connection.

Add your suggestions below.

Exciting news! The Nokia Web Dev Blog is finally live!

You might remember it was one of my 2012 ToDos and I can now move the To-Do to Done.

So far, I've put two posts up, one on using background-size: cover and one on quick prototyping using python SimpleHTTPServer.

I'm not convinced a URL with '.../Blogs/blog/...' is necessarily the most memorable so maybe the next task would be to get something catchier. Any suggestions?