01
Real-time piano roll flow
Notes cascade down like a waterfall, colored by track, sized by velocity, timed to the audio. The classic Synthesia/GuitarBots style — but for any MIDI.
Experience MIDI Like Never Before
Instantly turn any MIDI file into a stunning, immersive piano roll visualization directly in your browser. No software installation required. Just drag, drop, and watch.
Upload MIDI File
Drag & drop a .mid file here, or click to select
or drag and drop MIDI file here
Try a demo:
The MIDI Visualizer
Online MIDI Visualizer - View MIDI Files on Piano Roll
Turn any .mid file into a mesmerizing piano roll animation — right in your browser. Watch notes fall in real-time synced to audio, customize colors and speed, capture screenshots or videos for social. Runs entirely locally with WebGL and Tone.js.
What you get
Mesmerizing MIDI visualization made simple
02
One-click video recording
Record smooth HD videos of your visualization straight in the browser. Perfect for TikTok, YouTube Shorts, or Instagram Reels.
03
Instant HD snapshots
Capture beautiful musical moments with a single click. Great for making album art, thumbnails or desktop wallpapers.
04
Custom visual themes
Change note colors, background gradients, particle effects and glow intensity. Match your video's brand or personal aesthetic.
05
Zen (full-screen) mode
Hide the UI, go full-screen, lose yourself in the flow of notes and light. Perfect for practice, ambient listening, or events.
06
Per-track visibility
Hide or highlight individual tracks — solo the melody line for teaching, or fade the drums for a cleaner visual.
How it works
From .mid file to visual in under 5 seconds
- 01
Import your MIDI
Drag and drop a .mid or .midi file, or click to browse. The file is parsed instantly with @tonejs/midi — tracks, tempo and key signature appear immediately.
- 02
Pick a theme
Choose a color palette and background from the theme panel. Common ones: neon, pastel, monochrome, or match a channel's brand color.
- 03
Play and customize
Hit play. Tweak playback speed, note width, particle intensity, and per-track visibility until it looks the way you want.
- 04
Go full-screen (optional)
Toggle Zen Mode for a distraction-free full-screen view. Perfect for streaming, lessons, or ambient background.
- 05
Capture and share
Take an instant HD screenshot, or use the built-in recorder for a smooth video. Download directly — no watermarks, no upload.
Who it's for
Built for four kinds of MIDI visualization
Content creators
TikTok / YouTube visualizers
Turn any MIDI cover or original composition into a scroll-stopping visualizer. Record 60 seconds of piano roll flow and post — no video editor needed.
Music teachers
Show students the notes
Play a piece and let the piano roll cascade so students can see what's coming. Slow down the tempo, hide the drums, focus on the melody line.
Streamers & VJs
Live visuals
Full-screen Zen mode makes a great live visual for Twitch/Discord music streams, ambient events or gaming background.
Composers & producers
Preview your composition
Get a visual pass on your DAW MIDI export. Spot rhythm and voice-leading issues faster than by ear — the shape of the music becomes obvious.
How it compares
MidiToolbox vs other MIDI visualizers
| Feature | MidiToolbox | Synthesia | GuitarBots | PianoVis |
|---|---|---|---|---|
| Browser-based | Yes | No (paid app) | Yes (limited) | Yes |
| Video recording | Built-in HD | Screen record only | No | Limited |
| Custom themes | Yes | Yes | No | Limited |
| Per-track control | Yes | Yes | No | No |
| Zen / full-screen mode | Yes | Yes | No | No |
| Price | Free | $29—$79 | Free | Free |
Desktop apps like Synthesia are polished but cost money and take a download. Browser visualizers open a .mid file in seconds — great for one-off videos, teaching moments, or ambient background.
Common questions
Things people ask before visualizing
If something looks off
Common visualization issues and fixes
- Animation stutters or lags
- Close other tabs consuming CPU/GPU. Turn down particle intensity and glow effects in the theme panel. Very dense MIDI (500+ simultaneous notes) may stress lower-end devices — try hiding some tracks.
- Video recording is choppy
- The recorder uses your GPU — on integrated graphics or thermally-throttled laptops it may drop frames. Try lower resolution recording, close other windows, or use OBS at a fixed 60fps for best results.
- Colors don't match my brand
- Open the theme panel and click on any color swatch to open a color picker. Custom themes persist per browser — clear browser storage to reset.
- Notes seem out of sync with audio
- The visualizer aligns notes to the audio precisely, but browser audio has a small latency. If you're recording, use the built-in recorder (which handles sync) rather than screen capture, which may add extra frame delay.
Under the hood
Technical specs
- Rendering
- WebGL 2 + Canvas 2D
- Audio engine
- Tone.js PolySynth
- MIDI parser
- @tonejs/midi
- Frame rate
- 60 fps target
- Recording
- WebRTC → mp4 / webm
- Processing
- 100% local, no upload
Keep going
Related MIDI tools
MIDI Player
Play the same file with a SoundFont, control BPM and loop segments — better for practice than pure visualization.
Open toolMIDI Analyzer
See tempo, time signature, key, instruments and duration statistics for any MIDI file.
Open toolMIDI Converter
Render the .mid into MP3 or WAV with a SoundFont — great for pairing audio with your visualization video.
Open toolPrivacy & licensing
Parsing, rendering and playback are 100% local — your MIDI files stay on your device. Recorded videos are also processed locally. You are responsible for ensuring you have the right to visualize, share or upload video of the source MIDI.