Building a Morse Code Translator with Next.js 15 and Web Audio API

kian — Thu, 16 Oct 2025 08:26:10 +0000

I recently built a full-featured Morse code translator (Morse Code Translator) and learned some interesting lessons about audio generation, encoding algorithms, and Next.js 15's new features. This post breaks down the technical implementation and challenges I encountered.

Why Morse Code in 2025?

Before diving into the code, you might wonder: why build a Morse code tool in 2025?

Beyond the nostalgia factor, Morse code is actually a fascinating case study in variable-length encoding. Frequently used letters get shorter codes (E = ".", T = "-"), which later inspired Huffman coding algorithms used in modern compression. Plus, it's still actively used in:

Amateur radio (ham radio) communication
Aviation identifier beacons
Assistive technology for people with disabilities
Emergency communications when modern systems fail

Tech Stack

Next.js 15 (App Router + Turbopack)
React 19 (Server Components)
TypeScript (strict mode)
Tailwind CSS 4 (pre-release)
Web Audio API (for sound generation)

The Morse Code Encoding Logic

Building the Translation Map

The core of any Morse translator is the character-to-code mapping. Here's the elegant data structure:

// lib/morse.ts
export const MORSE_CODE_MAP: Record<string, string> = {
  'A': '.-',    'B': '-...',  'C': '-.-.',  'D': '-..',
  'E': '.',     'F': '..-.',  'G': '--.',   'H': '....',
  'I': '..',    'J': '.---',  'K': '-.-',   'L': '.-..',
  'M': '--',    'N': '-.',    'O': '---',   'P': '.--.',
  'Q': '--.-',  'R': '.-.',   'S': '...',   'T': '-',
  'U': '..-',   'V': '...-',  'W': '.--',   'X': '-..-',
  'Y': '-.--',  'Z': '--..',
  '0': '-----', '1': '.----', '2': '..---', '3': '...--',
  '4': '....-', '5': '.....', '6': '-....', '7': '--...',
  '8': '---..', '9': '----.',
  '.': '.-.-.-', ',': '--..--', '?': '..--..',
  '/': '-..-.', ' ': '/'
};

// Create reverse map for decoding
export const MORSE_TO_TEXT_MAP = Object.entries(MORSE_CODE_MAP)
  .reduce((acc, [char, morse]) => {
    acc[morse] = char;
    return acc;
  }, {} as Record<string, string>);

Text to Morse Conversion

The encoding function handles edge cases and preserves word spacing:

export function textToMorse(text: string): string {
  return text
    .toUpperCase()
    .split('')
    .map(char => {
      if (char === ' ') return '/'; // Word separator
      return MORSE_CODE_MAP[char] || '';
    })
    .filter(Boolean)
    .join(' '); // Letter separator
}

Morse to Text Conversion

Decoding is trickier because we need to handle word boundaries:

export function morseToText(morse: string): string {
  return morse
    .split(' / ') // Split by word separator
    .map(word =>
      word
        .split(' ') // Split by letter separator
        .map(code => MORSE_TO_TEXT_MAP[code] || '')
        .join('')
    )
    .join(' ');
}

Generating Morse Audio with Web Audio API

This was the most challenging part. The Web Audio API is powerful but has quirks across browsers.

Audio Context Setup

// utils/audioGenerator.ts
export class MorseAudioGenerator {
  private audioContext: AudioContext;
  private frequency: number = 600; // Hz
  private dotDuration: number = 0.06; // seconds

  constructor(wpm: number = 20) {
    this.audioContext = new (window.AudioContext ||
      (window as any).webkitAudioContext)();

    // Calculate timing based on words per minute
    // Standard: "PARIS " = 50 dot durations
    this.dotDuration = 1.2 / wpm;
  }

  private get dashDuration() {
    return this.dotDuration * 3;
  }

  private get symbolGap() {
    return this.dotDuration;
  }

  private get letterGap() {
    return this.dotDuration * 3;
  }

  private get wordGap() {
    return this.dotDuration * 7;
  }

  playTone(duration: number, startTime: number): void {
    const oscillator = this.audioContext.createOscillator();
    const gainNode = this.audioContext.createGain();

    oscillator.type = 'sine';
    oscillator.frequency.value = this.frequency;

    // Smooth attack and release to prevent clicks
    gainNode.gain.setValueAtTime(0, startTime);
    gainNode.gain.linearRampToValueAtTime(0.3, startTime + 0.005);
    gainNode.gain.setValueAtTime(0.3, startTime + duration - 0.005);
    gainNode.gain.linearRampToValueAtTime(0, startTime + duration);

    oscillator.connect(gainNode);
    gainNode.connect(this.audioContext.destination);

    oscillator.start(startTime);
    oscillator.stop(startTime + duration);
  }

  async playMorse(morseCode: string): Promise<void> {
    let currentTime = this.audioContext.currentTime;

    for (let i = 0; i < morseCode.length; i++) {
      const symbol = morseCode[i];

      if (symbol === '.') {
        this.playTone(this.dotDuration, currentTime);
        currentTime += this.dotDuration + this.symbolGap;
      } else if (symbol === '-') {
        this.playTone(this.dashDuration, currentTime);
        currentTime += this.dashDuration + this.symbolGap;
      } else if (symbol === ' ') {
        currentTime += this.letterGap;
      } else if (symbol === '/') {
        currentTime += this.wordGap;
      }
    }

    // Wait for playback to complete
    const totalDuration = (currentTime - this.audioContext.currentTime) * 1000;
    await new Promise(resolve => setTimeout(resolve, totalDuration));
  }

  generateWAV(morseCode: string): Blob {
    const sampleRate = 44100;
    const samples: Float32Array[] = [];

    for (const symbol of morseCode) {
      if (symbol === '.') {
        samples.push(this.generateTone(this.dotDuration, sampleRate));
        samples.push(this.generateSilence(this.symbolGap, sampleRate));
      } else if (symbol === '-') {
        samples.push(this.generateTone(this.dashDuration, sampleRate));
        samples.push(this.generateSilence(this.symbolGap, sampleRate));
      } else if (symbol === ' ') {
        samples.push(this.generateSilence(this.letterGap, sampleRate));
      } else if (symbol === '/') {
        samples.push(this.generateSilence(this.wordGap, sampleRate));
      }
    }

    // Combine all samples
    const totalLength = samples.reduce((sum, arr) => sum + arr.length, 0);
    const combinedSamples = new Float32Array(totalLength);
    let offset = 0;
    for (const sample of samples) {
      combinedSamples.set(sample, offset);
      offset += sample.length;
    }

    return this.createWavBlob(combinedSamples, sampleRate);
  }

  private generateTone(duration: number, sampleRate: number): Float32Array {
    const samples = Math.floor(duration * sampleRate);
    const buffer = new Float32Array(samples);

    for (let i = 0; i < samples; i++) {
      // Apply envelope to prevent clicks
      const envelope = this.getEnvelope(i, samples);
      buffer[i] = Math.sin(2 * Math.PI * this.frequency * i / sampleRate) *
                  envelope * 0.3;
    }

    return buffer;
  }

  private generateSilence(duration: number, sampleRate: number): Float32Array {
    return new Float32Array(Math.floor(duration * sampleRate));
  }

  private getEnvelope(sample: number, totalSamples: number): number {
    const attackSamples = Math.floor(0.005 * 44100);
    const releaseSamples = Math.floor(0.005 * 44100);

    if (sample < attackSamples) {
      return sample / attackSamples;
    } else if (sample > totalSamples - releaseSamples) {
      return (totalSamples - sample) / releaseSamples;
    }
    return 1;
  }

  private createWavBlob(samples: Float32Array, sampleRate: number): Blob {
    const buffer = new ArrayBuffer(44 + samples.length * 2);
    const view = new DataView(buffer);

    // WAV header
    this.writeString(view, 0, 'RIFF');
    view.setUint32(4, 36 + samples.length * 2, true);
    this.writeString(view, 8, 'WAVE');
    this.writeString(view, 12, 'fmt ');
    view.setUint32(16, 16, true);
    view.setUint16(20, 1, true);
    view.setUint16(22, 1, true);
    view.setUint32(24, sampleRate, true);
    view.setUint32(28, sampleRate * 2, true);
    view.setUint16(32, 2, true);
    view.setUint16(34, 16, true);
    this.writeString(view, 36, 'data');
    view.setUint32(40, samples.length * 2, true);

    // PCM samples
    let offset = 44;
    for (let i = 0; i < samples.length; i++, offset += 2) {
      const sample = Math.max(-1, Math.min(1, samples[i]));
      view.setInt16(offset, sample * 0x7FFF, true);
    }

    return new Blob([buffer], { type: 'audio/wav' });
  }

  private writeString(view: DataView, offset: number, string: string): void {
    for (let i = 0; i < string.length; i++) {
      view.setUint8(offset + i, string.charCodeAt(i));
    }
  }
}

React Component Implementation

Here's the main translator component using React 19 hooks:

'use client';

import { useState, useCallback, useMemo } from 'react';
import { textToMorse, morseToText } from '@/lib/morse';
import { MorseAudioGenerator } from '@/utils/audioGenerator';

export default function MorseTranslator() {
  const [inputText, setInputText] = useState('');
  const [isTextToMorse, setIsTextToMorse] = useState(true);
  const [isPlaying, setIsPlaying] = useState(false);
  const [wpm, setWpm] = useState(20);

  const morseCode = useMemo(() => {
    return isTextToMorse ? textToMorse(inputText) : inputText;
  }, [inputText, isTextToMorse]);

  const handleSwapDirection = () => {
    setIsTextToMorse(!isTextToMorse);
    setInputText('');
  };

  const handlePlayAudio = async () => {
    if (isPlaying || !morseCode) return;

    setIsPlaying(true);
    const generator = new MorseAudioGenerator(wpm);

    try {
      await generator.playMorse(morseCode);
    } catch (error) {
      console.error('Audio playback failed:', error);
    } finally {
      setIsPlaying(false);
    }
  };

  const handleDownload = () => {
    if (!morseCode) return;

    const generator = new MorseAudioGenerator(wpm);
    const blob = generator.generateWAV(morseCode);
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = 'morse-code.wav';
    a.click();

    URL.revokeObjectURL(url);
  };

  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <textarea
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        placeholder={isTextToMorse ? "Enter text..." : "Enter morse code..."}
        className="w-full p-4 border rounded-lg"
        rows={5}
      />

      <div className="flex gap-4">
        <button onClick={handleSwapDirection}>
          Swap Direction
        </button>
        <button onClick={handlePlayAudio} disabled={isPlaying}>
          {isPlaying ? 'Playing...' : 'Play Audio'}
        </button>
        <button onClick={handleDownload}>
          Download WAV
        </button>
      </div>

      <div className="p-4 bg-gray-100 rounded-lg">
        <code className="font-mono">{morseCode || 'Output will appear here...'}</code>
      </div>
    </div>
  );
}

Challenges and Solutions

1. Cross-Browser Audio Compatibility

Problem: Audio timing varied between Chrome, Firefox, and Safari.

Solution: Use audioContext.currentTime for precise scheduling instead of setTimeout. Apply smooth attack/release envelopes to prevent clicking sounds.

2. Turbopack Hot Module Replacement

Problem: HMR occasionally failed with complex component trees.

Solution: Simplify component structure and avoid circular dependencies. Restart dev server when HMR hangs.

3. WAV File Generation Performance

Problem: Generating long Morse messages caused UI freezes.

Solution: Consider moving to Web Workers for processing (future enhancement). Currently acceptable for messages under 1000 characters.

4. Mobile Audio Playback

Problem: iOS requires user interaction before playing audio.

Solution: Initialize AudioContext on first button press. Show clear play button instead of auto-playing.

Performance Optimizations

// Memoize expensive calculations
import { useMemo } from 'react';

const morseOutput = useMemo(() => {
  return textToMorse(inputText);
}, [inputText]);

// Debounce real-time conversion
import { useDebounce } from '@/hooks/useDebounce';

const debouncedInput = useDebounce(inputText, 300);

Key Timing Standards

Morse code timing follows strict ratios based on the "PARIS" standard:

Element	Duration	Ratio
Dot	1 unit	1
Dash	3 units	3
Intra-character gap	1 unit	1
Inter-character gap	3 units	3
Word gap	7 units	7

At 20 WPM (words per minute), the word "PARIS " (including trailing space) should take exactly 3 seconds, giving us 50 dot durations = 3000ms, or 60ms per dot unit.

Next Steps

Future improvements I'm considering:

PWA support for offline usage
Web Workers for audio processing
Visual waveform display while playing
Practice mode with randomized lessons
Open-sourcing the core encoding logic

Key Takeaways

Variable-length encoding is elegant and still relevant
Web Audio API is powerful but requires careful timing management
Turbopack speeds up builds significantly but still has rough edges
Educational tools don't have to be boring – modern web tech makes them engaging

Try It Out

Check out the live version at Morse Code Translator and let me know what you think!

If you're interested in the full source code or want to contribute ideas, drop a comment below. I'm considering open-sourcing parts of the project.

What encoding or audio projects have you built? Share your experiences in the comments!

Happy coding! 🎵📡

DEV Community: kian