SplasheryPlayground
Note Rider, a still.

Arcade · Built from a recipe

Note Rider

A song comes down the track as glowing notes: its melody, low notes in the low lane and high notes in the high one.

PlaygroundFire it

Splats
10,002 in its file
Shelf
Arcade
Kind
Built from a recipe
Your own
Your own song
Sound
Yes
Licenses
Apache-2.0, MIT, BSD

Fire it at

How to play

Steer into each note's lane as it arrives (arrows, a swipe or a finger). ♪ Your song opens MIDI or audio.

Its controls

ControlKindRangeStart
Play or pauseTap
PlayButton
TuneList4 choicesOde to Joy
ViewList2 choices2D
InstrumentList7 choicesPiano

About it

A song comes down the track as glowing notes: its melody, low notes in the low lane and high notes in the high one. Steer the sled into each note's lane as the note arrives and it plays for its own length, so catching every note plays the whole tune; a missed note stays silent. Pick the instrument at the top: piano, guitar, steel guitar, harp, organ, synth, or vibes.

The built-in tunes are Ode to Joy, Twinkle, Twinkle, Little Star and Frère Jacques. Or open your own with ♪ Your song: a MIDI file, or a recording, whose tune a note finder hears on this device; each caught note then plays its own slice of the recording. In 2D on a phone held upright, the notes fall down three lanes side by side; on a wide screen they slide in from the right. The 3D button turns the track into a road coming toward you. The file is read on this device and never leaves it.

Details

Your own files
.mid, .midi, .rmi, audio/midi, audio/*, .mp3, .m4a, .aac, .wav, .ogg, .oga, .flac, .webm

Sources and credits

Made in Splashery. Its code is MIT.

Libraries

Apache-2.0
Basic Pitch, ONNX (lane Audio piano, October 21, 2026)
MIT
omggif 1.0.10
MIT
ONNX Runtime Web 1.30.0 (its modules)
MIT, Apache-2.0, BSD
PDF.js 6.3.289

Share it

This link opens it in the Playground. To put it on your own page, add the element and one script tag. Every option.

https://splashery.app/play/?toy=note-rider<script type="module" src="https://splashery.app/play/src/element.js"></script> <splashery-toy toy="note-rider"></splashery-toy>

Nearby in the collection