#Virtual piano keyboard how to#
#Virtual piano keyboard code#
#Virtual piano keyboard free#

The second parameter is a function that returns a function. The first parameter evtListener is a mousedown event declared much earlier on line 7. To set up the key bindings, first create an object that will use keycode as its keys and the note to be played as its key values (starting line 15): var keyboard = )(reverseLookup)) Maybe this is the price of trying to create a 4-octave keyboard.

#Virtual piano keyboard free#

This required nearly every key on my (PC) keyboard and you can feel free to include fewer.Ī note of warning: I do not have the best key bindings so they may feel unintuitive when you actually try to play. I originally wanted to try to play the opening notes of ‘Für Elise’ so I chose a range of 4 octaves for a total of 48 black and white keys. Set Up Key Bindingsīefore we generate the keyboard, we should set up our key bindings as they determine how many keys should be generated. On line 11, we set position of middle C to the 4th octave. We use one of these methods in the beginning to set a volume for the sound. We use this object to call the methods of audiosynth.js which we linked to earlier. The first few lines of playKeyboard.js sets up for mobile device functionality (optional) and creates a new AudioSynth() object.

#Virtual piano keyboard code#

It will run as soon as the browser gets to that line of code and generate a fully working keyboard in the element with We use playKeyboard.js as one big function. We can run our JS code by calling it in the body as well: playKeyboard() We give it an id name so that we can reference it later when we create the keyboard using JS. In the body, we can create an empty element to serve as our keyboard “container”: In a nutshell, it involves using the Math.sin() function in JS to create sinusoidal waveforms and transforming them so they sound more like real instruments through some fancy math.Ĭreate an index HTML file, and let’s link to the JS files in the header: Keith already provides an explanation of how the sound generation works on his website so we will not get into the details here. Thus, the code does not have to load any external audio files. The code in this file distinguishes this piano keyboard from others found online by using Javascript to dynamically generate the appropriate sound when the user presses a key. We leave the file audiosynth.js untouched as it is solely responsible for sound generation. This tutorial gives a detailed explanation in the following sections on the major points of how the code in this file creates a fully working piano keyboard. We incorporate audiosynth.js in playKeyboard.js (my modified version of some of Keith’s code) which handles all our JavaScript. Naturally, we will also borrow some of his code which he has kindly given permission with audiosynth.js. This tutorial will use the following files:Īs mentioned, we will base our piano keyboard off the one made by Keith.

Here are the steps we will take to tackle this project: We will extend the number of keys available to 4 octaves and set new key bindings.Īlthough his keyboard can play sounds from other instruments, we will keep things simple and just stick with piano. The piano keyboard we are making for this project is based on the dynamically generated synthetic keyboard made by Keith William Horwood. Otherwise, it is totally beginner friendly and geared toward those who want to improve their JavaScript skills through project-based learning (or just want to make a cool project!). This tutorial assumes you have a basic understanding of JavaScript such as functions and event handling, as well as familiarity with HTML and CSS. Here is the JavaScript piano keyboard I made if you want to check out the end product first.

#Virtual piano keyboard how to#

This tutorial shows you how to code one using vanilla JavaScript without the need for any external libraries or frameworks. Making a playable piano keyboard can be a great way to learn a programming language (besides being heaps of fun).