Morse code might be nearly two centuries old, but it makes a surprisingly good playground for learning the Web Audio API. Turning dots and dashes into real sound is a compact project: one oscillator, one gain node and a simple timing loop are all you need.

The basics of timing

Morse timing is measured in units. A dot lasts one unit, a dash lasts three, the gap between symbols inside a letter is one unit, the gap between letters is three, and the gap between words is seven. If your unit is 80 milliseconds, a dash is 240 ms and a word gap is 560 ms. Everything else is just scheduling.

Building the beep

The Web Audio API can generate a clean tone without any audio files. Create an AudioContext, connect an oscillator through a gain node, then start and stop the oscillator to shape each dot and dash:

const ctx = new AudioContext(); const MORSE = { A: ".-", B: "-...", S: "...", O: "---" }; function beep(durationMs, when) { const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = "sine"; osc.frequency.value = 700; // a pleasant 700 Hz tone osc.connect(gain).connect(ctx.destination); gain.gain.setValueAtTime(0.0001, when); gain.gain.exponentialRampToValueAtTime(0.5, when + 0.01); gain.gain.setValueAtTime(0.5, when + durationMs / 1000 - 0.01); gain.gain.exponentialRampToValueAtTime(0.0001, when + durationMs / 1000); osc.start(when); osc.stop(when + durationMs / 1000); } function playMorse(text) { const unit = 0.08; // 80 ms per unit let t = ctx.currentTime + 0.1; for (const ch of text.toUpperCase()) { if (ch === " ") { t += unit * 7; continue; } const code = MORSE[ch]; if (!code) continue; for (const sym of code) { const len = sym === "." ? unit : unit * 3; beep(len * 1000, t); t += len + unit; } t += unit * 2; // letter gap (1 unit already added above) } } playMorse("SOS");

The gain envelope matters: starting and stopping an oscillator abruptly produces an audible click, so ramping the gain up and down over a few milliseconds keeps the beeps smooth.

Try it live

If you would like to hear Morse code without writing any code yourself, Morse Zone is a free online Morse code translator that converts text to Morse and plays it back as audio right in the browser — a handy reference for checking that your own beep generator produces the right patterns. No signup required.

Where to go next

Once the basic beeper works, fun extensions include a decoder that listens through the microphone, adjustable speed measured in words per minute, and a visual lamp synced to the audio. A vintage protocol with a modern API makes a great weekend project.