Online Piano Keyboard - Play & Record Simple Melodies
Play a virtual piano keyboard using mouse or computer keys. Sustain and octave control. Record and play back your tune.
UD5 Toolkit
event.location). The indicator badges show which modifiers are currently held down with a real-time glow effect. You can toggle between standard text labels and Mac-style symbols (⌃⌥⇧⌘) using the format toggle button.
preventDefault() call blocks many browser shortcuts during recording, OS-level shortcuts cannot be overridden by a web page. If a shortcut isn't captured, try pressing Pause first, then resume recording — this can help in some cases. You can also use the Pause button to freely use browser-native shortcuts without them being recorded.
event.code values remain consistent across platforms, making them ideal for cross-platform shortcut documentation.
.txt file. The export includes timestamps and each shortcut is listed on its own line in a clean format. You can also copy individual shortcuts by clicking the copy icon next to any history entry, or use the main Copy button to copy the most recently recorded combination. All data stays local — nothing is uploaded or stored on any server.
event.key, event.code, and event.keyCode values across different browsers and keyboard layouts. UX designers document shortcut conventions for applications. Content creators and educators prepare tutorial materials showing exact key combinations. Power users discover and catalog hidden shortcuts in their favorite software. Accessibility testers verify keyboard navigation patterns. Simply put, any scenario where precise key combination tracking matters benefits from this tool.
Play a virtual piano keyboard using mouse or computer keys. Sustain and octave control. Record and play back your tune.
Record brief overnight audio samples and log snoring intensity. Identify patterns and share data with your doctor for sleep apnea assessment.
Design a custom keyboard layout and save it as an image to help learn touch typing on a custom keymap. Supports ANSI, ISO, and ortho layouts.
Randomly prompts you to press a Windows keyboard shortcut (e.g., Win+E). Learn to be a power user.
Press a combination of modifier keys and see which common macOS shortcuts use them. Learn by experimentation.
Type on your QWERTY keyboard and see the text as if you were on a Dvorak layout. Helps learn Dvorak without switching.
Interactive soprano recorder chart showing which holes to cover for each note. Switch between baroque and German fingering.
Paste HTML snippet and see calculated tab order. Identify missing focusable elements. A11y helper.
Compare standard keyboard layouts side-by-side. Click keys to see characters. Useful for learning alternative layouts.
Record audio from your microphone and save as WAV file. Visual waveform while recording. Simple and privacy-friendly; audio stays in your browser.
Press any key combination and see the human‑readable shortcut for macOS and Windows. Developer docs helper.
Use your webcam to record a video clip and download it as WebM. Adjust resolution. Works offline. Privacy‑friendly.
Enter a URL and see a visual map of the tab order. Detect broken tabindex values. Improve keyboard navigation.
See the roving tabindex pattern in action. Use arrow keys to navigate a list. Copy the accessible JavaScript pattern.
Create a properly styled 'Skip to Content' link. Customize target and appearance. Essential for keyboard users. Copy the HTML/CSS.
Use your webcam to record a video clip and download it as WebM. Adjust resolution and see a preview. Works offline.
Connect your MIDI keyboard and see pressed notes visually on a piano roll. Check velocity, channel, and aftertouch. No DAW needed.
Compare :focus and :focus‑visible styling. See which one applies when using mouse vs. keyboard. Accessible focus management.
Press any key to see the complete KeyboardEvent properties: key, code, keyCode, modifiers. Indispensable for game & shortcut developers.
Enter a list of component props with types and defaults, and get a Markdown table ready for your Readme or Storybook.
Record audio directly from your microphone and download it as a WAV file. Perfect for quick notes. No upload, fully offline support.
Press any key and see it light up on a standard QWERTY layout. Check functionality or demonstrate shortcuts.
Enter a URL and extract tab‐index order violations and focusable elements. Quick accessibility audit. Client‑side fetch.
Press keys on your physical keyboard and see them highlighted on a virtual keyboard. Detects multi-key rollover. Quick hardware check.
Press any key to see the corresponding JavaScript event key, code, and keyCode. An essential debugging tool for front-end developers handling keyboard input.