Web MIDI Keyboard Tester - Online Visual Note Display
Connect your MIDI keyboard and see pressed notes visually on a piano roll. Check velocity, channel, and aftertouch. No DAW needed.
UD5 Toolkit
View raw MIDI messages in real-time from your connected MIDI devices.
Waiting for MIDI messages...
Connect a MIDI device and start playing to see raw messages here.
Each MIDI message starts with a status byte (value 0x80–0xFF), followed by 0–2 data bytes (0x00–0x7F):
The high nibble (first hex digit) of the status byte indicates message type; the low nibble (0–F) is the MIDI channel (displayed as 1–16).
| Type | Status Byte Range | Data Bytes | Description |
|---|---|---|---|
| Note On | 0x90–0x9F | 2 | Note number (0–127), Velocity (1–127; 0 = Note Off) |
| Note Off | 0x80–0x8F | 2 | Note number, Release velocity |
| Control Change | 0xB0–0xBF | 2 | Controller number (0–127), Value (0–127) |
| Program Change | 0xC0–0xCF | 1 | Program/patch number (0–127) |
| Pitch Bend | 0xE0–0xEF | 2 | LSB + MSB → 14-bit value (0–16383, center=8192) |
| Channel Aftertouch | 0xD0–0xDF | 1 | Pressure value (0–127) |
| Poly Aftertouch | 0xA0–0xAF | 2 | Note number, Pressure value |
| System Messages | 0xF0–0xFF | Varies | Clock, Start/Stop, SysEx, Active Sensing, etc. |
Common reasons your MIDI device may not appear:
http://localhost..txt file. The export includes timestamps, message types, MIDI channels, raw hexadecimal bytes, and human-readable descriptions—perfect for debugging, documentation, or sharing with collaborators. The log captures up to 500 messages in the browser; older messages are automatically trimmed.
MIDI Channels: A single MIDI cable can carry 16 independent channels (1–16). Each channel can control a different instrument or sound. The channel is encoded in the low nibble of the status byte (bits 0–3). For example, 0x90 = Note On Channel 1, 0x91 = Note On Channel 2, etc.
Running Status: To reduce data overhead, MIDI allows omitting the status byte when consecutive messages share the same type and channel. The Web MIDI API typically reconstructs full messages, so you'll always see complete status bytes in this monitor—no need to track running status manually.
Connect your MIDI keyboard and see pressed notes visually on a piano roll. Check velocity, channel, and aftertouch. No DAW needed.
Visualize audio in real time from your microphone or uploaded audio file. See the waveform dance. Uses Web Audio API locally.
Paste lyrics and tap while the song plays to embed timestamps. Export as .lrc file for music players. All in browser.
Real‑time frequency spectrum from your microphone. Visual bars or line. Check room resonance.
Play an audio file or use mic to see real‑time frequency bars. Choose colors. Great for music videos. Canvas.
Write Mermaid markdown and instantly see the rendered flowchart, sequence diagram, or Gantt chart. Copy SVG output. Browser-side rendering.
See the current AudioContext state (suspended, running). Resume it with a button. Understand autoplay policies.
Track daily mood with emoji selection and optional notes. See weekly/monthly mood trends in a color-coded chart. All data stored privately in localStorage.
Paste binary sequences and convert them back to readable text. Supports space-separated and 8-bit formatted strings. Quick encoding reconversion.
Paste a string of 0s and 1s and decode it back into ASCII text. Handles space‑separated blocks. Local.
Build a vertical timeline by entering events with dates and descriptions. Export as image or HTML. Perfect for project milestones.
Decode FLAC, Opus, or OGG audio files in the browser using compiled WASM libraries. Play instantly without server uploads. Keep audio private.
View recent earthquakes worldwide on a map. Fetches public USGS GeoJSON feed directly from browser. Real-time data.
Upload an image and see its 2D FFT magnitude and phase. Learn how image filtering works. Educatinal tool. Canvas.
Generate a palette of N colors that are maximally distinguishable for common color vision deficiencies. Copy the hex codes.
Convert any image into beautiful ASCII art. Adjust brightness and character set for the best effect. Share text-based pictures. Runs entirely in the browser.
Enter the recipe's wattage and your microwave's wattage to convert cooking time. Prevent burnt or cold food.
Convert any image into colored ASCII art using divs with background colors. Creates a stunning text‑based replica. View & copy HTML.
Fill in says, thinks, does, feels quadrants for a user persona. Save locally or print.
Upload a font file or specify a URL and generate the complete @font‑face rule with modern formats and font‑display. Copy instantly.
See how to implement file upload progress using both fetch and XHR. Real‑time bar and code snippets for your project.
Upload a WebP image and automatically generate a <picture> tag with JPEG/PNG fallback. Ensure compatibility everywhere.
Enter a URL to see exactly what Open Graph and Twitter card tags will be shown when shared on social media. Fetch from browser.
Transform any image into a Base64 data URI for embedding directly into HTML, CSS, or JSON. Drag and drop support. Entirely browser-side conversion.
Tidy up messy HTML code with our online formatter and beautifier. Indent and clean your markup, preview the output instantly. No data is uploaded, everything runs in your browser.
Apply tone mapping algorithms to bring out details in highlights and shadows. Simulate HDR from a single image.
Enter RGB values row by row and create a tiny BMP file. Understanding bitmap headers. Geeky developer tool.
Decode Base64 encoded strings back into viewable images and download them as PNG. Useful for debugging APIs and data URIs. Secure local processing.
Decode an image progressively using the ImageDecoder API. See partial results and metadata. Modern alternative to <img>.
Add floating emoji reactions (like live streams) to any screenshot or photo. Export as still image. Fun social media tool.