So i know alot of you have been wondering how to build a piano simply by programming. Well, here’s good news. With just HTML 5, CSS , JavaScript and a little of bootstrap, you can easily build yourself a piano on your website that play anytime you want. Let’s call this a mobile piano which you can access anywhere you want provided you have an internet connection. Cool right? Well, Here’s a demo of what we’ll be making  for those interested in viewing the final output first.

Build a web piano with JavaScript.
Charming desk demo piano

Cool right? Well, there’s more. This piano is able to play by clicking or tapping any of the keys on it. Don’t worry, it isn’t that complicated to build. I’m going to explain the entire algorithm in this article.

Related: Text to speech output using JavaScript.

The algorithm for this piano is alot simple than expected. Firstly, I’ll love to introduce to you the HTML audio element which helps you play mp3, WAV and OGG audio formats on your web browser. As at the time of writing this article, these were the only formats supported by HTML’s audio element.

Now the controls property of the audio element which enables the browser show the audio in form of our WhatsApp voice note, will be removed. We removed this so our audios will only be played through the click of piano keys which is how it is meant to be.

Finally, we’ll use JavaScript to trigger an event to play a specific mp3 audio when each button/piano keys is pressed.

Let’s start with recording our audio files, we’ll need to record our tunes for the piano using any sound recorder of your choice. This is one of the easiest parts of creating this piano. You can also use our pre-recorded audio files by downloading it Here. With these audio files in place, we can save store it on the same folder with our index.html file then we move into the HTML aspect.

Coding the HTML of the piano.

Here, we’ll be using basic html 5 syntax to build our piano. In this section, I’ll introduce the html5 ‘s audio element which enables is to embed audio in our webpage. It is originally written with this syntax below.

<audio src= "audio-file.mp3" controls>
A preview of the HTML 5 audio element.
A preview of the audio element

The controls attribute in the audio element is what brings out the controllers for our audio. But since we’ll be Making a piano, these controls should be hidden and manipulated using JavaScript. We can simply hide the controls with the audio element by removing the controls attribute. Now that you’ve understood the audio element, let’s begin the actual coding shall we.

Also see How to make a search bar.

<body> 
<section class="container">
<audio src="do.mp3" id="do" >Audio Element not supported by your browser</audio>

<audio src="ree.mp3" id="ree">Audio Element not supported by your browser</audio>

<audio src="mi.mp3" id="mi">Audio Element not supported by your browser</audio>

<audio src="fa.mp3" id="fa">Audio Element not supported by your browser</audio>

<audio src="soh.mp3" id="soh">Audio Element not supported by your browser</audio>

<audio src="la.mp3" id="la">Audio Element not supported by your browser</audio>

<audio src="ti.mp3" id="ti">Audio Element not supported by your browser</audio>

<audio src="dosharp.mp3" id="dosharp">Audio Element not supported by your browser</audio>

<audio src="reesharp.mp3" id="reesharp">Audio Element not supported by your browser</audio>

<audio src="fasharp.mp3" id="fasharp">Audio Element not supported by your browser</audio>

<audio src="sohsharp.mp3" id="sohsharp">Audio Element not supported by your browser</audio>

<audio src="lasharp.mp3" id="lasharp">Audio Element not supported by your browser</audio>

<audio src="doh-octave.mp3" id="doh-octave">Audio Element not supported by your browser</audio>

<br>

In the code above, we defined all our audio tags from key C to key C-octave. Our piano contains only one octave to make it easier to work on. Let’s move to creating our white and black keys in he piano.

<section class="container-fluid">

<section class="row piano-container">

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

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

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

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

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

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

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

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

</section>

</section>

</section>

We also included bootstrap for this piano to make our styling easier. Now that we’ve written our HTML in the piano, let’s move directly to the CSS part.

Styling the piano.

<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>

Our style above sets our white and black keys and aligns them in a piano like format. Now that we’re done with the styling our piano should look just like the preview above, all thats left is the scripting which makes our piano play these sounds.

Our piano script.

We can set up our piano to play by using the following scripts. Note that these scripts just plays the already recorded audio files.

                                             
<script>
function playnote(key){
var note= document.getElementById (key);

note.play();
}
</script>

The play method is a method of the audio object in JavaScript which plays the selected audio element using JavaScript. Once you’ve inputted this into your code, your piano should work fine.

These steps however, helps you build a primitive piano which do have alot of features. It only plays the pre recorded audio files on the browser using JavaScript events. For a more advanced version of the piano keyboard, check out Keith Williams documentation on Audio synthesis. You can view the demo version of this keyboard in our Demo page

Hope you’ve gained from this article, you can share your experience with this piano method through our comments. You can also follow us on social media using any of the following links below.

You also send us an email here hello@charmingdesk.com.ng for a private reply.

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 *