Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.4 Add a Keyboard

In this lesson, I’ll show you an easy way to add a musical keyboard (using a library I wrote) and how to play an oscillator in response to a key press.

Related Links

2.4 Add a Keyboard

If we want to be able to play different notes in our synth, then the most well recognized and convenient way is to add a keyboard. This may sound like a pretty large task, but don't worry, it's because of sound fans like yourself I created Qwerty Hancock. Go to stuartmemo.com/qwerty-hancock. Qwerty Hancock allows you to add a musical keyboard to your page and hook it into your own synth. And it's really simple to use. All we need to do is download the script from the page, and save it to our project directory. Then if we open up our index.html page, And add another script element above our synth script and reference the qwerty-hancock fail we just downloaded, like so. Okay, now that our page knows about qwerty-hancock, we just need to initialize it. To do this open synth.js and write, var keyboard = new qwerty-hancock. There our constructor expects the idea of a DOM element in which to place the keyboard into. So let's switch back to our HTML page, and then save the send container. Create an empty dive with the ID of keyboard. Now an empty div doesn't have a height by default, so we need to set some dimensions for the keyboard by adding some CSS. We'll just use the id as a selector, then give it a height of 150 pixels. And let's specify width, and just make it the same as its container, 600 pixels. Okay, now we head back to our script and give the id of the keyboard element we just created. Which was keyboard. You can also specify the number of octaves you wish your keyboard to span. For the basic keyboard, I recommend setting this to two. Let's just comment out our oscillator playing just now. So we can see how it looks. Okay. If we save that and switch to our browser. Nice a little keyboard and a webpage. You can see if we press our physical keyboard keys, or our mouse, then the keys will light up. However, we don't hear anything, and that's because we haven't tied it up to our oscillator. Querty Hancock gives us two little helper methods. Key down and key up. And this is where we handle the starting and stopping of our oscillators. Let's move our oscillator start function into the key down method. Select right keyboard.keydown equals function. Now, the key down function gives us two parameters. The musical note of the key pressed, and its frequency, like so. Inside this function, we can set the frequency of our oscillator to be the frequency that's passed in to the key down function. Osc.frequency.value = frequency. Then we want to start osc later, when a key is pressed. Which is osc.start(context.current time. We'll also need to stop the oscillator as well when you take your finger off a key. So we use the keyUp function. And we want the oscillator to stop as soon as you take your finger off a key. Great. Let's try it. [SOUND] Okay that sounds pretty good. But we'll see a problem if we try to press another key. Hm, nothing except the Saturn in the JavaScript consul. Fail to execute start in oscillator mode, cannot call start more than once. Hm. Let's fix that in the next lesson.

Back to the top