Free Online Speech-to-Text Dictation Notepad

A robust, high-performance web utility that enables real-time voice-to-text transcription using the browser's native Web Speech API. This tool is designed for professionals and students who need a fast, private, and distraction-free environment to dictate thoughts, meeting notes, or long-form content.

Core Features

• Real-Time Transcription: Seamlessly converts spoken language into text using the browser's native recognition engine.
• Language Selection: Built-in dropdown to toggle between available browser languages/locales.
• Clipboard Management: Single-click "Copy to Clipboard" functionality.
• File Export: Download the transcription as a clean .txt file.
• Live Statistics: Real-time word and character counting.
• Distraction-Free Interface: Clean, focused text area optimized for typing and dictation.
• Privacy-First Design: Zero external data processing. Everything happens in the client session.

UI/UX Specification

• Layout:
  • Header: A simple, clean navigation bar with the tool title and a status indicator (e.g., "Microphone: Ready").
  • Control Bar: A row of buttons: "Start Dictation," "Stop," "Clear," "Copy Text," and "Download TXT."
  • Transcription Area: A large, multi-line auto-growing textarea that consumes 70% of the viewport.
  • Meta Bar: A subtle row below the text area displaying Word Count and Character Count.
• Color Palette:
  • Background: #F8FAFC (Slate 50).
  • Surface: #FFFFFF (White) with a soft shadow (shadow-sm).
  • Primary Action: #2563EB (Blue 600) for active buttons.
  • Danger/Clear: #DC2626 (Red 600) for clearing/stopping.
  • Typography: Sans-serif stack (Inter/System UI).

Developer Directives & Constraints

1. Single File Architecture: All CSS, HTML, and Vanilla JavaScript must exist within a single index.html file.
2. CDN Usage: Use Tailwind CSS via CDN for styling. Use a CDN for necessary icon libraries (e.g., Lucide or FontAwesome).
3. Sandbox Compatibility:
   • NO STORAGE: Do not use localStorage, sessionStorage, or cookies. The state must persist only while the tab is open.
   • NO ALERTS: Replace alert() or prompt() with custom DOM-based modal elements (hidden by default, toggled via CSS/JS classes).
4. Browser APIs: Utilize window.webkitSpeechRecognition or window.SpeechRecognition carefully, including robust error handling (e.g., permission denied, network errors) displayed within a dedicated UI notification banner instead of browser popups.
5. Responsive Design: Use Tailwind CSS utility classes to ensure the transcription area is full-width on mobile devices and centered on desktop screens.
6. Animations: Use CSS transitions (transition-all, duration-200) for button hover states, micro-interactions when the microphone is active (pulse effect), and subtle fade-ins for status updates.
7. No Footer: The layout must terminate at the bottom of the content area. No footer links or copyright text.