# AiVoiceInput
**Also known as:** Dictation, SpeechToText
## Description
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.
## 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. |
| 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. |
## 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. |
| 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. |
## Enums
### 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. |
## Sub Classes
### 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. |
## Examples
\n**Basic**:
```razor
> languages =
[
new() { Text = "English (US)", Value = "en-US" },
new() { Text = "Français", Value = "fr-FR" },
new() { Text = "Español", Value = "es-ES" },
new() { Text = "Deutsch", Value = "de-DE" },
];
private string languageTranscript = "nothing yet";
private void HandleLanguageTranscript(string transcript)
{
languageTranscript = transcript;
}
```
\n**OnError**:
```razor
Heard: @basicTranscript
```
```csharp
private string basicTranscript = "nothing yet";
private void HandleBasicTranscript(string transcript)
{
basicTranscript = transcript;
}
```
\n**Interim & listening**:
```razor
Listening: @isListening (IsListening: @(listeningInput?.IsListening))
Provisional: @interim
Final: @listeningTranscript
```
```csharp
private BitAiVoiceInput listeningInput = default!;
private bool isListening;
private string? interim;
private string listeningTranscript = string.Empty;
private void HandleListeningTranscript(string transcript)
{
listeningTranscript = $"{listeningTranscript} {transcript}".Trim();
}
private void HandleInterim(string text)
{
interim = text;
}
private void HandleListeningChanged(bool listening)
{
isListening = listening;
}
```
\n**With a text field**:
```razor
Heard (@language): @languageTranscript
```
```csharp
private string? language = "en-US";
private readonly ListHeard: @errorTranscript
Last error: @lastError
```
```csharp
private string errorTranscript = "nothing yet";
private string lastError = "none";
private void HandleErrorTranscript(string transcript)
{
errorTranscript = transcript;
}
private void HandleError(string error)
{
lastError = error;
}
```
\n**Cascading parameters**:
```razor
British English:
Its own Language, German:
Heard: @cascadeTranscript
```
```csharp
private string cascadeTranscript = "nothing yet";
private readonly BitAiVoiceInputParams[] voiceInputParams = [new() { Language = "en-GB" }];
private void HandleCascadeTranscript(string transcript)
{
cascadeTranscript = transcript;
}
```
\n**Disabled**:
```razor
Heard: @disabledTranscript
```
```csharp
private bool isDisabled;
private string disabledTranscript = "nothing yet";
private void HandleDisabledTranscript(string transcript)
{
disabledTranscript = transcript;
}
```
\n**Style & Class**:
```razor
Heard: @styleTranscript
```
```csharp
private const string cssVariablesStyle = "--bit-ToggleButton-text-color:var(--bit-clr-pri);" +
"--bit-ToggleButton-radius:50%;" +
"--bit-ToggleButton-checked-background:var(--bit-clr-err);" +
"--bit-ToggleButton-checked-color:var(--bit-clr-err-text);";
private string styleTranscript = "nothing yet";
private void HandleStyleTranscript(string transcript)
{
styleTranscript = transcript;
}
```
\n**RTL**:
```razor