What happened to audio on the web? For a time the web was the platform to show off your taste in tunes. From MIDI versions of The Final Countdown bubbling in the background, to autoplaying MySpace mp3s being thrown in your face, sound was everywhere.
Not anymore. Having been burned by these user experience atrocities, web developers stay well away from it. Sadly sound has taken a backseat on the web, while native apps flourish.
Think of the notification sound your hear when receiving an email, or the little pop when you pull to refresh the Twitter app. Such apps show how sound can be integral to a great user experience.
In this tutorial I'll show you how to bring sound back to the web, in a good way!
The Web Audio API
The Web Audio API is a powerful, high-performance way of manipulating sound in the browser. Before continuing this tutorial, you might want to check out the previous tutorial in this series where I covered how to make a basic sound using JavaScript as well as play an mp3 file.
For this tutorial we're going to mock up a payment page that gives us audio feedback that our payment is successful. I'll use Bootstrap to make things look nicer quicker.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Add sound to your web app</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h1>My shop</h1>
<p>Are you ready to buy this item?</p>
<form action="">
<div class="form-group">
<label>Name on card</label>
<input type="text" class="form-control" value="Guybrush Threepwood" />
</div>
<div class="form-group">
<label>Card number</label>
<input type="text" class="form-control" value="1234-1234-1234-1234" />
</div>
</form>
<button id="buy-now-button" type="button" class="btn btn-primary"
data-loading-text="Processing..." data-complete-text="Success!">Buy now</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="scripts/success-sound.js"></script>
</body>
</html>
You'll notice at the very bottom I've included a file called "success-sound.js". This is where we'll write our code to provide audio feedback to the user when their payment is successful. Once you've created this file, the first thing we want to do is create an AudioContext. You may remember from the last tutorial that an AudioContext is how we access the Web Audio API's various functions.
var context = new AudioContext();
Oscillators
One of the best things about the Web Audio API is that it allows us to create sounds from scratch without even looking at an audio file. We do this using oscillators.
Oscillators are a way of creating a tone we can hear. They do this by generating a periodic wave at a certain frequency. The shape of this wave varies, but the most common types are sine, square, triangle and sawtooth waves. These types of waves all sound different. Let's create two triangle wave oscillators.
var osc1 = context.createOscillator(),
osc2 = context.createOscillator();
osc1.type = 'triangle';
osc2.type = 'triangle';
Oscillators are quite loud by default, so unless we want to give our users the fright of their lives, we should turn down the volume a little. Because the Web Audio API works by chaining nodes together to pipe sound around, we create and connect our oscillators to a GainNode.
var volume = context.createGain(); volume.gain.value = 0.1;
Gain nodes multiply the volume of the sound coming in by the number you specify. So in this instance the volume will be one tenth of the signal being passed to it.
Let's connect everything up.
// Connect oscillators to the GainNode osc1.connect(volume); osc2.connect(volume); // Connect GainNode to the speakers volume.connect(context.destination);
Then check we've done it right by playing the oscillators for two seconds.
// How long to play oscillator for (in seconds) var duration = 2; // When to start playing the oscillators var startTime = context.currentTime; // Start the oscillators osc1.start(startTime); osc2.start(startTime); // Stop the oscillators 2 seconds from now osc1.stop(startTime + duration); osc1.stop(startTime + duration);
At this point you should be hearing a tone when you reload your page. Not the most amazing sound, I'm sure you'll agree, but it's a start!
The oscillators we've created are playing at a default frequency. By changing this frequency, we can change the musical note you hear when it's played. This is what will make our tone a little more pleasing and is key to the feeling you want to invoke when your user hears it. Let's change our oscillator to play at note "B4", which is 493.883Hz.
var frequency = 493.883; osc1.frequency.value = frequency; osc2.frequency.value = frequency;
Now if we reload the page, you'll hear the tone at a different pitch. You may be thinking at this point, "Why are we playing two oscillators with the exact same pitch?" Well, this leads us to a little trick we can do to make our tone sound a bit nicer.
If we detune our oscillators to make their frequencies slightly different, we end up with a nice chorus effect, making our tone sound much richer.
var frequency = 493.883; osc1.frequency.value = frequency + 1; osc2.frequency.value = frequency - 2;
While our little sound sounds a lot better, it ends quite abruptly. To make this less jarring, we should quickly turn down the volume at the end of the sound; this is also known as "fading out". This is done via AudioParams which are used to automate the values of audio nodes, such as gain and frequency. We'll go into AudioParams in much more detail in the next tutorial in this series.
// Set the volume to be 0.1 just before the end of the tone volume.gain.setValueAtTime(0.1, startTime + duration - 0.05); // Make the volume ramp down to zero 0.1 seconds after the end of the tone volume.gain.linearRampToValueAtTime(0, startTime + duration);
What we're saying here is make sure that the volume is at 0.1, 0.05 seconds before our tone finishes. Then keep turning the volume down until it reaches zero at the same time our tone finishes.
Let's wrap up our code so far into a single function and see what we've got.
// Play oscillators at certain frequency and for a certain time
var playNote = function (frequency, startTime, duration) {
var osc1 = context.createOscillator(),
osc2 = context.createOscillator(),
volume = context.createGain();
// Set oscillator wave type
osc1.type = 'triangle';
osc2.type = 'triangle';
volume.gain.value = 0.1;
// Set up node routing
osc1.connect(volume);
osc2.connect(volume);
volume.connect(context.destination);
// Detune oscillators for chorus effect
osc1.frequency.value = frequency + 1;
osc2.frequency.value = frequency - 2;
// Fade out
volume.gain.setValueAtTime(0.1, startTime + duration - 0.05);
volume.gain.linearRampToValueAtTime(0, startTime + duration);
// Start oscillators
osc1.start(startTime);
osc2.start(startTime);
// Stop oscillators
osc1.stop(startTime + duration);
osc2.stop(startTime + duration);
};
To make this function a bit more powerful, I've removed some of the variables and allowed these values to be passed in. This permits us to play different notes at different frequencies. Now it's time to get creative!
Success
Think about what you want your users to feel when they've just bought something from your online store. It's a positive experience—someone's bought something they wanted in order to make their life better somehow, no errors occurred and the transaction was processed successfully.
Audio-wise, indication of success is actually quite simple. A musical motif that goes up in pitch at the end always sounds much more joyous than one that goes down. You don't even need to have a tune or a whole bunch of notes to convey this. To prove this theory, let's just use two single notes for our success motif.
// Play a 'B' now that lasts for 0.116 seconds playNote(493.883, context.currentTime, 0.116); // Play an 'E' just as the previous note finishes, that lasts for 0.232 seconds playNote(659.255, context.currentTime + 0.116, 0.232);
Ahh, the sweet sound of success.
Remember, if playing around with oscillators isn't your idea of fun, you can use an mp3 file instead. Have a read of the previous tutorial to see how.
It's best to wrap these two playNote calls into a single function call so we've got an easy hook into playing our sound.
var playSuccessSound = function () {
// Play a 'B' now that lasts for 0.116 seconds
playNote(493.883, context.currentTime, 0.116);
// Play an 'E' just as the previous note finishes, that lasts for 0.232 seconds
playNote(659.255, context.currentTime + 0.116, 0.232);
};
It's now up to you how you want to trigger this sound and what event you wish to play it in reaction to. For the purposes of this tutorial. let's fake an Ajax call that takes three seconds. We'll use this to pretend that some server-side transaction is happening.
var myFakeAjaxCall = function (callback) {
setTimeout(function () {
callback();
}, 3000);
};
All we need to do now is to add an event listener to our buy now button.
$('#buy-now-button').click(function () {
myFakeAjaxCall(function () {
playSuccessSound();
});
});
Click the button, wait three seconds, and then dance with glee as you hear the audio confirmation that your transaction was successful.
In order to change the text on the button to indicate visually that something's happened, Bootstrap provides some button helper functions to swap in the text provided in a data attribute. How this works is outside the scope of this article, but here's the code for completeness.
$('#buy-now-button').click(function () {
var that = this,
$btn = $(this).button('loading');
myFakeAjaxCall(function () {
playSuccessSound();
$btn.button('complete');
});
});
I hope you've found this tutorial useful and that it's encouraged you to add sound (responsibly!) to your web app. The code for this tutorial is on GitHub, as well as a demo of our final sound. The next tutorial in this series is for those of you who've caught the oscillator bug; we'll be building a web audio synthesizer.
Comments