Mido

A minimal, browser-based step sequencer with a retro hardware aesthetic. Compose melodies across 4 tracks and 8 steps, choose from 11 instruments, and control tempo — all in a single self-contained HTML file.

Features

• 4 × 8 step grid — toggle steps on/off per track, each with an individual note
• 8 selectable notes — C D E F G A B C5 across a one-octave range
• 11 instruments — Oscillator (built-in), Ocarina, Synth Bass, Vibraphone, Square Lead, Steel Drums, Voice Oohs, Choir Aahs, Music Box, Grand Piano, Alto Sax, Melodic Tom
• BPM control — drag the tempo slider or use the scroll wheel (40–300 BPM)
• Shuffle — randomize all steps with a single button
• Clear — reset the entire grid
• Mute per track — silence individual tracks via gamepad
• Keyboard shortcuts — full keyboard control (see below)
• Gamepad support — navigate and trigger steps with a connected controller
• Accessible — ARIA labels and a live status region throughout

Getting Started

No build step or server required. Just open index.html in a browser.

Instrument soundfonts are loaded from separate .js files in the same directory. Make sure they are served alongside index.html (e.g. via a local HTTP server or a static host — not file:// due to browser security restrictions on script loading).

# Quick local server with Python
python3 -m http.server

Then open http://localhost:8000 in your browser.

Keyboard Shortcuts

Key	Action
Space	Play / Stop
Arrow Keys	Move cursor across the grid
Enter	Toggle step on at cursor
Backspace / Delete	Clear step at cursor
R	Randomize all steps
C	Clear all steps
F	Fill current column
G	Fill current row
Z / X	Previous / Next note
1 – 8	Select note by position
- / =	Decrease / Increase BPM by 5

Gamepad Mapping

Button	Action
D-Pad	Move cursor
A (0)	Toggle step on
B (1)	Clear step
X (2)	Play / Stop
Y (3)	Preview cell
LB / RB (4/5)	Previous / Next note
LT (6)	Mute current track

File Structure

index.html                  # Main app (UI + sequencer logic)
ocarina-mp3.js              # Soundfont: Ocarina
synth_bass_1-mp3.js         # Soundfont: Synth Bass
vibraphone-mp3.js           # Soundfont: Vibraphone
square_lead-mp3.js          # Soundfont: Square Lead
steel_drums-mp3.js          # Soundfont: Steel Drums
voice_oohs-mp3.js           # Soundfont: Voice Oohs
choir_aahs-mp3.js           # Soundfont: Choir Aahs
music_box-mp3.js            # Soundfont: Music Box
acoustic_grand_piano-mp3.js # Soundfont: Grand Piano
alto_sax-mp3.js             # Soundfont: Alto Sax
melodic_tom-mp3.js          # Soundfont: Melodic Tom