Midi Visualization Experiments
MidiViz Piano - Main player with sepia theme UI
5 Jan 2026
Experiment #023 - Synthesia Background Playback
- AudioWorklet-based MIDI scheduling (plays in background tabs)
- Reduced audio glitches via worklet timing
- Uses new
useBackgroundClock option in PlaybackControls
3 Jan 2026
Experiment #022 - Synthesia Multi-Synth
- Selectable synth engine: OxiSynth SF3, OxiSynth, SpessaSynth, FluidWeb
- Hot-swap synths during playback
Experiment #021 - Synthesia OxiSynth SF3
- OxiSynth with native SF3 support via spessasynth_core
- Decodes SF3 to SF2 in-browser before loading
- Non-blocking decompression (main thread stays responsive)
SF3 to SF2 Converter
- Browser-based SF3 to SF2 converter
- Uses Web Worker for non-blocking Vorbis decompression
Experiment #020 - Synthesia SpessaSynth
- SpessaSynth WASM synthesizer
- SF2 and SF3 soundfont support
- Soundfont stacking with bank offsets
Experiment #019 - Synthesia OxiSynth Worker
- Experimental: runs OxiSynth in Web Worker with AudioWorklet
- Keeps soundfont parsing off main thread
- Higher latency and memory usage than #018 due to message passing overhead
- Use #018 for better performance; this is for reference
Experiment #018 - Synthesia OxiSynth
- OxiSynth WASM synthesizer (Rust/oxisynth)
- SF2 and SF3 soundfont support
- Soundfont caching via font bank
- Multi-instrument via MIDI channels
2 Jan 2025
Experiment #017 - Synthesia FluidWeb
- RustySynth WASM synthesizer (SF2 only)
- Multiple .sf2 soundfont selection
- Real-time SF2 playback with AudioWorklet
FluidWeb Piano Test
- WASM SoundFont synth with AudioWorklet
FluidWeb Piano (ScriptProcessor)
- WASM SoundFont synth with ScriptProcessorNode (iOS compatible)
FluidWeb Test
27 Dec 2024
Experiment #016 - Synthesia Three.js
- Three.js 3D version of Synthesia
- Orthographic (default) and perspective camera views
- 88-key 3D piano with proper key positioning
Experiment #015 - Synthesia WebGL
- WebGL2 GPU-accelerated version of Synthesia
- Blur-based bloom effect with screen blending
- Batched rendering for better performance
Experiment #014 - Synthesia
- Synthesia-style falling notes visualization
- 88-key piano at bottom with key lighting
- Particle effects on note impact
- Grid lines for octaves and measures
- Multiple instrument support (6 synths)
- Bloom toggle for performance
Experiment #013 - Physical Model
- MIDI playback with custom piano synthesis
- Ball visualization from earlier experiments
Audio Test
- Audio-only performance test (no visuals)
- For benchmarking synth performance
Piano Test
- Interactive 3-octave keyboard
- Test piano synthesis directly
Piano Synthesis Library:
- piano.js - Modal synthesis with harmonic profiles (PianoForte-inspired)
- wavetable_piano.js - PeriodicWave wavetable (musical.js-inspired)
- fast_piano.js - Pre-rendered samples for max polyphony
- electric_piano.js - Additive synthesis with inharmonicity
- harpsichord.js - Karplus-Strong plucked string
- silent_piano.js - 4’33” by John Cage (for testing)
26 Jan 2021
Experiment #012 - Merry Spiral
- Modified from 011, particles moves from inside out
- feels like a merry go round
Experiment #011 - Sucking star
- Modified from 010, but clamp to the center
Experiment #010 - Fountain rain
- Modified from 003, but arranged in a circle
- notes move from the edge to the center
Experiment #009 - Lighted piano roll
- Extension of 001, but I wanted it to light up when notes are being played
4 Feb 2018
Experiment #008 - Spiral path
- Extension of 007, with the trails
- Follow cursor isn’t the best, feels like a drawing app.
- Maybe it should have a life, and let interactivitiy move it.
23 Jan 2018
Experiment #007 - Spiral
- Draw notes as they place around in a spiral
- Fade notes away after drawing
- More ideas: follow cursor / trail / random,
- predraw vs continous simulation
21 Jan 2018
Experiment #006 - Hammers
Experiment #005 - Keyboard
- Visualize notes on Keyboard
Experiment #004 - SoundFont
20 Jan 2018
Experiment #003 - Balls with controls
Experiment #002 - Balls
Experiment #001 - Piano Roll
More ideas
- using lines
- fountain rain
- tonejs
- note/color buckets