Occasional posts on subjects including field recording, London history and literature, other websites worth looking at, articles in the press, and news of sound-related events.

25 May 2015

The trouble with sound maps

A SOUND MAP nearly always consists of a Google Map on a webpage sprinkled with little placemarkers. The placemarkers are like a randomly-shuffled index and when you click on one, an audio player appears in a popup box. They have no preferred sequence, they usually aren’t sorted into categories and they are not reached through the unfolding of a taxonomic hierarchy. They’re just there, meaning a geographically accurate depiction of where the recordings were made to within a few tens of meters.

Sound maps are pretty useful in giving access to large numbers of recordings made over a wide area. With projects like Radio Aporee and Cities and Memory that area can extend to many countries. They’re also the obvious way to depict the dispersal patterns of sets of recordings where that’s of relevance to the recording agenda, as with the 12 Tones of London stats-driven project on this site.

However, if you think that sound maps are the final word in presenting recordings of places then take a look at Tapan Babbar’s new website Sounds of Mumbai. This includes a clickable sound map but, most of the time, it’s wisely consigned to the background. What makes Sounds of Mumbai stand out is its impressive use of photography. As each recording plays, a photograph of the place or event fills most of the screen and this makes all the difference.

Sounds of Mumbai website screenshot

A purist might claim that field recordings are best experienced while lying blindfolded in a flotation tank, but I found the only slightly distracting elements to be the jiggling levels meter wrapped around the central play button, and the forward and back buttons which wobble impatiently when the cursor hovers on top of them. Auditory attention seems to face competition from fast-moving images rather than static ones.

The site has only thirteen recordings and it’s most likely meant as a portfolio entry demonstrating Babbar’s skills as a web designer. But I was left feeling dissatisfied with parts of the London Sound Survey. Imagine how much better the Thames Estuary section would work if its recordings were heard in conjunction with full-screen photographs showing the marshlands and windy expanses of the Hoo Peninsula, or the low-tide prairies of mud and sand at Shoeburyness.


For the past year and a half I’ve been trying to turn away from sound maps towards sound graphics. A sound graphic is defined here as a webpage main content block in which the positions of sound-playing elements or links are meaningful but do not show with any precision where the recordings were made, or else represent values unrelated to location.

One reason for this was the relative success of the Waterways diagram, which in turn hitches a free ride on Harry Beck’s schematic of London’s tube network. Other reasons are to do with what I see as the limitations of sound maps in general and how life can be more fun when you escape their confines.

First, sound maps hog a lot of page space while leaving little room for graphical ingenuity. This wouldn’t matter so much if Google’s street map layer was absorbing to look at – but it usually isn’t. In contrast, the alternative aerial photographic view can be endlessly fascinating, to the extent that site visitors may lose interest in listening to recordings altogether.

Second, a sound map immediately elevates a recording’s location to being its most salient feature. But this may not always be the most interesting or useful thing to know about the recording, and it may not be the most important source of difference among a set of recordings.

Third, the map layer imposes the need for audio placemarkers to be located precisely and for the spatial relations between them to be geometrically accurate. This obviously creates problems for recordings whose locations are only known vaguely or not at all, or else for a series of recordings made at different times in the same place. But it imposes other constraints which can be illustrated by returning to the example of Beck’s tube map.

Consider how much more convenient and attractive Beck’s design is compared to a geographically-accurate version. The difference isn’t simply about the design rules Beck imposed on himself, how the line orientations were limited to just four different angles, or how all the tube stations had to be equally spaced. It is that Beck’s map foremost embodies a series of propositions about the tube network rather than being an analogue of its geographical layout.

They’re things like It’s eight stops to Covent Garden or You have to change at Bank. Everyday navigation consists of more kinds of propositions: distances estimated as travel times, turn left when you reach the Dog & Duck, the quick route versus the scenic route, places best avoided. It seems unlikely that mental maps resemble the AA Guide or the London A-Z.

Sound graphics have the potential to tap into such forms of knowledge as well as depict different kinds of measurement, including categorical groupings, cyclical time, the ordinal levels of first, second, third and so on, log ratios, and simple counts. Here are the ones I’ve come up with since late 2013 with brief notes on how and why they were put together.


Richard is a wildlife recordist who, in 2013, was living in the borough of Hackney. He’d been getting up early each morning for a year to make recordings from a fixed point overlooking his back garden. He very kindly offered to share them with this site so we settled on a selection of a hundred recordings spaced evenly throughout the year.

Screenshot of Richard Beard's Hackney Year webpage

The obvious answer was to structure the links to the sound files in calendar form, but this wasn’t doing much for the wow meter. Thinking about the mutability of time and distance yielded a better solution in the form of the solar year and the Earth’s orbit around the Sun. The main graphic was made using a 30-day trial download of a 3D modelling program, and then overlaid with an HTML image map. Each blue Earth has a hotspot which, when clicked, loads an individual webpage with the appropriate sound file and its metadata into an iframe at the top of the graphic. Here’s the link to the Hackney Year.

This simple method is described at length in a blog post from 2011. It’s a handy technique when all the recordings for a particular project have been provided at the same time. However, additions involve making a new underlying graphic each time, uploading it, and amending the HTML code. This can become a chore so it’s not the best method for an open-ended project.


Early in 2014 the recordist Andre Louis and myself agreed to create a page for some of his work. Andre lives in west London and is blind. Blind people don’t have supersenses to compensate for the loss of sight, but they do pay more attention than most sighted people to what they can hear, smell and feel. I am always struck by the precision with which Andre listens. He will pick out sound details in the environment and infer meanings from them which I might simply not detect.

Knowing that this would be an open-ended project, and not being able to predict Andre’s future movements or preferences, meant that the sound graphic had to encompass the whole of London. Andre had written a short piece about why he records in London and what it means to him, so I rendered this as a block of Braille in the shape of the city. The individual Braille dots could act as placemarkers linked to the appropriate recordings. Here’s the link to Andre’s London.

Screenshot of Andre's London webpage

To avoid the hassle of changing both the graphic and the underlying HTML each time Andre added a new recording, each placemarker dot consists of a DIV element targeting an iframe at the top of the graphic. When a new recording is added to the site’s content management system, a new dot is created automatically and its position set using inline CSS with the left and top values taken from fields in the content management system entry. This is a lot quicker than updating an image map, although professional web designers will argue that inline CSS is a Bad Thing. They have some good reasons for doing so but, on the other hand, it works.


Being too old and too weird to get ahead at the British Library I decided to take voluntary redundancy. I’d been there for 15 years and felt contradictory emotions of disappointment and relief as the leaving date approached. A Library-related project would serve as a form of closure. I made a bunch of recordings around the building in public areas, inside the reading rooms and in staff-only nooks and corners. Colleagues came up with some useful suggestions of sounds worth capturing.

I originally thought of arranging the recordings on a geometrically-accurate diagram of the Library building, but then remembered how verisimilitude in art can be cheesy, just like those ultrarealistic airbrush paintings from the 1980s of nubile female robots holding cocktails. Better to represent it in a stylised way which would draw more on an idea of working there, as well as exploring the vertical dimension in sound. This had interested me for a while, particularly in the ways that large buildings tend to reproduce a class structure based on elevation.

The proles often labour in basements or at ground level, where post rooms and delivery bays have to be situated, while senior executives bag themselves offices with impressive views on the higher floors. It’s not quite that straightforward at the Library, but there are big differences in sound and appearance between the Library above ground and its huge basements. Here’s the link to the British Library sound graphic page.

Screenshot of the British Library sound graphic webpage

Using CSS relative and absolute positioning makes it easy to assemble all the individual elements. The graphic has audio players directly embedded within it, rather than using links and an iframe, and the one I used was the HTML5-based Pickle Player. (This has recently superseded by an update in the same firm’s Wimpy Player.) It costs money but it’s a one-off payment and there are several reasons why it’s worth the cash. It’s easy to install, a content management system can spawn endless different instances of the player as required, and it’s completely skinnable. You can only use one player skin per webpage, but making the skin mostly transparent allows variety with background images in container DIVs.


Thinking about how Andre and other blind people must rely strongly on sound to help build their knowledge of places, I thought it would be an idea to make some sound graphics with almost no useful geographical information. You’d have to listen to guess where you were. The array below presents 36 recordings made in a grid pattern. The distances between them are given as walking times in minutes, and each recording was made while facing north, the aim being to help the listener orient themselves. Here’s the link to the London Unseen page.

Screenshot of London Unseen webpage

CSS relative and absolute positioning again plonk player instances in the right spots. Also, it’d make a nice tea towel.


I’ve always loved visiting the kind of semi-derelict and apparently unclaimed areas which exist around the edge of the city. Knowing how they’re impermanent and that, somewhere, a developer wants to ‘realise the vision’ of turning an expanse of rough ground into a theme park, can add a pre-emptively elegaic sense to such explorations. The aim was to make collages of sound recordings and pictures along with fragments of maps, with the latter being presented in ways that would render them fairly useless as detailed navigational aids.

Four different areas now have their own sound graphics and they present a record of experiences, including the act of looking at paper maps and having to refresh one’s visual memory by doing so repeatedly, rather than definitive accounts of those places. Here’s the link to the Edgelands section.

Screenshot of an Edgelands webpage

CSS transforms make possible the slow fading of one image into another, with different time values set for each image pair.

These examples show, I hope, some of the potential in thinking in terms of sound graphics. It’s another approach to consider alongside all kinds of possibilities for organising and presenting sound recordings on webpages, not least simply writing well about them.

I’m never satisfied for long, and beyond the fun had mucking about and experimenting with these graphics, there remains the sense that something more is needed.

The fundamental issue in recording is the relationship between the recordist and their subject. When that changes, everything else follows.

comments powered by Disqus