Free Online Text to Morse Code Translator & Visualizer

Overview

This single-file web utility converts plain text into International Morse Code. It bridges the gap between text input and auditory/visual signaling using the browser's Web Audio API and CSS animations. It is designed for hobbyists, educators, and communication enthusiasts.

Core Features

• Live Translation: Instant conversion of alphanumeric characters to dots, dashes, and spaces.
• Web Audio Generation: Uses the Web Audio API to create a precise 600Hz sine wave tone for signal playback.
• Visual Pulse Indicator: A clean, glowing visual element that synchronizes with the audio to show dots and dashes in real-time.
• Adjustable Speed: WPM (Words Per Minute) slider to control the playback speed (range 5-30 WPM).
• Copy Functionality: Dedicated button to copy the generated Morse code to the clipboard.
• Responsive Design: Adapts UI elements for desktop and mobile displays.

UI Layout

• Header: Descriptive app title with a professional, clean Sans-Serif font.
• Input Section: A large, focus-enhanced text area for user input with a character count limit.
• Control Panel:
  • Play/Pause toggle button (Icon-based).
  • WPM Slider with current value display.
  • Reset/Clear button.
• Visualization Area: A central, high-visibility container that flashes according to the active signal (on/off state).
• Output Area: A scrollable text box containing the converted Morse string, allowing easy copying.

Color Palette

• Background: #FFFFFF (Pure White) and #F8FAFC (Subtle Light Gray sections).
• Primary Text: #1E293B (Dark Slate Blue).
• Primary Accent: #2563EB (Strong Blue for buttons).
• Pulse Indicator: #F59E0B (Vibrant Amber for visual signal feedback).
• Border/Shadow: #E2E8F0 (Soft Light Gray borders, subtle drop shadows for depth).

Animation & Micro-interactions

• Button States: Subtle scale-down effect on click (98% transform).
• Pulse Indicator: Keyframe animation that changes opacity and shadow-glow intensity to mimic a light bulb flickering.
• Transitions: Smooth 0.2s duration transitions for all hover states and slider changes.

Developer Directives & Constraints

1. Architecture: Single HTML file containing all logic, styles, and markup.
2. No Storage: Do not use cookies, localStorage, or IndexedDB. State management must remain in-memory.
3. Audio: Use the Web Audio API (OscillatorNode) for clean sound generation. Ensure context is resumed upon user interaction (required by browser policies).
4. Accessibility: Use semantic HTML (main, header, section) and ARIA labels for buttons (Play/Pause, Copy).
5. Light Mode: Strictly enforce light-mode colors. Do not use black backgrounds.
6. Responsive: Ensure the text area handles soft-wrapping correctly on small screens.