Building a piano with tone.js!

 

The piano

Here is the final product of what we will be building! You can click on it or type matching letters on your keyboard.

What is Tone.js?

Tone.js is a very popular Web Audio API library with over 8k stars on its GitHub repository. Before the advent of the Web Audio API, browsers had to make use of audio files to play sounds and music. It made the size of your apps bigger and modifying sounds meant bringing in different audio files every time. Well, what can the Web Audio API do for us?

The Web Audio API provides a powerful and versatile system for controlling audio on the Web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.

From: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
One very powerful feature it has is you can now generate digital sounds with just JavaScript without the use of audio files!. With a little bit of knowledge of musical concepts such as oscillators and frequency rates, we are able to create various audios suited for our needs. Using pure Web Audio API is a little bit daunting because of low-level concepts so we will be using Tone.js in our project which abstracts away underlying methods.

The HTML