Adding Sound To Your Site Without Annoying Your Visitors

For quite a long time, adding sound to your website has been seen as a huge mistake. Why? Because many people find it annoying (or worse). If they can’t quickly find a way to turn the sound off, they’ll leave your site, never to return. That’s the truth. Think of sites you’ve visited that hurt your ears or caused other unpleasant sensory issues. This is why the advice for web developers and designers has steered away from the use of sound. However, there may be some instances where sound can be used on your site.

We were looking to share some sites that use sound correctly, but it was difficult to find any sites that use sound. Doing a search, you’ll either find articles on how to add sound to your site or tell you never to use sound. It’s difficult to find anything in between. Instead, we’ll offer you some advice and examples on how and when to use sound on your website.

So, why would you want to consider adding sound to your sites and apps? There are some very specific instances where sound can be beneficial to users. First, it’s always imperative to remember that sound may offend site visitors. If you take our advice and see your site visitor numbers go down, please don’t blame us. We’re just offering some ideas on how sound can be beneficial to some users in some instances.

Why & How to Use Sound?

As we said, there are some instances where sound be helpful and beneficial to site users. Let’s take a look:

1). Accessibility: if you have a site where many visitors may have vision disabilities, sound can be quite helpful to them. These people will use screen readers and other devices to help them get around sight issues on the web. Accessible websites are quite helpful for them; many of these sites use design elements such as color and font contrast, using a fluid layout, and keeping the language (text) simple to read. This accommodates screen readers very well.

However, audio clues may be another way to help those who have vision problems. For instance, a “clicking” sound added to buttons can help people know they’ve actually clicked on the button. Another sound that could be helpful is adding a change of pitch when dragging on a slider. These are all instances where sound could really help those visitors to the sight who have vision and other accessibility issues.

2). Notifications & Alerts: high pitched tones can be helpful to let users know they’ve received some type of notification or alert them about a new message in a chat window, for instance. This is also helpful for those who have vision issues.

Think of it this way. Perhaps you’re visiting a site and need chat with the customer service rep. However, you have another tab open in your browser to look up information the rep will need to help you. While the customer rep is typing, you go back to the other tab to find the information. A high-pitched tone will get your attention, letting you know it’s the customer rep is finished typing and now you need to respond. If there is not tone, you keep reading on the other tab, while the rep is watching for your response.

Other examples include apps such as Facebook Messenger, Slack, news aggregators, dating apps, etc. If you need to put your attention on something else, while you’re waiting for a response, the tone is a great way to let you know a message is waiting. Even if you’re not in a conversation at the time, the alert will let you know there’s something that may need your attention.

One more example are success alerts. These are the alerts you receive when you’ve done something correct. Think of playing games online…remember back…when you were successful some victory music may have played each time you completed a level, etc.

The success alert gives your site or app users a bit of dopamine high, which encourages them to keep engaging with the site/app. Keeping them engaged keeps users come back for more. OK, that last statement sounds a bit like creating an addiction. We don’t encourage that; however, the goal is to have site visitors and users feel successful, so much so that they want to come back and repeat that success over and over.

3). Artistic experiments: you can use sounds you create in specific areas of your site, such as on your profile page (about page), etc. A fun tool that may keep your attention for hours is the Chrome Music Lab. You can create your own fun sounds to use sparingly on your websites.

We warn you; this site is addictive and it’s possible to lose hours without even realizing it as you have fun experimenting with the musical and sound options on this site!

Advice on How to Use Sound Correctly

Remember, the whole idea with using sound on your site is to use is correctly and sparingly. Annoying site visitors has a very negative effect, as you’ll see when checking your site’s analytics. Here is some advice on how to use sound correctly on the site.

1). Playing the sounds: will require JavaScript. There are other options out there, but these are fast becoming obsolete when it comes to website design. With JavaScript, you’ll be able to integrate sound into your UI, which is also more functional than using other methods. This is even better than using plugins, though this would also work.

Here are a couple of tutorials that will help you, in case you need some references on how to use JS to add sound elements:

2). Let users turn sound off: remember, not everyone will appreciate sound on your site. It’s also not a good idea to have sound turned on my default, unless you have a lot of visitors who have vision and other accessibility issues.

To keep from completely alienating these visitors, give them a way to turn the sound off all together. Make sure to include some obvious message “TURN OFF SOUND HERE” or whatever message works best for your site. Just make sure it’s obvious and visitors can easily turn the sound off, without being horribly annoyed and leaving your site, never to return.

4). Bandwidth: remember, not everyone has a hi-speed Internet connection. Sound files, depending on their size and quality, can eat up bandwidth pretty quickly. Use CDN for your bandwidth, then cache sound files to help save visitor’s bandwidth.

Here we are, at the end of the article. It looks like sound can be very beneficial to some people in specific instances. However, keep in mind not everyone will appreciate sound, so give them a way to turn it off, and make it obvious and easy how they can turn the sound off. Use sound sparingly and correctly, and site visitors will love you and your site for it.


Adding Sound To Your Site Without Annoying Your Visitors ultima modifica: 2020-02-02T14:37:45+00:00 da Liam Pedley


Submit a Comment

Your email address will not be published. Required fields are marked *

Latest from the blog

The Best iPad Apps for Designers

The Best iPad Apps for Designers

The iPad is a wonderful tool for designers. In fact, iPads have been used by creatives for decades. An iPad can be a professional design tool, which is also cool to use. Not only that, but the devices are also often less expensive than buying a drawing tablet, which...