Speech Helper
A comprehensive, high-performance speech studio powered entirely by native browser Web Speech API interfaces (SpeechSynthesis & SpeechRecognition). Built with zero external dependencies, zero backend latency, and complete user privacy.
100% Private & Offline-Ready
Audio data is processed directly inside your browser engine without third-party server logging.
Zero Latency & No API Keys
Direct hardware access eliminates network roundtrips and token quotas completely.
Multilingual & Japanese Tuned
Specialized for Japanese pitch accent checks, shadowing, and multi-language pronunciation testing.
Dedicated Feature Workspaces
Jump directly into full-page dedicated toolsText-to-Speech (TTS) Studio →
Full-screen text reader with rate/pitch control, dynamic voice selector, Japanese pronunciation guidance, and preset dialogues.
Speech-to-Text (STT) Dictation →
Full-screen voice transcriber with continuous auto-restart, interim live preview, speaking accuracy validation, and one-click export.
Integrated Speech Studio Workbench
Test both tools immediately below or switch to the dedicated workspace pages above for focused practice.
🔊 文字朗读（Text to Speech）
Web Speech API原生浏览器文本合成朗读，支持自定义语速、音调及多种语言高音质音色。
🎙️ 语音听写（Speech to Text）
SpeechRecognition实时将麦克风语音转录为文字，支持多国语言、临时预判识别与长时间连续监听。
暂无听写结果
点击下方「开始听写」按钮并对麦克风说话，文字将在此实时呈现。
Under the Hood: Web Speech API Architecture
How browser-native speech synthesis and speech recognition work in modern web applications.
1. Text-to-Speech (SpeechSynthesisUtterance)
The window.speechSynthesis controller coordinates spoken output generated by client-side speech engines. When you click 朗读, the browser creates a SpeechSynthesisUtterance containing your text, pitch, rate, and voice configuration.
- Asynchronous Voice Loading: In Chromium browsers, available voices load asynchronously. The
onvoiceschangedevent listener guarantees voices are populated as soon as the operating system finishes registering them. - Garbage Collection Protection: Chrome can occasionally pause or abort long speech runs if the utterance reference is garbage-collected. Our custom hook maintains an explicit React ref to guarantee uninterrupted playback.
- Playback Controls: Instant pause, resume, and cancel allow language learners to repeat difficult sentences as often as needed.
2. Speech-to-Text (SpeechRecognition)
The SpeechRecognition (or webkitSpeechRecognition) interface streams microphone audio to the browser recognition engine, delivering interim results while you speak.
- Interim Hypothesis Display: With
interimResults = true, the recognition engine streams tentative guesses in real-time (shown in gray italic) before finalizing them upon silence or punctuation. - Continuous Listening Auto-Restart: Browsers often shut down recognition after a brief silence to conserve resources. Our auto-restart mechanism intercepts the
onendevent to seamlessly keep the dictation session alive. - Accent & Pronunciation Verification: By speaking Japanese phrases into the recognizer, learners can verify whether their pronunciation is clear enough for native speech recognition models to transcribe accurately.