AI
AiVoiceInput
Bit.BlazorUI.AIDictationSpeechToText
BitAiVoiceInput is a dictation button: a toggle that turns the microphone on and off and hands over what is said as text, through the speech recognition of the browser (the Web Speech API) - no server of yours, no audio for your app to handle. Each finished phrase is raised through OnTranscript and the provisional text through OnInterim while the user is still speaking. Where the browser cannot transcribe, it renders nothing at all rather than a button that does nothing.
Notes
To use this component, you need to install the
Bit.BlazorUI.AI(opens in a new tab)
nuget package, as described in the Optional steps of the
Getting started page.
BitAiVoiceInput renders nothing in a browser without speech recognition (Firefox, for one) - it asks the
browser once it is on the page, so it is never part of a prerendered page either. Where nothing shows in the examples
below, try a Chromium browser or Safari. The browser asks for the microphone the first time it is pressed, and does
the recognition itself - some (Chrome, for one) in their vendor's cloud service, so do not offer it for speech that
must not leave the device. One dictation runs at a time on a page: starting one in a second voice input stops the
first, which raises its OnListeningChanged as if it had stopped on its own.
The button says what a press does next (Dictate, then Stop dictation) - its name alone, with no pressed state on top
of it to read ambiguously - and is drawn pressed while the microphone is on, and a polite live region announces when
the dictation starts, stops or fails (Listening, Dictation stopped, Dictation failed: not-allowed). These texts come
from the strings in force (StartDictation, StopDictation, Listening, DictationStopped,
DictationFailed), which a BitAiOptionsProvider
localizes. A phrase still being spoken when the button stops the dictation is kept: it arrives through
OnTranscript once the recognizer has committed to it. A
BitAiPromptInput with AllowDictation already carries one;
see the attachments scenario for it in a chat.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Press the microphone and speak: OnTranscript receives each phrase once the recognizer has committed to it.
Press it again to stop. Nothing shows here in a browser that cannot transcribe.
Heard: nothing yet
Interim & listening
OnInterim carries the provisional text as the user speaks - it changes with every syllable - and an empty one
once that text is final or gone. OnListeningChanged is raised when the dictation starts or stops, however that
happens (the button, a silence the browser ends it on, an error, or another voice input of the page starting its own
dictation - one runs at a time, so try any other button of this page); IsListening says the same at any time.
Listening: False (IsListening: )
Provisional:
Final:
With a text field
The button only hands over text, so it goes beside any field: here each phrase is appended to a BitTextField, and the
provisional text shows as its description until it is final.
Language
Language is the language listened for, as a BCP 47 tag - the browser's own language when null. Pick one and
speak it.
Heard (en-US): nothing yet
OnError
OnError receives the name of the error the browser reported when the dictation fails - not-allowed for a
microphone refused, no-speech for a silence, audio-capture for no microphone at all, network - and the dictation
stops. Refuse the microphone to see it.
Heard: nothing yet
Last error: none
Cascading parameters
BitParams with a BitAiVoiceInputParams sets the Language and the look of every voice input inside
it; a parameter of the voice input itself still wins.
British English:
Its own Language, German:
Heard: nothing yet
Disabled
A disabled voice input cannot be pressed. Disabling it while it listens stops the dictation, rather than leaving the
microphone on with nothing able to turn it off.
Heard: nothing yet
Style & Class
Style and Class reach the root, Styles and Classes its button (BitToggleButtonClassStyles)
and its visually hidden live region. The voice input has no CSS variables of its own: the button is restyled through
the public --bit-ToggleButton-* variables, from :root, an ancestor or Style.
Heard: nothing yet
RTL
Use BitAiVoiceInput in right-to-left (RTL). The direction only lays it out: its Language is what decides the
language listened for - Persian here.
شنیده شد: هنوز چیزی شنیده نشده
API
Every parameter, public member, sub-class and enum this component exposes.
BitAiVoiceInput parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Classes | BitAiVoiceInputClassStyles? | null | Custom CSS classes for different parts of the voice input. |
| Language | string? | null | The recognition language, as a BCP 47 language tag such as en-US. When null, the language of the browser is used. It is read when the dictation starts. |
| OnError | EventCallback<string> | Raised when the transcription fails, with the name of the error the browser reported - not-allowed for a microphone the user refused, no-speech, audio-capture, network and the like. The dictation has stopped by then, and the live region has announced the failure. | |
| OnInterim | EventCallback<string> | Raised with the provisional text as the user speaks, which may still change, and with an empty one once that text is final or gone. | |
| OnListeningChanged | EventCallback<bool> | Raised when the dictation starts (true) or stops (false), however that happens: the button, a Disabled set while listening, a silence the browser ends it on, an error, or another voice input of the page starting its own dictation (one runs at a time). | |
| OnTranscript | EventCallback<string> | Raised with each finalised phrase, trimmed, once the recognizer has committed to it. | |
| Styles | BitAiVoiceInputClassStyles? | null | Custom CSS styles for different parts of the voice input. |
BitAiVoiceInput public members
| Name | Type | Default value | Description |
|---|---|---|---|
| IsListening | bool | false | Whether the dictation is running - what OnListeningChanged reported last. False while the browser cannot transcribe. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitAiVoiceInputClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitAiVoiceInput. |
| Button | BitToggleButtonClassStyles? | null | Custom CSS classes/styles for the BitToggleButton of the BitAiVoiceInput that starts and stops the dictation (its Checked member is the state while the microphone is on). |
| LiveRegion | string? | null | Custom CSS classes/styles for the visually hidden live region of the BitAiVoiceInput that announces whether the microphone is on. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.