Sonic sparklines

I’ve seen some lovely examples of the Web Audio API recently.

At the Material conference, Halldór Eldjárn demoed his Poco Apollo project. It generates music on the fly in the browser to match a random image from NASA’s Apollo archive on Flickr. Brian Eno, eat your heart out!

At Codebar Brighton a little while back, local developer Luke Twyman demoed some of his audio-visual work, including the gorgeous Solarbeat—an audio orrery.

The latest issue of the Clearleft newsletter has some links on sound design in interfaces:

I saw Ruth give a fantastic talk on the Web Audio API at CSS Day this year. It had just the right mixture of code and inspiration. I decided there and then that I’d have to find some opportunity to play around with web audio.

As ever, my own website is the perfect playground. I added an audio Easter egg to a while back, and so far, no one has noticed. That’s good. It’s a very, very silly use of sound.

In her talk, Ruth emphasised that the Web Audio API is basically just about dealing with numbers. Lots of the examples of nice usage are the audio equivalent of data visualisation. Data sonification, if you will.

I’ve got little bits of dataviz on my website: sparklines. Each one is a self-contained SVG file. I added a script element to the SVG with a little bit of JavaScript that converts numbers into sound (I kind of wish that the script were scoped to the containing SVG but that’s not the way JavaScript in SVG works—it’s no different to putting a script element directly in the body). Clicking on the sparkline triggers the sound-playing function.

It sounds terrible. It’s like a theremin with hiccups.

Still, I kind of like it. I mean, I wish it sounded nicer (and I’m open to suggestions on how to achieve that—feel free to fork the code), but there’s something endearing about hearing a month’s worth of activity turned into a wobbling wave of sound. And it’s kind of fun to hear how a particular tag is used more frequently over time.

Anyway, it’s just a silly little thing, but anywhere you spot a sparkline on my site, you can tap it to hear it translated into sound.

Have you published a response to this? :


Dylan Smith

I stumbled across that easter egg this week, and loved it. Went through and listened to all of them.

# Posted by Dylan Smith on Thursday, September 14th, 2017 at 1:35pm


# Liked by Chris Taylor on Thursday, September 14th, 2017 at 1:43pm

# Liked by Owen McGauley on Thursday, September 14th, 2017 at 5:42pm

Previously on this day

8 years ago I wrote The Language of the Web

The Breaking Development conference was the perfect platform for discussing all things mobile.

9 years ago I wrote Alpha

A robot visits Brighton in the 1930s.

10 years ago I wrote HTML5 test results

Tabulating the results from a workshop.

10 years ago I wrote Impact

One Friday in September.

12 years ago I wrote Parroting Pareto

Where the 80/20 principle breaks down.

13 years ago I wrote Speaking at d.Construct

Happy happy, joy joy.

15 years ago I wrote No rest for the wicked

Since getting back from my (extended) holiday in Florida, it’s been go go go. My workload was piling up while I was away and now I’m making up for lost time with Message and Semantico.