Morse Code Translator & Player — Free JS Snippet

Morse code is defined entirely by timing ratios, not by any visual dot/dash shape, which makes an accurate player a genuinely interesting small scheduling problem: every dot, dash, and silence must land at the correct millisecond relative to a single base unit. This snippet builds a live text-to-Morse converter plus a real audible and visual playback engine using the Web Audio API's OscillatorNode, with all timing derived from the internationally standard Morse ratios rather than hardcoded per-symbol durations.

Standard Morse timing ratios, all derived from one constant

International Morse code defines five timing units relative to a single base "dot" duration: a dot is 1 unit, a dash is 3 units, the gap between dots/dashes *within* one character is 1 unit, the gap *between letters* is 3 units, and the gap *between words* is 7 units. This snippet encodes exactly these ratios in schedulePlayback() by deriving every duration from one UNIT_MS constant: DOT = UNIT_MS, DASH = UNIT_MS * 3, LETTER_GAP = UNIT_MS * 3, WORD_GAP = UNIT_MS * 7. Because every gap and tone length is a multiple of the same base unit, changing playback speed is a one-line change — adjusting UNIT_MS scales the entire rhythm proportionally, exactly as real Morse operators speed up or slow down their sending rate uniformly.

Converting text to Morse with a lookup table

textToMorse() uppercases the input, splits it into words on whitespace, and maps each character through the MORSE_MAP object — a flat dictionary of all 26 letters and 10 digits to their dot/dash strings (e.g. S: '...', O: '---'). Letters within a word are joined with a single space, and words are joined with / (space-slash-space), which doubles as both the human-readable separator shown in the textarea and the parsing signal schedulePlayback() later uses to know when to insert a full 7-unit word gap instead of a 3-unit letter gap.

Scheduling audio and visuals on one shared timeline

Rather than playing symbols one at a time with chained setTimeout callbacks (which drifts under JavaScript's imprecise timer scheduling), schedulePlayback() computes a single cumulative cursor position for every symbol up front and schedules all setTimeout calls against that pre-computed timeline in one pass. For each dot or dash, it schedules a flashOn() + beep(duration) pair at the symbol's start offset and a flashOff() call at its end offset, then advances cursor by the symbol's duration plus the 1-unit intra-character gap. When the loop encounters a space or slash character in the Morse string, it *upgrades* the trailing gap already added — subtracting the 1-unit intra-character gap already queued and adding the correct 3-unit letter gap or 7-unit word gap instead, so gaps are never double-counted.

Real audio via Web Audio API's OscillatorNode

The beep() function creates a fresh OscillatorNode and GainNode for every tone, connects the oscillator through the gain node to the audio context's destination, sets the oscillator to a 600Hz sine wave, and calls oscillator.start(now) immediately followed by oscillator.stop(now + durationMs / 1000) to schedule its own precise stop time using the audio context's high-resolution clock rather than a JavaScript timer. Creating a new oscillator per beep (rather than reusing one) is the standard Web Audio pattern, since an OscillatorNode is single-use — once stopped it cannot be restarted. The AudioContext itself is lazily created on first use via getAudioContext() to respect browsers' autoplay policies, which require audio contexts to be created or resumed from within a user gesture like a button click.

The synced glow pulse

Alongside every audio beep, flashOn()/flashOff() toggle an .on class on a small circular .pulse-indicator div, driven by the exact same setTimeout schedule as the corresponding tone — both are queued from the same pass through schedulePlayback(), so the glowing dot lights up and fades in lockstep with the beep, letting users both see and hear the dot/dash rhythm simultaneously, similar in spirit to how the Whack-a-Mole Game times its own visual pop against a countdown clock.