Free Online Morse Code Audio Decoder Technical Specification

Overview

A high-precision, client-side browser application that uses the Web Audio API to analyze microphone input in real-time, converting acoustic Morse code signals into human-readable text. The app is designed for maximum performance, using no server-side processing.

Core Features

• Real-Time Signal Visualization: An SVG or Canvas-based frequency visualizer to help users align their audio source with the microphone.
• Dynamic Sensitivity Thresholding: A slider to adjust the "silence threshold" to handle noisy environments or varying microphone gains.
• Adaptive WPM Detection: Algorithms to automatically calculate and adapt to the incoming Words Per Minute (WPM) speed of the signal.
• Live Decoded Output: A clean text area displaying the translation as it occurs.
• In-Memory History: A session-based buffer showing the last 50 decoded characters (cleared on refresh).
• Copy to Clipboard: One-tap action to copy the decoded text.

UI/UX Layout

• Header: Clean, centered title with a brief "How-to" toggle.
• Control Panel:
  • Microphone toggle button (Request Access / Stop).
  • Sensitivity slider (Threshold Control).
  • Status indicator (Listening, Calibrating, Idle).
• Visualizer Section: A responsive real-time amplitude meter.
• Output Section: A large, easily readable card containing the decoded text.
• Action Bar: "Clear Output" and "Copy to Clipboard" buttons.

Design & Aesthetic (Light Mode)

• Palette:
  • Background: #F8FAFC (Soft Grayish White)
  • Surface/Card: #FFFFFF (Pure White)
  • Primary Action: #2563EB (Vibrant Blue)
  • Text: #1E293B (Deep Slate)
  • Border/Neutral: #E2E8F0
• Typography: Sans-serif, system fonts for maximum readability (Inter, system-ui).
• Micro-interactions:
  • Buttons feature a subtle scale-down effect on active click.
  • The Output area smoothly highlights when new text is added.

Technical Implementation Constraints

• Environment: Single HTML file containing all logic, styling, and markup.
• State Management: Use standard JS variables or a single object literal (const appState = {}). Do NOT use localStorage or sessionStorage.
• Microphone Access: Use navigator.mediaDevices.getUserMedia with explicit permission handling. Show a modal (non-browser-native) if access is denied.
• Processing: Use AnalyserNode and AudioContext from the Web Audio API for performance-oriented signal processing.
• Safety:
  • No external API calls.
  • All libraries linked via secure CDNs.
  • No usage of eval(), alert(), confirm(), or prompt().
  • Responsive design using CSS Flexbox/Grid for mobile-first scaling.