7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 11Length: 57 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 A Simple Melody

In this lesson, we’ll wrap up our sound code to make a “success” melody which plays when a transaction is completed.

Related Links

3.2 A Simple Melody

Now that we can play different notes using different sounds, let's try and make something a bit more melodic and pleasant for our users. This doesn't need to be anything fancy, just a few notes indicating something positive has happened. If we look at our code so far, you can see we've got a function that plays a single note, but nothing to play our little motif we're going to create. Let's do that now, by saying var playSuccessSound = function. And let's just rearrange things a bit by calling our playNote function here. And swap out our playNote function call and our Ajax call with our new playSuccessSound function. So to play different notes, we need to be able to pass the frequency of a desired note, to the playNote function. Let's add frequency as an argument. And swap this for the hard coded value here. Okay, let's pass that frequency into our function call. Remember, that's the frequency of a B note. Let's go over to our browser, just to make sure that it still works. [NOISE] Perfect. Now we're set up to place as many different notes as we want just passing in the frequency. We just have to think now, what notes are we going to play? Because it's a positive message we wish to send the user, we need to consider what would make our melody sound positive. This is actually more simple than it sounds. Melodies that go [SOUND] sound a lot more positive than ones that go [SOUND]. Excuse my singing there. So by following that simple rule, let's choose a note that's higher than our B. Let's go back to the Wikipedia page with a list of frequencies and notes. Let's choose a note that's higher than our B. We want a noticeable jump, so let's go with an E. Now let's head back to our code and add a second playNote call, this time passing in 659.255 hertz as the frequency. Now, we have a problem here, you might have noticed. Both these notes are going to play at the exact same time. So we should probably add an extra argument to our playNote function to indicate when that particular note should be played. Let's call our argument startTime. Okay so let's swap out our context.currentTime with startTime. This means that the oscillator will start playing at the time specified, and not necessarily straight away. So back down to our playSuccessSound function, the first note we want to happen straight away, so we pass context.currentTime. Then the second one, we want to happen as soon as the first one finishes. We know the first one plays for one second. So let's start after one second by saying context.currentTime + 1. Let's give that a listen. [NOISE] Okay well, that's way too long for any sort of motif. Let's go back to our code and shorten that right down. In fact, we may want the notes to play for different durations. So let's add another argument to our function, duration. We'll need to change our oscillator to stop at the startTime plus the duration. Okay. Now we need to pass in that duration. Let's try something much shorter. How about a tenth of a second? That'll be 0.1. That means we need to change our start time for our second note too. How does that sound? [SOUND] Hm, still slightly too short in my opinion. Let's add just a couple of hundredths of a second onto it. [SOUND] A couple hundredths of a second isn't much. But that really makes a difference I think. That second note could be a bit longer though, let's double it. [SOUND] That's much better. I think we've got a melody sorted, but it still sounds a bit raw and rough around the edges. In the next section, we'll explore some techniques to add polish to make things sound a bit nicer.

Back to the top