- Overview
- Transcript
2.1 Why Add Sound to Your Website?
In this lesson, we'll take a look at how audio can enhance the user experience (UX). I'll show you some examples of industry-leading software that uses audio in a UX-positive way.
1.Getting Started3 lessons, 08:53
1.1Introduction00:57
1.2A Brief History of Audio on the Web03:05
1.3Hello, Web Audio API04:51
2.Adding Sound to Your Website3 lessons, 16:02
2.1Why Add Sound to Your Website?01:59
2.2Our Online Store09:53
2.3Make Some Noise04:10
3.The Sweet Sound of Success3 lessons, 19:24
3.1Different Notes and Sounds06:08
3.2A Simple Melody06:17
3.3Polish06:59
4.Audio Files1 lesson, 10:34
4.1Loading and Playing an Audio File10:34
5.Conclusion1 lesson, 01:43
5.1Conclusion01:43
2.1 Why Add Sound to Your Website?
In my opinion, developers have become scared to add sound to their website which is fair enough. We all know how annoying it is if we visit a site and music starts playing automatically. Or an advert in some unknown tab starts shouting about shampoo that's going to change your life. But in terms of user interaction, the web has fallen silent. Let's look at some native apps and see how they enrich the user experience. Email apps typically use audio to notify you if you've received a message. Because your email client will usually be sitting in the background, it uses sound to let you know you've received an email without distracting you from what you're currently working on. [SOUND] Apple mail even has a dramatic sound for when you send an email to provide reassurance that yes, don't worry, your email was actually sent. [SOUND] Sounds doesn't simply have to be used for notifications, either. One of my favorite audio interactions is when you pilter refresh on the native Twitter client. [SOUND] That little sliding slate sound followed by a satisfying pop is a great use of audio to enhance the user experience. If you've installed applications on a Mac before you will probably have heard the little trill that plays once installation is complete. Letting you know that the whole process was successful. [NOISE] In the next few lessons, we're going to recreate something similar on the web. We'll make a dummy online store that provides audio feedback to the user when their purchase has been made successfully.