Sightreading Practice

Inspiration

As a group of piano players, trying to practice chords and notes was really hard for us, and took a really long time to learn. When trying to find websites that would quiz us or help us improve our skills, we found them lacking, unhelpful, and slow. So for this project, we decided to instead make our own website, that would help with sight-reading and note recognition in a simple, easy way.

What it does

Our website allows the user to plug in a keyboard, and practice notes and chords of a piano without having to navigate a confusing website, or own a full piano. The website begins with a session showing a chord or note, with the key, clef, and note type of the user's own choosing, and measures the user's reaction time and accuracy when playing that note with the keyboard. The myriad of options allows the user's practice to be as customized and optimized as possible, helping them improve their piano skills in a fast and easy way. It also provides an average reaction time for notes played, allowing the user to aim for a goal based on sight-reading reaction time. The website also displays the actual notes, and their sounds, the user is playing through the keyboard live, allowing them to memorize note location, and learn from their mistakes when playing. The user will be able to use all these tools to quickly and efficiently improve their piano playing skills in a fun and easy way.

How we built it

We used typescript and react to create our website.

Challenges we ran into

A big challenge for us was our relative inexperience with typescript. A big part of the process was learning how to even use the language to create a website. Another big challenge, was the fact that we only had one keyboard we could connect to the website and test with.

Accomplishments that we're proud of

We are really proud that our website functions as our goals outlined. We also managed to add additional features which we didn't expect to have time for. One of the features we are most proud of is the timer, as it is one of the most helpful features for the user to see how well they are learning.

What we learned

We learned how npm packages differ from each other, with some being run server-side and other being run on the browser. We also learned a lot about react and typescript in general, since we are all new to the language. Another thing we all learned was how to design a website, with the user experience in mind.

What's next for Sightreading Practice

We would like to host our website on a server so it can be used by other people as well. We would also like to add support for more types of chords and customizable practice sets of chords.