Piano roll — draw a melody on a note grid

What is a piano roll?

In a music program, a piano roll is a grid: pitch runs up the side, and time runs left to right. This page is that grid for one octave, from C4 to C5, across 16 steps (one bar of 16th notes). Click a cell to place a note. Play sounds a triangle wave for each lit cell. You can also ask for a random melody in C major, or download the grid as a MIDI file. It does not record a real piano, and it does not arrange a full song.

What the melody grid does

One octave, one bar, local playback, and a MIDI file of the notes you placed.

1. C4 to C5, high notes on top: Thirteen rows cover one octave, including the C at both ends. Black-key rows are shaded. The note name sits at the left of each row.
2. Click to place or remove a note: Each column is a 16th note. More than one row can be on in the same column, so the step can be a chord. Empty columns are rests.
3. Triangle-wave playback: Play schedules each lit cell on the Web Audio clock. The tone is a triangle oscillator at the equal-tempered pitch (A4 = 440 Hz), not a piano sample.
4. Random melody in C major: Random melody clears the grid and walks the C major scale, with some rests. It stays inside this octave. It is a starting sketch, not an arrangement.
5. MIDI download: Download MIDI writes melody.mid with those note numbers on channel 1 and an acoustic-piano program change. The file is the notes and the tempo, not the audio.

How to make a melody on the grid

A short phrase is a few notes with space between them. The opening pattern is one example.

1. 1. Hear the phrase already on the roll: The starter lights C4, E4, G4, C5, B4, G4, E4, and D4 on every other step. Press Play. The loop returns to the first step after step 16.
2. 2. Edit the cells or generate another line: Click a cell to add or remove that pitch at that step. Random melody replaces the grid with a new C major line. Reset brings the starter phrase back.
3. 3. Match the tempo, then export if you need the notes elsewhere: The slider runs from 60 to 160 BPM. Download MIDI saves the current grid. Open melody.mid in a sequencer to change the sound or extend past one bar.

Draw a line you can actually follow

The grid will play whatever you light. A melody is easier to hear when neighboring notes stay close.

1. Move by a step or two in the scale: C major in this octave is C, D, E, F, G, A, B, C. Random melody already prefers small moves. When you edit by hand, large jumps are fine, but a run of them stops sounding like one line.
2. Leave some columns empty: A note on every step is a continuous scale, not a phrase. Rests are the empty cells. The starter pattern uses every other step for that reason.
3. Chords are allowed, and they get loud: Each lit cell is its own oscillator. Three or four notes in one column are a chord. More than that piles up. Thin the column if the sound distorts.
4. Check the pitch with the Note Finder if you sing it: This roll does not listen to the microphone. If you want the name of a note you sang, use the Note Finder, then click that row here.

Sources & References

References for step-based note entry and for the oscillator that plays each cell.

• Step sequencers

  “On step sequencers, musical notes are rounded into steps of equal time intervals, and users can enter each musical note without exact timing; Instead, the timing and duration of each step can be designated in several different ways.”

  This roll uses that idea: every column is the same length, a 16th note, and you choose the pitch for that step instead of performing it in real time. en.wikipedia.org/wiki/Music_sequencer

• OscillatorNode

  “The OscillatorNode interface represents a periodic waveform, such as a sine wave. It is an AudioScheduledSourceNode audio-processing module that causes a specified frequency of a given wave to be created—in effect, a constant tone.”

  Each lit cell starts a triangle oscillator at the equal-tempered frequency of that MIDI note, scheduled on the audio clock for that step. developer.mozilla.org/en-US/docs/Web/API/OscillatorNode

Frequently Asked Questions

Have questions? We have answers.

Related tools

Explore other diagnostic tools that pair well with this page.

• Beat Maker→Beat maker online—program kick, snare, and hats on a 16-step grid in the browser.
• Note Finder→Note finder online—identify the music note you sing or play. See the note name, octave, and frequency.
• Tone Generator→Tone generator online—play pure sine, square, triangle, or sawtooth tones from 20 Hz to 20 kHz for speaker and audio testing.
• Pitch Detector→Pitch detector online—detect the pitch of any sound with your microphone. See note, frequency, and tuning accuracy.
• Harmonic Mixing Chart→DJ key chart online—look up Camelot codes, musical keys, and the codes that mix with them.
• Frequency Detector→Frequency detector online—measure a sound in hertz. Read Hz, the nearest note, and cents.