Piano Sheet Studio

music piano

Launch the Demo · Source on GitHub

The origin story: I am supposed to be learning a teacher duet so I can play with Scarlett at Chloe's first piano recital. Naturally, instead of practicing it, I built an entire piano notation editor. :)

Piano Sheet Studio is an online music editor. Compose with the full 88-key piano, edit the score directly, hear the whole arrangement, and watch the notes, keyboard, and playback cursor move together. Songs stay in browser storage and can be imported or exported as JSON. Backend coming soon, maybe?

Highlights

  • Grand staff, treble-only, bass-only, and multiple independent voices on one staff
  • Notes, chords, rests, accidentals, key signatures, dynamics, articulations, ties, slurs, pedal, and repeats
  • Synchronized playback, looping, note highlighting, an 88-key synth, and a sound-only Free Play mode
  • Undo/redo and copy/paste for notes, chords, rests, and complete bars
  • Optional note letters on the score and keyboard for beginners
  • MIDI import with separate tracks, percussion, instrument presets, mute, solo, and editable notation
  • A bundled library ranging from beginner songs to Moonlight Sonata and Super Metroid's Lower Norfair (GGOAT: greatest game of all time)

MIDI is converted into normal Piano Sheet notes. Imported piano, strings, bass, guitar, and drum tracks can each be selected, inspected, edited, and assigned their own sound.

The editor also supports less common layouts. This teacher duet puts right and left-hand parts into separate voices on the same bass staff, with no treble staff.

JSON Projects

The editable project format is intentionally straightforward. A song contains shared timing information and one or more tracks; each measure stores its treble, bass, and optional additional voices. I'm exploring open source formats, but came up with this for now.

{
  "schemaVersion": 2,
  "id": "c-major-example",
  "title": "C Major Example",
  "tempo": 96,
  "timeSignature": [4, 4],
  "keySignature": "C",
  "tracks": [{
    "id": "piano",
    "name": "Piano",
    "kind": "pitched",
    "instrumentSound": "grand-piano",
    "synthControls": {
      "volume": 0.82,
      "tone": 0.72,
      "echo": 0.08,
      "sustain": 0.48
    },
    "staffLayout": "grand",
    "measures": [{
      "treble": [
        {
          "id": "chord-1",
          "keys": ["c/4", "e/4", "g/4"],
          "duration": "q",
          "dynamic": "mf"
        },
        {
          "id": "note-2",
          "keys": ["d/4"],
          "duration": "h",
          "dotted": true
        }
      ],
      "bass": [{
        "id": "bass-1",
        "keys": ["c/3"],
        "duration": "w"
      }]
    }]
  }],
  "createdAt": 1790000000000,
  "updatedAt": 1790000000000
}


Main

Site

Metroid

Game Dev

Tags