Table of Contents
Wraps the browser's Web Speech API in a single microphone button. Click the button to start listening; the browser stops automatically when the user pauses (or click again to stop manually). Requires a secure context (HTTPS or localhost) and a Chromium-based browser at the time of writing.
The simplest setup — click the mic, speak, and the recognized text appears in the paragraph when you stop. The end event fires once with the full transcript.
<k-speech-to-text id="basicSpeech"></k-speech-to-text>
<p id="basicSpeechOutput">(say something...)</p>
<script>
const $stt = document.getElementById('basicSpeech');
const $out = document.getElementById('basicSpeechOutput');
$stt.addEventListener('end', (e) => {
$out.textContent = e.detail.text || '(nothing heard)';
});
</script>
Add the interim attribute and listen for the result event to update the paragraph as the user speaks. detail.isFinal indicates whether the chunk is finalized.
<k-speech-to-text id="liveSpeech" interim></k-speech-to-text>
<p id="liveSpeechOutput"></p>
<script>
const $stt = document.getElementById('liveSpeech');
const $out = document.getElementById('liveSpeechOutput');
$stt.addEventListener('result', (e) => {
$out.textContent = e.detail.text;
});
</script>
By default the recognizer stops automatically after a brief pause. Add continuous so it keeps listening until the user clicks the button a second time.
<k-speech-to-text continuous interim id="contSpeech"></k-speech-to-text>
<p id="contSpeechOutput"></p>
Set the recognition language using a BCP‑47 tag (e.g. "es-ES", "fr-FR", "de-DE"). Defaults to "en-US".
<k-speech-to-text language="es-ES"></k-speech-to-text>
Set min-confidence to a number between 0 and 1 to drop low-confidence transcripts. Chrome's recognizer reports a confidence score on each finalized result; values below your threshold are skipped (they don't accumulate into end.detail.text). Interim chunks usually have confidence === 0 in Chrome, so any positive threshold also filters those out — useful when you want to ignore background noise or ambient audio. Default is 0 (no filtering).
<k-speech-to-text id="confSpeech" min-confidence="0.7"></k-speech-to-text>
<p id="confSpeechOutput">(only confident speech...)</p>
(only confident speech...)
Set timeout to the maximum number of seconds the component should listen before stopping itself. The recognition stops automatically and the end event fires with whatever transcript was captured. Default is 0 (no timeout — recognition runs until the user stops, or the browser auto-stops on a pause when continuous is unset).
<k-speech-to-text id="timeoutSpeech" timeout="5"></k-speech-to-text>
<p id="timeoutSpeechOutput">(stops after 5 seconds...)</p>
(stops after 5 seconds...)
The disabled attribute prevents user interaction. The button also auto-disables when the browser doesn't support the Web Speech API.
<k-speech-to-text disabled></k-speech-to-text>
new SpeechToText()
- ShadowComponent
- A browser that supports
SpeechRecognition (Chrome, Edge, Safari 14.1+, etc.) served over HTTPS or localhost
language: String
BCP‑47 language tag passed to the underlying SpeechRecognition.lang (e.g. "en-US", "es-ES"). Default is "en-US". Syncs to language attribute.
continuous: Boolean
When true, recognition keeps listening past pauses until stop() is called. Default is false. Syncs to continuous attribute.
interim: Boolean
When true, the recognizer emits unfinalized results as the user speaks (the result event fires for interim chunks too). Note that the underlying SpeechRecognition.interimResults is always true internally so the end event has a fallback transcript when the engine doesn't finalize; this attribute only controls public result dispatching. Default is false. Syncs to interim attribute.
minConfidence: Number
A floor (0–1) on the confidence score Chrome reports for each result. Anything below the threshold is dropped. Useful for ignoring background noise: at 0.7 you'll only capture speech the engine is confident about. Default is 0 (accept everything). Syncs to min-confidence attribute.
timeout: Number
Maximum recording duration in seconds. When non-zero, the component automatically calls stop() after this many seconds, firing the end event with the captured transcript. Default is 0 (no timeout). Syncs to timeout attribute.
disabled: Boolean
When true, the button cannot be clicked. Syncs to disabled attribute.
listening: Boolean
Read-only-ish state that reflects whether recognition is active. The button shows a pulsing red state while listening. Syncs to listening attribute.
start(): void
Begin listening. No-op if already listening, disabled, or unsupported.
stop(): void
Stop listening and finalize the transcript.
toggle(): void
Calls start() if idle, stop() if currently listening — the same behavior as clicking the button.
| Variable | Default | Description |
|---|
--btn_size | 2.5rem | Diameter of the microphone button |
--btn_bg | var(--c_bg) | Background of the idle button |
--btn_bg__listening | var(--c_danger, #d32f2f) | Background while actively listening |
--btn_tc__listening | white | Icon color while listening |
start
Fires when recognition begins.
result
Fires for each recognized chunk. detail contains { text: String, isFinal: Boolean }. With interim enabled, this fires repeatedly as the user speaks.
end
Fires when recognition stops (auto pause, manual stop, or error). detail contains { text: String } — the full final transcript.
error
Fires when the underlying SpeechRecognition reports an error. detail contains { error: String, message: String }.
Kempo UI