For a fully working demo of this code, go to:


As a musician and a coder, I wanted to create a chord generator in order to help keyboard players starting to learn how to play chords.  I also wanted to try out Angular JS to be honest and this seemed like a fun idea.  Other people have created similar apps around the web.

You can download the entire project code from Github...

Chord generator using angular and JS. Choose a chord and see how to play it on the piano. - alexbriffett/Chord-Maker

Creating the sounds

As preparation for this code, I generated a range of notes using Reason (music software) and exported the individual notes so I ended up with one wav file for each note.  Next, I used Audible (audio editor) to convert each file into MP3 format.

0 = a low C on the piano, 1 = C#, 2 = D.  I could have named the files by their note and position ie. (C1, C#1, D1) but felt it was easier to use numbers.

The Project Structure

Chord Maker: Project structure

The Code

The CSS below is key to building the piano image.  There are no image files used.

The HTML page itself complete with ng- references enabling the Angular onclick events etc.  Each note on the visible piano is contained in a div and use the playNote method to allow them to be played when you click on them.  

The number field inside the playNote method determines which MP3 file to play.  There is also a reference to the playChord method for when you want to play an entire chord.

All the MP3 files are loaded using audio tags into this page but are hidden from view using the Angular ng-hide directive.

This is the app file itself containing all the methods.  The top of the file contains the name used for the application, chordApp.  I also used some Angular routing here but it is not too important for the sake of the basic app.

The various methods are evident inside the 'mainController'.  They include:

getChord() which gets the indexes required to play the chord

drawChord() which changes the chord notes colours

drawNote() which is called by drawChord for each note.

To Do

1) Can the keyboard be made to resize nicely on mobile phone / tablet screens etc.

2) Colour the keys when they are played live.

3) Is it possible to use a format other than MP3 to reduce the latency of playback.