Website sounds without a single audio file

Apps on your phone give small sounds when you tap, switch or send something. Websites almost never do, partly because sound files are heavy and partly because sound done badly is annoying.

We have added interface sounds to our website in a way that avoids both problems. Turn them on with the speaker button in the panel on the right of the screen.

What you hear

• a short, soft click when you press a button,
• two rising notes when you switch something on, like a palette, dark mode, a tab or a checkbox,
• a gentle two-note chime when you open another page,
• a falling note when you turn the sounds off again.

Every sound is quiet and lasts a fraction of a second. They confirm that something happened without getting in the way.

No audio files at all

The usual way to add sound is to download MP3 files. Even small ones add up, and they have to load before they can play.

We do not use any. Every sound is created in the visitor’s browser with the Web Audio API: a tiny oscillator plays a note, slides its pitch a little and fades out, all in a few lines of code. The whole sound system is about 3 KB of script, or roughly 1.3 KB compressed. There is nothing else to download, so it has no effect on how fast pages load.

Because the sounds are made from code, they are also easy to tune. We can change a note, its length or its tone to match a brand, the way a designer adjusts a colour.

Why it starts muted

Sound is personal. Someone might be reading your site in an open-plan office, on a train or late at night. So our sounds are off by default and only play after a visitor turns them on. The choice is then remembered on every page.

Browsers have the same idea. They do not allow a website to play sound until the visitor has clicked or tapped something. That is why our “new page” chime plays at the moment you click a link, rather than when the next page appears.

Where sounds help on a real website

• confirming that a form was sent or an item was added to a basket,
• games, quizzes and interactive features (see our games page),
• learning tools and children’s sites, where feedback matters,
• kiosks and in-store screens.

You can try the sounds alongside our other effects in the playground. If you would like something similar on your site, it is part of our custom development work.