Skip to content

24 ways to impress your friends

How to Use Audio on the Web

I know what you’re thinking. I never never want to hear sound anywhere near a browser, ever ever, wow! 🙉

You’re having flashbacks, flashbacks to the days of yore, when we had a <bgsound> element and yup did everyone think that was the most rad thing since <blink>. I mean put those two together with a <marquee>, only use CSS colour names, make sure your borders were all set to ridge and you’ve got yourself the neatest website since 1998.

The sound played when the website loaded and you could play a MIDI file as well! Everyone could hear that wicked digital track you chose. Oh, surfing was gnarly back then.

Yes it is 2018, the end of in fact, soon to be 2019. We are certainly living in the future. Hoverboards self driving cars, holodecks VR headsets, rocket boots drone racing, sound on websites get real, Ruth.

We can’t help but be jaded, even though the <bgsound> element is depreciated, and the autoplay policy appeared this year. Although still in it’s infancy, the policy “controls when video and audio is allowed to autoplay”, which should reduce the somewhat obtrusive playing of sound when a website or app loads in the future.

But then of course comes the question, having lived in a muted present for so long, where and why would you use audio?

✨ Showcase Time ✨

There are some incredible uses of audio on websites today. This is my personal favourite, a site from Norway chronicling books that have been published from a forest of trees planted precisely for the books themselves. The sound effects are lovely, adding to the overall experience.

A screenshot from the Future Library site, with an illustration of a tree trunk and the 2018 author Han Kang as the title.

Another site that executes this well is The Hogwarts WebGL simulation uses both sound effects and ambient background music and gives a great experience. The button hovers are particularly good.

Screenshot of the homepage of the Pottermore website, with the title 'Welcome to Hogwarts'. There is a castle in the background, and big buttons to log in or register.

Eighty-six and a half years is a beautiful narrative site, documenting the musings of an eighty-six and a half year old man. The background music playing on this site is not offensive, it adds to the experience.

Screenshot from the Eighty-six and a half years website. The text reads 'the following story is controlled by holding your spacebar, and if you have a webcam, by opening and closing your eyes.'
Eighty-six and a half years

Sound can be powerful and in some cases useful. Last year I wrote about using them to help validate forms. Audiochart is a library which “allows the user to explore charts on web pages using sound and the keyboard”. Ben Byford recorded voice descriptions of the pages on his website for playback should you need or want it. There is a whole area of accessibility to be explored here.

Then there’s education. Fancy beginning with some piano in the new year? is a website which allows you to play along and learn at the same time. Need to brush up on your music theory? takes you through lessons to do just that, all audio enhanced. Electronic music more your thing? Ableton has your back with, a site which takes you through the process of composing electronic music. A website, all made possible through the powers with have with the Web Audio API today.

Screenshot from Lightnote. There is an audio wave graph and the heading 'which of these notes do you think will sound nice together?'. There is the option to add more sound waves to the graph.
A screenshot from Learning Music, showing a tool that lets you play notes on a scale, and change the tempo that the notes are played at.


Yes, tis the season, let’s be more thoughtful about our audios. There are some user experience patterns to begin with. tells the user they are about to ‘enter’ the site and headphones are recommended. This is a good approach because it a) deals with the autoplay policy (audio needs to be instigated by a user gesture) and b) by stating headphones are recommended you are setting the users expectations, they will expect sound, and if in a public setting can enlist the use of a common electronic device to cause less embarrassment.

The text 'best experienced with headphones', with a headphone icon.
Eighty-six and a half years

Allowing mute and/or volume control clearly within the user interface is a good idea. It won’t draw the user out of the experience, it’ll give more control to the user about what audio they want to hear (they may not want to turn down the volume of their entire device), and it’s less thought to reach for a very visible volume than to fumble with device settings.

Indicating that sound is playing is also something to consider. Browsers do this by adding icons to tabs, but this isn’t always the first place to look for everyone.

To The Future

So let’s go!

We see amazing demos built with Web Audio, and I’m sure, like me, they make you think, oh wow I wish I could do that / had thought of that / knew the first thing about audio to begin to even conceive that.

But audio doesn’t actually need to be all bells and whistles (hey, it’s Christmas). Starting, stopping and adjusting simple panning and volume might be all you need to get started to introduce some good sound design in your web design.

Isn’t it great then that there’s a tutorial just for that! Head on over to the MDN Web Audio API docs where the Using the Web Audio API article takes you through playing and pausing sounds, volume control and simple panning (moving the sound from left to right on stereo speakers).

This year I believe we have all experienced the web as a shopping mall more than ever. It’s shining store fronts, flashing adverts, fast food, loud noises.

Let’s use 2019 to create more forests to explore, oceans to dive and mountains to climb.

About the author

Ruth John is an award nominated digital artist, web consultant, keynote speaker and writer, with 15 years of experience in the digital industry.

She’s a Google Developer Expert, is on the board of directors for Bath Digital Festival and in her career has worked for companies such as o2 (Telefonica) and BSkyB, and clients such as the BBC, NBC, Cancer Research UK, Heineken and Channel 4 among others.

Ruth also belongs to the { Live : JS } collective, which brings audio and visual code to life, in live performances across the globe

More articles by Ruth