An interactive morse code trainer that visualizes the full alphabet as a binary decision tree. Each press of the key branches left for a dash or right for a dot, lighting up the path through the tree in real time.
- Hold-to-key input: hold Space (or click/tap the button) and release to input a dot or dash based on how long you held
- Direct keyboard input: press
.or-to type symbols directly, with audio feedback - Live tree highlighting: the path through the morse tree lights up as you type, showing where you are
- Auto-commit: after a short pause the current letter commits automatically
- Audio tones: a 700 Hz sine wave plays for each dot or dash, with the correct relative durations
| Action | Keyboard | Description |
|---|---|---|
| Dot | Short hold (under 300ms) | Press and release Space quickly |
| Dash | Long hold (300ms+) | Hold Space and release after a pause |
| Direct dot | . | Type a dot directly with audio |
| Direct dash | - | Type a dash directly with audio |
| Commit letter | Enter or auto | Submit the current morse code as a letter |
| Add space | / | Insert a space in the decoded message |
| Clear | Esc | Reset everything |
Dashes branch left, dots branch right. The tree goes 7 rows deep, covering the full 26-letter alphabet. Each node shows the letter it decodes to, with a row of dot/dash indicators below it.
[root]
/ \
dash dot
[T] [E]
/ \ / \
[M] [N] [I] [A]
...
morse-code/
index.html page layout and button markup
styles.css all visual styling
app.js morse logic, SVG tree, audio, and input handling
No build step required. Just open index.html in a browser.
# Using Python's built-in server
python -m http.server 8080Then go to http://localhost:8080.