As a piano player, I’ve always enjoyed listening to songs and trying to figure out the chords and harmonies in the music using my piano. I believe that chords and harmony can give a melody more meaning and make music much more interesting. For musicians and composers, I know that sometimes, it can be difficult to find a chord which fits with the melody in mind. From my enjoyment of harmony and experiences with coming up with chords for a melody, I was inspired to make a web app which would help musicians and composers to come up with unique and interesting chords for their music.

What it does

The main purpose of Chordial is to provide musicians and composers with unique and interesting chords for their music. This is achieved through the execution of several steps. First, the user can input the melody they want to harmonize by clicking the notes on the piano roll. Then, they can click the Play button under the piano roll to begin the harmonization process. For every 2 notes, one chord is randomly selected from the variety of chords which fit with those two notes. In other words, a set of chords which fit the melody are compiled. Chordial then plays the melody together with the chords to demonstrate how the melody will sound with the chords. The user can click Stop to stop the music from playing. Then if they want, the user can click Play again to generate a new set of chords which fit with the melody and to listen to the demonstration. The tempo of the music can also be changed while the music is not playing using the BPM slider under the play button.

How we built it

I built Chordial mainly using the React library and Tone.js Web Audio framework. I had to use React in order to avoid having to code each individual note on the piano roll, because doing this would be very inefficient (I would have to code in 240 buttons). React allowed me to make reusable components for just the keys and the columns of keys, which made coding this project faster and easier. I used Tone.js to generate and schedule the synth sounds for playing the melody and chords.

Challenges we ran into

A significant challenge I ran into was not knowing how to get the React parent and children components to send data to each other. For example, I didn’t know how to make the individual note component let the parent column component know that it was selected by the user. I learned how to use the basic React hooks such as useState, useEffect hook and useContext hook to get the components to work and work together.

Accomplishments that we're proud of

I’m proud that I was able to make this project because it was my first time creating a project with React. Also, this is one of my most ambitious projects so far and I’m proud that I was able to complete it in a limited timeframe.

What we learned

As this was my first time using React in a project, I learned a lot about components and hooks in React and how to apply them. I learned to use hooks to get the parent and children components to share data with each other. Also, I learned how to use Tone.js to make synth sounds and to synchronize and schedule events in a web app.

What's next for Chordial - a Chord Generator

There are many features that would improve the user experience which can be added in the future. Some examples include allowing the user to change the key and time signature of the melody, add more bars to the piano roll, and change the rhythms and voicings of the chords.

Share this project: