So in one of our previous articles, I explained How to build a piano with JavaScript. Where we used keyboard recordings to play our sounds using JavaScript events. Well this method is a bit different because we’ll be using a dynamically generated audio script thanks to a JavaScript developer named Keith Williams Horffield.

He built the dynamically generated sound audio library which he explained in His documentary and I’m going to use that to build a musical keyboard which doesn’t only play piano sounds, but also the organ, acoustic guitar and the EDM. Let’s start with getting our tools together.

Getting our tools.

For this project, the only tool we need is to import the audio script by Keith Williams, you can do that by downloading the script from his GitHub page. Let’s say we saved the script as audiosynth.js and it’s in the same directory with our index.html, we can import this script using the following script tag

<script src= "audiosynth.js"> </script>

Now that we’ve imported our script, let’s begin building the keyboard buttons with HTML and CSS.

Here’s a demo of our piano. You can play with all the instruments as you like.

The HTML of our piano.

Before we jump into the HTML of this piano, I’ll first explain the imported script by Keith Williams. It was designed through complex mathematics and sound waves to generate wav sounds frequencies from your device using JavaScript. It also it then uses some methods which we’ll discuss later to convert those wav sounds to an audio element in HTML 5 which will be played on click. Let’s move into the HTML shall we?

Let’s create our select element to give us a list of the possible instruments our keyboard can play.

<select id= "instruments">

<option value="0"> piano </option>

<option value="1"> organ </option>

<option value="2"> acoustic </option>

<option value="3"> EDM </option>

</select>

Our keyboard has four different instruments, these instruments have their values according to Keith Williams script which gives the piano as “0”, organ as “1”, acoustic as “2” and EDM as “3”. Let’s now create our keyboard body for our keys.

<section class="container-fluid">

<section class="row piano-container">

<section class="col col-1">

<button class="btn bg-white border border-dark" value="C" onclick= "playnote(this.value)"> <em>C</em>
</button>

<button class="btn bg-dark border border-dark" value="C#" onclick ="playnote(this.value)">
</button>
</section>

<section class="col col-1">

<button class="btn bg-white border border-dark" value="D" onclick ="playnote(this.value)"> <em>D</em>
</button>
<button class="btn bg-dark border border-dark" value="D#" onclick ="playnote(this.value)"> <em></em>
</button>
</section>

<section class="col col-1">

<button class="btn bg-white border border-dark" value="E" onclick ="playnote(this.value)"> <em>E</em>
</button>
</section>

<section class="col col-1">
<button class="btn bg-white border border-dark" value="F" onclick= "playnote(this.value)"> <em>F</em>
</button>

<button class="btn bg-dark border border-dark" value="F#" onclick ="playnote(this.value)"> </button>

</section>

<section class="col col-1">

<button class="btn bg-white border border-dark" value="G" onclick= "playnote(this.value)"> <em>G</em>
</button>

<button class="btn bg-dark border border-dark" value="G#" onclick ="playnote(this.value)">
</button>

</section>

<section class="col col-1">

<button class="btn bg-white border border-dark" value="A" onclick ="playnote(this.value)"> <em>A</em>
</button>

<button class="btn bg-dark border border-dark" value="A#" onclick ="playnote(this.value)"> </button>
</section>

<section class="col col-1">

<button class="btn bg-white border border-dark" value="B" onclick="playnote(this.value)"> <em>B</em>

</button>
</section>

<section class="col col-1">

<button class="btn bg-white border border-dark" value="C" onclick= "playnote(this.value)"> <em><b>C</b></em>
</button>

</section>

</section>

</section>

</section>

Also see How to create Pythagorean theorem solver with JavaScript.

If you notice, we’ve included a value attributes in our buttons which takes the value of the key notes each button is to play. This values are necessary as it’ll be used in our JavaScript playnote function to actually play the notes.

Styling our piano.

We’ll be adding some CSS codes in our keyboard to position the black and white keys appropriately and give a good impression to our users.

<style>

body{
background: ghostwhite;
}

.btn{
height:90%;
}

.piano-container{
height:20vh;
width:420px;
}


.container-fluid{
height:60vh;
}

.bg-dark{
height:45%;
position: relative;
top:-90%;
left:20px;
z-index:10;
}
</style> 

Now that we’re done with the default keyboard styling, we’ll begin the scripting of this keyboard which is the main area of this article.

Making the notes.

Now we’re going to make the keys play it’s specific notes as designed in the audio synthesis library which we’re using for this code. The library comes with a pre-defined class named audioSynth. This class also comes with its own method (play) to control the keyboard and set it’s octave. Here’s an example below

function playnote(str){

//First select the instrument from the select element.

var instrument= document. getElementById ("instruments"). value;



var note= new AudioSynth();

//Creates an instance of the audio synth class.

note.play (instrument, str, 4, 2);

//Creates an HTML 5 audio element containing the sound and plays it.
}

The play method contains three parameters the first is the instrument which you would prefer to use. By default, the audio synth has four instruments which are the piano (with a value of 0), the organ (with a value of 1), the acoustic (with a value of 2) and the EDM (with a value of 3).

The second parameter contains the note to be played. We’ve dynamically generated the note using our function parameters. You can also use it manually by inputting your desired key notes there. It supports values like “C”, “C#”, “D”, “E” and so on.

Note: it doesn’t support flats but you can use the corresponding sharps.

The third parameter tells the script which octave to play the note in. In our code we’re using the fourth octave.

Finally, the last parameter which tells the script how long you want each note to play, we’ve set it to two seconds to enable our keyboard play sharply.

There you have it, you can mow build your own keyboard using HTML, CSS and JavaScript. Feel free to create your own version and share your link with us in the comments section.

If this method of creating the keyboard feels too complicated for you, you can check out our Much simplified version which creates your keyboard with pre recorded audio files and play them on click.

Thank you for reading, feel free to follow us on our social media handles to stay updated with new posts from us.

Programming made easier with Charming Desk! Your favorite web developers.


vic okeke

I'm just a web developer hoping to help out junior developers in algorithms for their projects.

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *