Sound on the web: history, common use-cases, and best practices

Sound was the first form of human communication, predating language itself. Is there anything more intrinsically human than sound, anything more connected to us than something that speaks or plays music? And what about a website with a voice of its own?

This article is a subtle exploration of sound on the web. It dives into the history of sound online, the dilemma of its usage today, and tips for hassle-free vocalization of web designs.

The Janus-faced fundamental stimulus

Auditory stimuli reach the brain in approximately 8-10 milliseconds, whereas visual stimuli take about 20-40 milliseconds. This means that when we see and hear something at the same time, hearing wins, being the most effective medium to reach the human brain.

What’s more, we remember sounds more easily because of the impression they make on the mind. The amygdala, the part of the brain that controls emotional reactions, is extremely sensitive to sound. It lies next to the hippocampus, which controls behavior and helps form memories. Sound activates the amygdala and triggers the adjacent parts of the brain, connecting sonic experience with thoughts and behavior.

All of these properties seem to make sound a great option for attracting attention, awakening emotions, creating memorable experiences, and triggering actions—goals most websites, whether artsy, business, or social, try to reach. But is that really so?

30-year timeline: From <bgsound> to immersive audio

The first web browser to implement audio was Internet Explorer 3, with the <bgsound> tag as a way for web pages to autoplay an audio file when a page is loaded. This only happened in 1996; before that, websites were silent. However, handy audio plugins such as Shockwave and Flash soon took the floor. Flash gained popularity as a way to create interactive web experiences, including music players and sound effects.

However, it still took several years before browsers were able to play sound without major limitations. Why? The answer is slow internet speeds, dependence on plugins, and lack of unified standards. Most users were on dial-up connections, so downloading a website with a single song could take hours. There was no universal way to handle audio: with lots of different formats, users needed plugins or players for every one of them. Also, HTML, which was used for web design back then, didn’t natively support audio.

Despite the limitations, from 1998 to 2009, websites began incorporating short sound effects for interactive elements, such as button clicks, page transitions, or mouse hovers. Due to size constraints, these sounds were usually low-quality. Websites for movies and TV shows often included immersive audio elements to promote their content, and companies used sound to enhance branding. Musicians would add songs and voices to their personal pages as a way to treat their fans. Experimental sites with early animations, elementary games, and sound also started to appear as part of the experience: for instance, the 99Rooms project mixed wall painting, photography, animation, and sound in web format.

With the emergence of HTML5 in 2009, there came a new, native option for audio in browsers: the <audio> tag. With this tag, HTML-savvy users could include audio as an image. But for years, browser support for HTML5 audio lagged behind because it demanded different codecs—components that encode and decode data—to handle different audio files.

Then it came time for the Web Audio API—a programming interface that allows developers to use audio in virtually any way possible. The Web Audio API solved the limitations of earlier audio technologies, causing a wave of user-controllable sound interactions and educational websites.

In the 2020s, sound has become an essential component of web design, moving from a novelty to a deeply integrated feature. Though not ever-present on the web, it’s now used in marketing, education and art, and can even be found in portfolios and on big companies’ websites. From immersive experiences to minimalist soundscapes, sound now shapes how users interact with and perceive the web.

With Readymag, you can also enhance your message with sound by embedding it into your website via the Code widget from any platform that allows embedding. Here are three outstanding designs complemented by music and voiceovers:

IDEO’s Financial Futures Project with voice narrations from entrepreneurs.

Interactive website for Andrey Lee’s album “Object and Environment” featuring object animations and Lee’s music.

Luck on the Hook—an interactive comic strip made with a passionate love for fishing.

Artem Taradash’s portfolio, which suggests following the narrative while listening to a soundtrack.

Audio on a page: thumbs up

Now, in the 2020s, audio is everywhere and available in almost any format and form. When used intelligently, it can elevate a browsing experience. Here’s what audio does:

Triggers emotional response. When we land on a website for a certain product or service, we mostly want something more than the product—we have a full set of expectations of what it will fulfill. Complementing visuals with sounds can mentally transport users to a desired state of mind through sensory immersion.

Adds a brand touch. A nice sound that reflects a brand’s values or holds part of its identity can help the audience memorize the brand, bond with it through interactions, and form pleasant associations.

Serves as an example of a product or a teaser. If the product or service you design for offers sounds as part of the deal, it might be a good idea to give out a fragment to earn interest, or offer a piece of audio content for free right on the website.

Covers special needs. Though many consider sound an unwanted component in websites, it may also be a game-changer for people with impaired vision or cognitive abilities. You can add voiceovers or sound alerts to key elements to help people navigate. Also, doubling the content in audio so that everyone can enjoy it never hurts.

Stresses out important messages. As sound awakens emotions, it can enhance the message not only for marketing purposes, but also in social and art projects, letting users feel the storytelling to the bones.

Opens new art dimensions. Art and music often go hand in hand and enhance one another’s effects. When coupled with sounds and animations, art can come to life in a more profound experience.

Audio on a page: thumbs down

Sound can make a website pop, but it can also completely ruin the experience. Make one negligent move and you’ll get an angry audience, a drop in sales, or spoil the neatly crafted atmosphere. Here are the downsides of adding sound to pages:

Context sensitivity. Sounds can be a bad trigger if used in an inappropriate context. For example, you might want to add cheerful music to your e-shop, but someone might browse it while in a bad mood and get angry over the mismatching experience. The key is to consider all the possible scenarios where someone interacts with the website and spot the context.

Personal boundary issues. In a world where most people never turn their mobile phones’ sound on, unrequested sound can violate personal borders. No one likes to be caught by surprise, especially by something noisy, uncontrollable, and playing out loud. 

Endangered performance. Sound increases the weight of your page, causing it to load more slowly and consume more data. Research shows that people don’t like to wait when downloading websites—they abandon pages that load for more than 3 seconds.

Too many stimuli. Plenty is sometimes a plague. In a sonic-dense environment, any additional sound, even the most elegant and immersive, can become the last straw in users’ sensory overload.

Best practices for a caring audio experience

To minimize any negative reactions to sounds or music on your website, you might try to follow a few best practices:

Add sound intentionally. Start by finding the right time and place for your sound, rather than adding it on to the existing concept. Every sound, whether a song or an alert, should serve a purpose and add value.

Consider the taste of your audience. Find solutions that match their expectations and preferences.

Auto-mute and add an unmute-mute button. Let users know they can control when and for how long something plays.

Test. Check both the desktop and mobile versions of your site to see if the sound works correctly across devices.

Optimize your website. This includes compressing its components to preserve quality but make it load faster. MP3 audio format is the best choice here, as it’s well-suited for a wide range of browsers and devices. Also, streaming larger files instead of adding them to the site might help reduce the weight.

Experiment to find the best fit. With just a few clicks, you can embed sound into your Readymag website via the Code widget and see if your design shines even brighter with the tailored soundtrack.