photo by Marco Raaphorst

The web needs fluent audio

We treat audio in an old fashioned way. It’s time to innovate!

Marco Raaphorst
Oct 25, 2013 · 3 min read

Anyone designing for the web needs to have some serious skills in HTML, CSS and Javascript. Being just a Photoshop expert is no longer enough. But why is it that it looks like if only graphical designers are involved in design for the web? Isn’t it time that audio should be designed and treated in the same way as text and images on the web?


HTML, the language of the web, is a markup language. It uses markers so a web browser can interpreted how the text should be presented on a webpage. Therefore titles, paragraphs and other parts of the text can be changed without changing the actual text itself but only by changing the representation of it using HTML.

It goes beyond the scope of this article to explain what CSS and Javascript exactly does. Think of it as additional tools for HTML which helps to represent the content of a webpage in a better way.


If you’re reading this text on your smartphone the above picture might be resized to a smaller version. And the font of the text will be of a smaller size too. On an iPad it may look slightly bigger. This is what we call responsive design, design that changes the way in which the content will be presented in different kind of browsers and display sizes.

We can show text and images in such a flexible way because we designed it that way. Text can be presented by any type of font, size and color. And although images are a little less flexible we can resize them, remove a part of it, layer them, animated them, put text over them, align them, make them transparent etc. This way the combination of text with images can be presented on a webpage in millions of ways.

And what if we need to show text on Google Glass or on a watch? Text and images need to be fully flexible or else we would need different versions of the same content for all the different devices.


Audio on the web is often treated in the same way as video, represented in a large container, a box shown on the webpage. Take this fantastic Love + Radio podcast for example and listen to the first few minutes:

https://soundcloud.com/loveandradio/seventy-weeks

What I noticed by listening:

  • an introduction of WBEZ Chicago Public Media
  • an introduction of the L+R host Nick van der Kolk
  • the voice of the person being interviewed: Andre Taylor
  • some background music and nifty sound design

The way we tell stories through audio as we do using text and images are somewhat related. Most blogposts, like the Love + Radio podcast, have an introductory text. We quote people in text. And images and background images are used for creating some additional feel.

But the way we publish this kind of audio is in no way as flexible as how we publish text and images. We put most time in recording all parts of the podcast, editing it together as a story and then upload the whole thing as one big file. We can not change anything after it’s published only by going back to the source files, editing them again together and re-upload the whole thing again. It’s very time consuming to work in such fixed format.


What if we would be able to disable the introduction of this audio file so we can write our own introduction for it? Or maybe even better: record our own voice as an introduction to the piece? What if we want to remove or lower the volume of the background music? What if we want to quote only a small part of it?


Online content consists of small pieces of data which we can represent it all sort of different ways. We’re remixing that data all the time on millions of webpages. This is how the web works for text and images. And sure, working with audio is a lot more complicated but we need to change the way we’re using it online. We need to break audio into smaller pieces of data, so we can clue them together in different ways. Sometimes with additional music. Sometimes with new introductions. Sometimes with still images shown in sync with the music. Sometimes with moving images. As fluent data.

Shaping sounds

How we make them sounds. How we turns them into music. How we market them. — This one is for the makers. And its listeners.

    Marco Raaphorst

    Written by

    Fool on the hill blowing his guitar — https://melodiefabriek.com

    Shaping sounds

    How we make them sounds. How we turns them into music. How we market them. — This one is for the makers. And its listeners.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade