Data Sonification with JavaScript and Web Audio

Overview

Create a web audio page which sonifies a time series you've chosen to listen to. Your data source can be anything. Bring your own or feel free to scout online for datasets.

Before you start

Playing the demo and tooling up

Click on index.html, then click on its demo button (that looks like the Earth). The web page is being served from a server at CCRMA (Stanford) but the sound you hear is being computed in real time by your browser. Its internal code defines the class sonify which gets to work when a data file is loaded.

To make your own version and run it locally, extract the .zip archive of all files to a directory on your own machine.

Here are the latest source files for the project:

Important: simply clicking the "tides demo" feature on your local web page (as opposed to the above server version) only works if your browser's policy allows automatic local file access. Currently, Firefox will permit it, though from Firefox version 68 onward, there is a new setting which is required. Open a Firefox tab with the URL set to about:config and change privacy.file_unique_origin to false by clicking on that line. The change takes place immediately.

Now you can open your newly downloaded, local copy of index.html in a Firefox browser window. Click on the "tides demo" feature to test your sound. Drag and drop files from the data/ directory into the box in the web page directory to hear them. The file tides.dat is the same demo example. Try the one called data-drywhite.dat which is the monthly Australian sales of dry white wine in thousands of litres from January, 1980 through July, 1995.

The goal is all about using your own data, but by way of example here is a data file not yet on your computer. You can sonify it if you download it into the same data/ directory and then drag it in.

  • data-fortified.dat
    Monthly Australian sales of fortified wine: thousands of litres. Jan 1980 – Jul 1995.

More time series can be found by searching online. Take a look at the selection available in this library. If you want to sonify one of those, choose the .csv format and download it into the data/ directory. Be sure to edit the file before playing it, making sure that the first and last lines only contain a data value and no metadata and no delimiters (like a ").

If using Windows, there's one more step in preparing a new data file. With the text editor Notepad++ open the file and do a global replace of "," with "\n" and things should work.

Customize

For developing new versions, you'll want to open your local copy of index.html in a text editor. (Editing, saving, testing, running can be done in a simple text editor alongside your browser.)

The demo is pretty basic and only monophonic, but already demonstrates interesting choices. It plays a super-speeded up version of one year's worth of tidal data from a station with hourly monitoring. The scientist who created it, Chris Hartley (of UBC), said

I find it plays well at an update rate of 5 msec. You can hear the rising and then falling chirp-chirp-chirp of the major high tides, which get highest at the new and full moons, and then the slightly lower trill of two roughly equal high tides per day, which occurs during the quarter moons.

A first modification to try would be slowing the tempo down to hear individual data samples, say by a factor of 100. The parameter dur is controlling tempo.

  let dur = 0.005			// duration between data points in seconds

change it to

  let dur = 0.5				// duration between data points in seconds

should sound much slower and make long, prominent ramps. Now, let's make an initial fast attack and then a decay but keep the slower tempo.

  let aDur = 0.005			// attack duration 
  let dDur = 0.5			// decay duration

This also requires changes to the temporal sequence so that the new vaiables get applied to two ramp segments.

    applyRamps(sp.freq, sp.ampl, aDur)	// ramp to new freq and ampl
    yield aDur				// wait until ramps finish
    applyRamps(sp.freq, 0, dDur)	// hold same freq and ramp down to 0 ampl
    yield dDur				// wait until ramps finish

Workshop

The focus will be on practicing with your own data and making modifications to the sound. And, if time permits:

  • Alternate timbres - Web Audio API Nodes for sound generation and modification
  • Polyphony and graphing - Temperature and C02 as an example of running more than one data column and syncing with a graph
  • Recording the sound from the browser - Chrome Audio Capture is an example of a browser extension that does the job
  • BYOD - Bring your own data (and laptop)!

Documentation

See: