Waveforms (On the Web)

Setting the Bar

The most characteristic feature of waveform visualizations over the past few years has to be the style of tightly packed vertical bars, somewhat like a more detailed version of old HiFi EQ meters. Those meters are possibly still the most deeply entrenched (in the popular mind) graphic indication that music is playing. Using them to display waveforms marks a move away from the more continuous style one is familiar with from DAWs and audio editing software.

As far as I can tell, the shift can be traced back to late 2011 with the introduction of SoundCloud’s HTML5 player. It’s a little less detailed when compared to a typical DAW waveform, but the vertical emphasis is perhaps well suited to identifying the particular point on a track one wants to click/tap in on – at least that’s how I think about it. With editing software the possibility of zooming in on details with as accurate a representation as possible is crucial. On the web the waveform serves more as an overview – as a form of navigation.¹

It’s worth keeping in mind that these waveform representations on the web are not static graphics (as are the examples below) – they are redrawn and appear slightly differently depending on the amount of space available. Resize the browser window or change the orientation of your device when visiting the examples and watch the level of detail change.

Examples

Antjie in Berlin on my website. The width of the Wavesurfer bars is set to 1px. A bar width of 2 pixels would match the look of SoundCloud’s player, but I’ve allowed for some finer detail. The mirror effect is similar to the one on SoundCloud, but with the reflection point set to exactly half.

* * *

Antjie in Berlin in the SoundCloud app on iPad. When compared to the Wavesurfer example above it becomes clear that all silences have been boosted away. That helps with the nice 3D effect (achieved by simply shading less of the bottom half of the waveform) and makes place for comments and the time indicator.

* * *

Hearthis.at, a self-styled SoundCloud alternative. Only the top half of the waveform is presented, with comments below. On iOS the visual quality no longer matches that of the SoundCloud player – the bar widths are uneven with what seems to be a mismatch between the number of bars and the pixel resolution of the screen.

* * *

The Megaphone podcast player, in this case displaying the first episode of Malcom Gladwell’s Revisionist History. I’m not sure how much the (refreshingly unusual) waveform helps in navigating the audio, but the text summary is a nice touch, and the sharing features elegantly handled.

* * *

The display when enabling dictation on iOS. Vertical lines, equalizer style (this is actually some kind of frequency representation) – with a result that is similar to the SoundCloud and Wavesurfer waveforms. There’s extra space between the vertical bars though and the ends of the lines have been rounded.² A similar rounding effect can potentially also be achieved with Wavesurfer.

An audio message recorded in Apple’s Messages represented with the now familiar bar waveform.

The graphics in the following video on How sign language innovators are bringing music to the deaf are a good example of how the distinction between the visual representation of waveforms and EQ has been blurred.

On Canvas

Waveforms represented as a series of vertical lines are not only found on the web. Bespokenart.com is a service that prints waveform representations of (spoken) sound uploaded by customers to their website. Some of the results remind me of certain of the graphic works created by Christina Kubisch. They also come close to this fine letter in which the words have been replaced with waveforms.