MIDI Chord Player & Piano Roll Visualizer

How MIDI Piano Rolls Work: A Practical Guide to Visualizing and Playing Back MIDI Files

The piano roll is the dominant visual format for MIDI composition. Every major DAW (Ableton Live, Logic Pro, FL Studio, Cubase, Studio One) uses a piano roll as its primary MIDI editor. Yet most musicians work in their DAW without fully understanding what the piano roll is actually showing them. This tool lets you load any MIDI file and inspect its contents in a piano roll view, directly in your browser, without opening a DAW.

What a Piano Roll Shows You

A piano roll maps two dimensions onto a grid. The horizontal axis is time, measured in seconds or bars. The vertical axis is pitch, arranged exactly like a piano keyboard turned on its side, with low notes at the bottom and high notes at the top. Each note in the MIDI file appears as a colored rectangle. The rectangle's horizontal position is its start time, its width is its duration, and its vertical position is its pitch.

The third variable, velocity, is represented by color intensity. In this visualizer, higher velocity notes appear brighter while lower velocity notes appear more transparent. Velocity in MIDI is a value from 0 to 127 that represents how hard a key was struck. A velocity of 127 is the maximum (fortissimo); a velocity of 64 is roughly mezzo-forte. Most human keyboard performances have velocities ranging from about 50 to 110, with variation creating the sense of dynamics and expression.

When you load a multi-track MIDI file, each track gets a distinct color. This makes it easy to see how parts interact and where voices overlap or separate. The track selector lets you isolate a single part when a dense arrangement is hard to read.

How MIDI Stores Note Data

A MIDI file does not contain audio. It contains a sequence of event messages, each timestamped in MIDI ticks. The most common events are Note On (a key is pressed) and Note Off (a key is released). Each Note On message carries three values: the MIDI note number (0 to 127, where middle C is note 60), the velocity (0 to 127), and the channel (0 to 15).

Time in a MIDI file is measured in ticks. The file header defines the resolution: a typical value is 480 ticks per quarter note. To convert ticks to seconds, the player reads the tempo map embedded in the file, which gives the duration of a quarter note in microseconds. A tempo of 120 BPM means one quarter note lasts 500,000 microseconds (0.5 seconds), so 480 ticks equals 0.5 seconds. Tempo changes mid-file are common and the playback engine must apply each change at the correct tick position.

This tool uses the @tonejs/midi library (MIT license) to parse MIDI files. That library handles the tick-to-second conversion and tempo map traversal, returning note data already expressed in absolute seconds. This is why the piano roll shows time in seconds rather than ticks.

Understanding the Playback Synthesis

The playback engine uses the Web Audio API, the native audio synthesis system built into every modern browser. No audio plugins or external libraries are required. For each note, the engine creates an oscillator node and a gain node, connects them, and schedules them to start and stop at the correct times using AudioContext.currentTime as a reference clock.

The gain envelope follows a standard ADSR shape: attack (0.01 seconds), decay (0.1 seconds), sustain at 60% of peak, and release (0.1 seconds). The four waveform options (sine, triangle, square, sawtooth) each have a distinct tonal character. Sine is the smoothest and most neutral. Triangle is slightly brighter. Square has strong odd harmonics and a hollow, reedy sound. Sawtooth has the richest harmonic content and the brightest tone, similar to a brass instrument.

All notes are scheduled before playback starts, so timing is sample-accurate rather than subject to JavaScript timer drift. The speed multiplier (0.5x to 2x) scales the scheduled start and stop times proportionally. Looping restarts the scheduling from time zero each time the sequence completes.

For more sophisticated synthesis and playback, see our MIDI to Sheet Music Converter, which renders MIDI as standard notation. For real-time playing, the Virtual Piano lets you perform directly from your keyboard or mouse.

Reading Velocity and Expression in MIDI

Velocity is the most immediate source of expression in a MIDI performance. A professional piano part recorded live might have velocity variation across every single note, following the musical phrasing. A programmed part typed in on a grid might have every note at velocity 100, producing a mechanical, uniform sound.

When you load a MIDI file in this visualizer, look at the color intensity variation across notes. Strong variation (some notes very bright, others very faint) indicates an expressive, dynamic performance. Uniform color intensity suggests a programmed part without humanization. Many producers deliberately keep rhythm parts uniform for tightness but introduce velocity variation in melodic and harmonic parts to give them life.

The MIDI standard defines velocity on the Note On message only. Some instruments respond differently to velocity on the Note Off message (release velocity), but this is rare. Standard MIDI does not record pedal data as part of note velocity; sustain pedal is a separate Control Change message (CC64). This visualizer shows note-on velocity only.

Multi-Track MIDI Files: Type 0 vs Type 1

MIDI files come in two common formats. Type 0 files have a single track containing all MIDI channels merged together. Type 1 files have multiple tracks, one per instrument or part, which is far more useful for analysis and editing. Most DAW exports produce Type 1 files with named tracks.

When you load a Type 1 file with multiple tracks, the "All Tracks" view merges every note into a single canvas and uses color to distinguish them. This gives you the full picture of the arrangement. The track selector lets you isolate any single track, which is useful when a bass part and a piano part overlap in the same pitch range and are hard to distinguish when merged.

Channel 10 (or channel 9 in zero-indexed notation) is the General MIDI percussion channel. Notes on this channel do not represent pitches. MIDI note 36 on channel 10 means Kick Drum, not C2. Note 38 is Snare, note 42 is Closed Hi-Hat. The piano roll will display these at their numeric positions on the pitch axis, but you should interpret them as drum sounds rather than musical pitches. For dedicated drum MIDI work, the Drum MIDI Editor maps these note numbers to their correct drum names.

Using the Zoom Controls for Analysis

The zoom controls on the canvas let you expand the time axis to inspect specific passages. At full zoom-out, you see the entire MIDI file from start to finish. Zooming in expands the time resolution, making it possible to see the exact alignment of notes within a single bar or even a single beat.

This is particularly useful for analyzing rhythmic tightness. A quantized piano part and a loosely performed bass part will show obvious timing differences when zoomed into a bar. You can also check whether chord voicings are played exactly together (a block chord) or slightly arpeggiated (a rolled chord), which is visible as a slight horizontal stagger between notes in the same chord.

The chord progression in a MIDI file is also readable from the piano roll. Vertical columns of notes indicate where multiple pitches sound simultaneously. By reading the pitch names on the Y axis at those columns, you can identify the chords. For systematic chord identification from MIDI, pair this tool with the Chord Progression Generator to explore harmonically related progressions. To understand how keys relate to the chords you observe, the Chord Wheel shows the diatonic relationships at a glance.

Practical Uses for MIDI Visualization

Producers use piano roll visualization to reverse-engineer commercial tracks. Loading a MIDI transcription of a well-known song and inspecting its piano roll reveals exactly how chords are voiced, how the bass relates to the harmonic rhythm, and where the rhythmic placement of notes creates groove. This is a faster way to study arrangement than reading notation, particularly for producers who do not read music.

Songwriters use piano roll analysis to check whether a MIDI export from their DAW is correct before handing it off to a notation engraver or another musician. A quick visual scan of the piano roll confirms that no notes are missing, that velocities look reasonable, and that the track structure is intact.

Educators use piano roll visualizations to teach students how MIDI represents music, bridging the gap between the abstract message format (Note On, pitch 60, velocity 80) and the concrete musical reality (middle C, played at a moderate dynamic). The piano roll makes the relationship between MIDI numbers and music theory immediately visible.