Small piano to explore and learn music theory
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Esteban Manchado Velázquez d6ddf8bca3 Add an animation when playing from the keyboard 1 year ago
lib Separate the note playing from React 4 years ago
public Add an animation when playing from the keyboard 1 year ago
src Add an animation when playing from the keyboard 1 year ago
test Add a simple recently-used list for the last used chords 4 years ago
.gitignore Ignore .tern-port files from Emacs' tern-mode 4 years ago
README.md Update link to http://music-explorer.org 4 years ago
package.json Add keyboard handling 1 year ago

README.md

Music explorer

This is a small piano that can be used to learn and explore basic music theory. All keys have their note names, and you can select scales and chords and see how they look (and sound!) on the piano. You will also see which chords fit in the scale, and have the chance to easily play them and experiment with them.

If you want to see it in action, go to:

http://music-explorer.org

Motivation

Having learned a bit of guitar, music theory felt disconnected from the instrument and hard to relate to. However, seeing the scales and chords on a piano made everything click and make sense. This is a humble attempt to help other people learn the basics of music theory in a visual way, with an interactive piano. It might also be useful for inspiration and maybe even to help write some songs.

Technically, it's a small experiment to learn React, more EcmaScript 6, and a bit more music theory. The HTML and CSS was shamelessly stolen from http://codepen.io/garypaul/pen/jgKqc.