WebCodecs Video Frame Reader - Online Decode & Display
Decode individual video frames from a local file using the VideoDecoder API. Step through frames. Cutting‑edge browser feature.
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.
Decode individual video frames from a local file using the VideoDecoder API. Step through frames. Cutting‑edge browser feature.
Drop a video file and instantly see its container format, codec(s), resolution, duration, and bitrate. Browser‑based, no upload.
Select two or more clay colors and visually approximate the mixed result. Helps plan canes and blends.
Detect your current screen resolution, viewport dimensions, and device pixel ratio. Useful for responsive design testing. No data collection.
See the current viewport width/height, document size, scrollbar width, and pixel ratio. Essential responsive data.
Convert video files between common formats using FFmpeg WASM. No upload required; all processing stays in your browser.
Convert illuminance units: lux, foot-candle, phot. Useful for lighting design and photography. Quick and free.
Convert an image to grayscale by adjusting the contribution of red, green, and blue channels. Simulate B&W film filters.
Quickly adjust the brightness and contrast of an image with live preview sliders. Download the tuned photo. Canvas.
Change audio files between MP3, WAV, FLAC, and OGG. Choose codec and bitrate. Works completely offline in the browser.
Enter foreground and background colors to instantly see the contrast ratio and pass/fail for AA and AAA. Simple and fast.
Point your camera at an object and see the dominant color in real time. Click to copy the hex. Fun tool for designers.
Reduce the number of colors in an image to a retro 8‑bit look. Uses median cut quantization in the browser. Preview and download the stylized result.
Enter the URL of any online image and extract its dominant colors or pick colors with a magnifier. No upload, cross‑origin friendly.
Convert hex or RGB to CIELAB L*a*b* values. Understand perceptual lightness and color opponents. Local math.
Generate SHA‑3 and SHAKE hashes of any text with configurable output length. All local using js library.
Keep a virtual pet alive by feeding, playing, and cleaning. Its state persists in localStorage. Come back or it gets sad.
Paste HTML/CSS and render it to a canvas image. Download as PNG. For creating dynamic social share images.
Combine aspect‑ratio with min‑/max‑width/height and see how the box responds. Understand sizing constraints. Copy the pattern.
Upload multiple sizes of the same image and generate the complete srcset and sizes attributes. For perfect responsive performance.
Convert RGB and hex colors to CIELAB L*a*b* values. Understand perceptual lightness and chromaticity. All local math.
Pick colors from a palette or use the eye dropper to sample colors from your screen. Converts between HEX, RGB, HSL. An essential tool for designers.
Paste media queries and see a visual indicator of which rules apply at current viewport size.
Write a media query and see if it matches as you resize the iframe. Understand width, height, and resolution queries.
Upload two images and see a diff overlay highlighting the pixel differences. Adjust tolerance. For regression testing.
Select colors in the OKLCH space with lightness, chroma, and hue. Convert to hex, RGB, and CSS oklch(). Perceptually uniform gradients.
Extract a color palette from an image using CIELAB k‑means quantization. Results are perceptually more accurate than RGB methods.
Fill in name, match URL, and description to get a ready‑to‑edit UserScript header. Start your browser extension easily.
Convert HSL and HSLA color specifications back to standard HEX codes. Useful when extracting colors from CSS preprocessors. Instant client-side conversion.
A dedicated color picker with common retro gaming palettes (NES, Gameboy). Pick and copy hex codes. For pixel art creators.