Competing apps/tools

Overview

• Teoria
  • Tutorials
    • Unfortunately they are not interactive like they could be - lot of room for improvement.
    • But we can certainly take some ideas from here.
  • Exercises
    • The exercises on the other hand are interactive.
    • They even support MIDI keyboard input!
    • But a lot of them seem really... I don't know, too textual/not visual enough?
    • And the UI is a bit clunky for interacting with many of these exercises, IMO.
• MusicTheory
  • Lessons
    • Here the lessons are interactive and it's wonderful. Really well done.
    • Definitely a good place to take inspiration from.
  • Exercises
• DaveConservatoire
  • Lessons / Videos
    • Again, we can at the very least take ideas/inspiration for teaching material from here.
  • Exercises
    • Supposedly it has interactive exercises but I can't find them for the life of me.

In-depth analysis

Teoria

Pros

Cons

MusicTheory

Pros

Cons

DaveConservatoire

Pros

Cons

as seen here: https://dev.to/sustained/comment/f650

A nice and useful feature would be the support of user inputs to play sounds.

Considered inputs are:

• MIDI piano
• computer keyboard
• the UI keyboard (clicking on the visual keys)

My 2 cents on the computer keyboard: A really good feature that is yet to be found on any web-based virtual piano is the ability to configure key mapping: each keyboard is different, in size, shape and layout. Some default mapping for qwertys is good, customizable mapping is great.

Right now the app loads 12MB of piano samples immediately, firing off more than 70 HTTP requests!

We should probably default to a basic synthesized sound.

In addition to the option of being able to switch between sounds/instruments via the UI, though, we should also allow you to specify to "load piano samples by default".

Needs more responsiveness.. one tiny change is to have
.keyboard { width: 100% } instead of 100vw

After this commit the note/octave offset-related stuff works really well for most cases but there are still a few things to think about and fix, mostly relating to < A0 and > C8.

I mean, as much as 88 keys makes sense, there exist now 108-key grand pianos, so we should probably only special-case anything outside of the range C0 - B8.

Relevant code here, here, here, here and here.

Look what I found!

Per the discussion with Benoit we should try to put the active note into an object wrapped by Vue.observable and to get rid of the icky DOM manipulation.

But before this we should experiment with Tone events and the scheduler more, in general, as well as MIDI because we need to know how best to represent our musical data first.

Per discussion on Discord:

Todo

• Allow toggling display of note names entirely.
• Show proper accidentals depending on key/scale.
• A mode to only show the note names for notes within the passed:
  • scale
  • chord
  • interval
• A way to toggle the display of the notes names for the passed scale/chord/interval (for the training modes - i.e. only show after answer).

There are probably more things but this is all I can think of for now.

• https://github.com/dingram/jsmidgen
• https://github.com/tonaljs/tonal
• https://github.com/scribbletune/scribbletune

We should work on the piano styling:

• Make the keys "pop" (:frowning:) - a more 3D look.
  • With creative use of borders, drop shadows etc. a good look is surely possible.
• Make the keys actually look pressed when they are active and depressed when not.