Morse Magic

A modern, interactive Morse code converter built with React and TypeScript. Convert text to Morse code and vice versa with real-time visualization, audio playback, and an interactive telegraph key.

Features

• Two-way Conversion

  • Text to Morse code
  • Morse code to text
  • Real-time conversion and validation

• Interactive Visualization

  • Visual representation of dots and dashes
  • Multiple animation presets
  • Dark mode support

• Audio Features

  • Real-time audio playback
  • Interactive telegraph key
  • Visual waveform display
  • Adjustable timing and feedback

• Modern UI/UX

  • Clean, responsive design
  • Keyboard shortcuts
  • Copy to clipboard
  • Error handling and feedback
  • Accessible interface

Tech Stack

• React 18
• TypeScript
• Tailwind CSS
• Shadcn/ui
• Web Audio API
• Vite

Getting Started

1. Clone the repository:

   git clone https://github.com/edrisranjbar/morse-magic-web.git
   cd morse-magic-web

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Build for production:

   npm run build

Usage

1. Text to Morse

   • Type or paste text in the input field
   • See real-time Morse code conversion
   • Use the play button to hear the code
   • Copy the result to clipboard

2. Morse to Text

   • Switch to decode mode
   • Enter Morse code using dots (.) and dashes (-)
   • See real-time text conversion

3. Telegraph Key

   • Use the interactive key interface
   • Short press for dots, long press for dashes
   • See and hear your input in real-time

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Edris Ranjbar

• Website: en.edrisranjbar.ir
• GitHub: @edrisranjbar

Acknowledgments

• Inspired by the history of Morse code and telegraph communication
• Built with modern web technologies and best practices
• Special thanks to the open-source community