🌏 Translated with the assistance of DeepSeek and ChatGPT

PromptSpeech

The speech input of Prompt is powered by the built-in speech module; speechConfig configures it, PromptSpeechTrigger toggles the recording and PromptSpeechPanel renders the recording panel.

Basic Usage

Pass speechConfig to Prompt and place PromptSpeechTrigger in the toolbar to start recording. With mode set to 'click', click the trigger to start, then submit with the confirm entry or discard with the cancel entry of the panel; with 'hold', the panel records while it is pressed and submits on release. The recognition result is written into the input content of Prompt.

Built-in browser speech recognition may have compatibility issues and require a suitable network environment.

Speech Mode

Click

Hold

Ask anything

Hide source code

Custom Recognition

customRecognize is used to take over the built-in speech recognition. You can plug in your own speech recognition model, or send the audio directly to a server for processing.

The following example uses Transformers.js to run the Whisper tiny model locally in the browser and perform local transcription of the recording. The model and runtime are downloaded from a CDN when the page loads (about 45 MB of traffic on the first load; afterwards they are served from the browser cache), and the audio never leaves the browser.

The example sets acceptTimeout to -1, and the custom recognizer calls end() after transcription is complete.

Ask anything

Hide source code

API

PromptSpeechTriggerSlots

Slot	Parameter	Description	Version
trigger	toggle: () => void, recording: boolean, disabled: boolean	The speech toggle area, replacing the internal button.	0.2.1
icon	recording: boolean	The icon of the speech toggle.	0.2.1

PromptSpeechPanelSlots

Slot	Parameter	Description	Version
cancel	speech: PromptSpeechScope	The cancel entry of the speech recording panel.	0.2.1
visualizer	speech: PromptSpeechScope	The visualizer area of the speech recording panel.	0.2.1
text	speech: PromptSpeechScope	The live text area of the speech recognition.	0.2.1
accept	speech: PromptSpeechScope	The confirm entry of the speech recording panel.	0.2.1

PromptSpeechConfig is the type of speechConfig, covering the following properties and nested configuration types.

PromptSpeechSpectrum

Attribute	Type	Optional	Default	Description	Version
minHz	number	True	400	The lowest frequency of the spectrum analysis.	0.2.1
maxHz	number	True	8000	The highest frequency of the spectrum analysis.	0.2.1
minDb	number	True	-80	The decibel value mapped to the minimum height.	0.2.1
maxDb	number	True	-25	The decibel value mapped to the maximum height.	0.2.1
smoothing	number	True	0.5	The smoothing factor of the spectrum changes.	0.2.1
fftSize	number	True	2048	The sampling window size used by the spectrum analysis.	0.2.1

PromptSpeechBarConfig

Attribute	Type	Optional	Default	Description	Version
count	number	True	36	The number of the visualizer bars.	0.2.1
minHeight	number	True	4	The minimum height of the visualizer bars.	0.2.1
maxHeight	number	True	48	The maximum height of the visualizer bars.	0.2.1

PromptSpeechConfig

Attribute	Type	Optional	Default	Description	Version
mode	PromptSpeechMode	True	'click'	The interaction mode of the speech recognition.	0.2.1
lang	string	True		The language setting of the built-in browser speech recognition, given as a BCP 47 language tag. See BCP 47 language tag for the valid values.	0.2.1
barConfig	PromptSpeechBarConfig	True		The configuration of the visualizer bars.	0.2.1
spectrumConfig	PromptSpeechSpectrum	True		The configuration of the audio spectrum.	0.2.1
customRecognize	CustomRecognize	True		The custom recognition process, taking over the internal speech recognition.	0.2.1
acceptTimeout	number	True	3000	The longest waiting time for the recognition result after the recording is confirmed.	0.2.1

PromptSpeechScope

Attribute	Type	Optional	Default	Description	Version
mode	PromptSpeechMode	False		The current speech interaction mode.	0.2.1
recording	boolean	False		Whether a recording session is active.	0.2.1
live	boolean	False		Whether the recording is live; false in hold mode before it is pressed.	0.2.1
committing	boolean	False		Whether the recording is confirmed and the recognition result is pending.	0.2.1
disabled	boolean	False		Whether the speech input is unavailable.	0.2.1
supported	boolean	False		Whether the browser supports the built-in speech recognition.	0.2.1
text	string	False		The current transcript.	0.2.1
pending	boolean	False		Whether the transcript is a pending interim result.	0.2.1
levels	number[]	False		The live levels of the visualizer bars, from 0 to 1.	0.2.1
source	'microphone' | 'simulated' | null	False		The source of the bar levels. microphone means the levels come from the live microphone spectrum, simulated means the levels are generated by the animation, and null means there is no level source.	0.2.1
barConfig	Required<PromptSpeechBarConfig>	False		The effective bar configuration after defaults are applied.	0.2.1
enter	() => void	False		Starts recording.	0.2.1
cancel	() => void	False		Discards the current recording.	0.2.1
accept	() => void	False		Confirms the recording and submits the recognition result.	0.2.1
press	() => void	False		Handles the press in hold mode.	0.2.1
release	() => void	False		Handles the release in hold mode.	0.2.1

export type PromptSpeechScope = {
	mode: PromptSpeechMode
	recording: boolean
	live: boolean
	committing: boolean
	disabled: boolean
	supported: boolean
	text: string
	pending: boolean
	levels: number[]
	source: 'microphone' | 'simulated' | null
	barConfig: Required<PromptSpeechBarConfig>
	enter: () => void
	cancel: () => void
	accept: () => void
	press: () => void
	release: () => void
}

PromptSpeechMode

export type PromptSpeechMode = 'click' | 'hold'

CustomRecognizeOptions

export interface CustomRecognizeOptions {
	stream: MediaStream | null
	audio: () => Promise<Blob | null>
	setText: (text: string, final?: boolean) => void
	end: () => void
	onAccept: (handler: () => void) => void
	onClose: (handler: (committed: boolean) => void) => void
}

export type CustomRecognize = (options: CustomRecognizeOptions) => void