4 min read

Waveforms (On the Web)

I recently began using Wavesurfer.js on my site rather than embedding everything via SoundCloud. The numerous options that Wavesurfer provides got me looking at the way waveforms are displayed on the web in a little more detail, and got me thinking about recent trends in visualizing audio.

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.1

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

Wavesurfer

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.

* * *

SoundCloud

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

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.

* * *

Megaphone Podcast

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.

* * *

iOS Dictation

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.2 A similar rounding effect can potentially also be achieved with Wavesurfer.

iMessage Audio Message

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.


  1. It’s worth noting that Wavesurfer can display DAW style waveforms (that can be zoomed in and out of), as can the BBC’s peaks.js. The popular web representations, with a different use case, have simply taken another direction.  

  2. When silent a central horizontal line of dots remains visible – which helps keep an awareness that the device is waiting for you to record. 


If you have any thoughts or comments you can reply via Mastodon, send me an email, or send a response via the webmention form below.


Leave a comment

Available formatting commands

Use Markdown commands or their HTML equivalents to add simple formatting to your comment:

Text markup
*italic*, **bold**, ~~strikethrough~~, `code` and <mark>marked text</mark>.
Lists
- Unordered item 1
- Unordered list item 2
1. Ordered list item 1
2. Ordered list item 2
Quotations
> Quoted text
Code blocks
```
// A simple code block
```
```php
// Some PHP code
phpinfo();
```
Links
[Link text](https://example.com)
Full URLs are automatically converted into links.

Have you published a response to this? Send me a Webmention!

Hi, I’m <a rel="me" class="p-name u-url" href="https://rudigermeyer.com">Rudiger Meyer</a>, a composer interested in the play between music, sound, and&nbsp;media.