Skip to content

Commit 49a7b01

Browse files
Tsvetomir-HrTsvetomir-Hr
committed
docs(SpeechToTextButton): add SpeechToTextButton docs
1 parent 710ba15 commit 49a7b01

File tree

6 files changed

+299
-0
lines changed

6 files changed

+299
-0
lines changed

‎components/speechtotextbutton/appearance.md

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
title: Appearance
3+
page_title: SpeechToTextButton Appearance
4+
description: Customize the appearance of the SpeechToTextButton component in Blazor applications.
5+
slug: speechtotextbutton-appearance
6+
tags: blazor, speech recognition, appearance, customization
7+
published: true
8+
position: 2
9+
---
10+
11+
# SpeechToTextButton Appearance
12+
13+
You can customize the appearance of the `SpeechToTextButton` component by using its built-in parameters and CSS classes. The component supports the same appearance options as the standard Telerik Button.
14+
15+
## Size
16+
17+
You can increase or decrease the size of the button by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.Size` class:
18+
19+
**Available values for the Size parameter**
20+
21+
| Class member | Manual declaration |
22+
|--------------|-------------------|
23+
| Small | `"sm"` |
24+
| Medium (default) | `"md"` |
25+
| Large | `"lg"` |
26+
27+
**Example of Setting the Button Size**
28+
29+
<demo metaUrl="client/speechtotextbutton/size/" height="150"></demo>
30+
31+
## Fill Mode
32+
33+
The `FillMode` toggles the background and border of the TelerikSpeechToTextButton. You can set the parameter to a member of the `Telerik.Blazor.ThemeConstants.Button.FillMode` class:
34+
35+
**Available values for the FillMode parameter**
36+
37+
| Class member | Manual declaration |
38+
|--------------|-------------------|
39+
| Solid (default) | `"solid"` |
40+
| Outline | `"outline"` |
41+
| Flat | `"flat"` |
42+
| Link | `"link"` |
43+
| Clear | `"clear"` |
44+
45+
**Example of Setting the Fill Mode**
46+
47+
<demo metaUrl="client/speechtotextbutton/fillmode/" height="150"></demo>
48+
49+
## Theme Color
50+
51+
The color of the button is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.ThemeColor` class:
52+
53+
**Available values for the ThemeColor parameter**
54+
55+
| Class member | Manual declaration |
56+
|--------------|-------------------|
57+
| Base (default) | `"base"` |
58+
| Primary | `"primary"` |
59+
| Secondary | `"secondary"`|
60+
| Tertiary | `"tertiary"` |
61+
| Info | `"info"` |
62+
| Success | `"success"` |
63+
| Warning | `"warning"` |
64+
| Error | `"error"` |
65+
| Dark | `"dark"` |
66+
| Light | `"light"` |
67+
| Inverse | `"inverse"` |
68+
69+
**Example of Setting the Theme Color**
70+
71+
<demo metaUrl="client/speechtotextbutton/themecolor/" height="150"></demo>
72+
73+
## Rounded
74+
75+
The `Rounded` parameter applies the border-radius CSS rule to the button to achieve curving of the edges. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Button.Rounded` class:
76+
77+
**Available values for the Rounded parameter**
78+
79+
| Class member | Manual declaration |
80+
|--------------|-------------------|
81+
| Small | `"sm"` |
82+
| Medium (default) | `"md"` |
83+
| Large | `"lg"` |
84+
| Full | `"full"` |
85+
86+
**Example of Setting the Rounded Parameter**
87+
88+
<demo metaUrl="client/speechtotextbutton/rounded/" height="150"></demo>
89+
90+
## Icon
91+
92+
Set the `Icon` parameter to display an icon. You can use a predefined Telerik icon or a custom one.
93+
94+
**Example of Customizing the Icon**
95+
96+
<demo metaUrl="client/speechtotextbutton/icon/" height="150"></demo>
97+
98+
## Custom Styles
99+
100+
Use the `Class` parameter to apply custom CSS classes. You can further style the button by targeting these classes.
101+
102+
**Example of Custom Styling**
103+
104+
<demo metaUrl="client/speechtotextbutton/customstyle/" height="150"></demo>
105+
106+
## See Also
107+
108+
- [SpeechToTextButton Overview](slug:speechtotextbutton-overview)
109+
- [SpeechToTextButton Events](slug:speechtotextbutton-events)
110+
- [SpeechToTextButton Integration](slug:speechtotextbutton-integration)

‎components/speechtotextbutton/events.md

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: Events
3+
page_title: SpeechToTextButton Events
4+
description: Learn about the events that the SpeechToTextButton component emits and how to handle them in Blazor applications.
5+
slug: speechtotextbutton-events
6+
tags: blazor, speech recognition, events
7+
published: true
8+
position: 3
9+
---
10+
11+
# SpeechToTextButton Events
12+
13+
The `SpeechToTextButton` component emits events that notify you about speech recognition results, errors, and state changes. Use these events to update the UI, display messages, or process the recognized speech.
14+
15+
## OnResult
16+
17+
The `OnResult` event fires when the component recognizes speech and produces a result. Use this event to access the recognized phrases, alternatives, and confidence scores.
18+
19+
**Event arguments**
20+
21+
The following table lists the properties of the `SpeechToTextButtonResultEventArgs` class:
22+
23+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
24+
25+
| Property | Type | Description |
26+
|------------------|----------------------------------------------|---------------------------------------------|
27+
| `Alternatives` | `IEnumerable<SpeechRecognitionAlternative>` | The recognized alternatives. |
28+
| `IsFinal` | `bool` | Indicates whether the speech recognition result is final (true) or interim (false).|
29+
30+
Each `SpeechRecognitionAlternative` contains:
31+
32+
| Property | Type | Description |
33+
|------------|----------|-----------------------------|
34+
| `Transcript` | `string` | The recognized text. |
35+
| `Confidence` | `double` | The confidence score level of recognition engine. A floating point value (0.0-1.0). |
36+
37+
**Example: Displaying Recognized Alternatives and Confidence**
38+
39+
<demo metaUrl="client/speechtotextbutton/onresult/" height="300"></demo>
40+
41+
## OnStart and OnEnd
42+
43+
The `OnStart` event fires when speech recognition starts. The `OnEnd` event fires when speech recognition ends. Use these events to update the UI or track the recognition state.
44+
45+
**Example: Indicating Listening State**
46+
47+
<demo metaUrl="client/speechtotextbutton/onstartend/" height="300"></demo>
48+
49+
## OnError
50+
51+
The `OnError` event fires when an error occurs during speech recognition. Use this event to display error messages to the user.
52+
53+
## OnClick
54+
55+
The `OnClick` event fires when the user clicks or taps the button. It receives argument of type `MouseEventArgs`.
56+
57+
## See Also
58+
59+
- [SpeechToTextButton Overview](slug:speechtotextbutton-overview)
60+
- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance)
61+
- [SpeechToTextButton Integration](slug:speechtotextbutton-integration)

‎components/speechtotextbutton/integration.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: Integration
3+
page_title: Integration
4+
description: Learn how to integrate the SpeechToTextButton component with forms and other components in Blazor applications.
5+
slug: speechtotextbutton-integration
6+
tags: blazor, speech recognition, integration
7+
published: true
8+
position: 4
9+
---
10+
11+
# SpeechToTextButton Integration
12+
13+
Integrate the `SpeechToTextButton` component with forms, input fields, and other UI elements to provide voice input capabilities.
14+
15+
## Binding Recognized Text to an Input Field
16+
17+
Use the `OnResult` event to update an input field with the recognized text.
18+
19+
**Example of Binding Recognized Text to an TelerikTextArea**
20+
21+
<demo metaUrl="client/speechtotextbutton/integration/" height="250"></demo>
22+
23+
24+
## See Also
25+
26+
- [AI Model Voice Transcription Intergration](https://github.com/telerik/blazor-ui/tree/master/common/microsoft-extensions-ai-integration/SpeechToTextIntegration)
27+
- [SpeechToTextButton Overview](slug:speechtotextbutton-overview)
28+
- [SpeechToTextButton Events](slug:speechtotextbutton-events)
29+
- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance)

‎components/speechtotextbutton/overview.md

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: Overview
3+
page_title: SpeechToTextButton Overview
4+
description: Learn about the SpeechToTextButton component, its features, and how to use it in Blazor applications.
5+
slug: speechtotextbutton-overview
6+
tags: blazor, speech recognition, button, voice input
7+
published: true
8+
position: 1
9+
---
10+
11+
# Blazor SpeechToTextButton Overview
12+
13+
The `SpeechToTextButton` component enables speech recognition in Blazor applications. It provides a button that users can select to start and stop speech recognition. The component converts spoken words into text and emits events with the recognized results.
14+
15+
Use the `SpeechToTextButton` component to add voice input capabilities to forms, search bars, chat interfaces, and other scenarios that require speech-to-text functionality.
16+
17+
## Basic Usage
18+
19+
The following example demonstrates how to add the `SpeechToTextButton` to a Blazor page and handle the recognition result.
20+
21+
**Example of Using the SpeechToTextButton**
22+
23+
<demo metaUrl="client/speechtotextbutton/overview/" height="200"></demo>
24+
25+
## Appearance
26+
27+
You can customize the appearance of the `SpeechToTextButton` by setting parameters such as `Icon`, and `Class`. For more details and examples, refer to [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance).
28+
29+
## Events
30+
31+
The `SpeechToTextButton` component emits several events that you can handle. For more details, refer to [SpeechToTextButton Events](slug:speechtotextbutton-events).
32+
33+
## SpeechToTextButton Parameters
34+
35+
Configure the `SpeechToTextButton` by setting its parameters:
36+
37+
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
38+
39+
| Parameter | Type and Default&nbsp;Value | Description |
40+
|---------------------|-------------------------------------------------------------|----------------------------------------------------------------------------------------------|
41+
| `Id` | `string` | Sets the `id` attribute of the button. |
42+
| `Icon` | `object` | Specifies the icon rendered in the button. |
43+
| `Title` | `string` | Sets the `title` attribute of the button. |
44+
| `Enabled` | `bool`<br />(`true`) | Specifies whether the button is enabled. |
45+
| `TabIndex` | `int`<br />(`0`) | Sets the `tabindex` attribute of the button. |
46+
| `Lang` | `string`<br />(`browser or system language`) | BCP 47 language tag (for example, `en-US`). |
47+
| `Continuous` | `bool`<br />(`false`) | Specify whether to return continuous results. |
48+
| `InterimResults` | `bool`<br />(`false`) | Specify whether to return interim results. |
49+
| `MaxAlternatives` | `int`<br />(`1`) | The maximum number of recognition alternatives. |
50+
| `IntegrationMode` | `SpeechToTextButtonIntegrationMode`<br />(`WebSpeech`) | Specify the speech recognition engine or integration mode. |
51+
| `AriaLabel` | `string` | Sets the `aria-label` attribute of the button. |
52+
| `AriaLabelledBy` | `string` | Sets the `aria-labelledby` attribute of the button. |
53+
| `AriaDescribedBy` | `string` | Sets the `aria-describedby` attribute of the button. |
54+
| `AriaControls` | `string` | Sets the `aria-controls` attribute of the button. |
55+
56+
## SpeechToTextButtton Reference and Methods
57+
58+
The `SpeechToTextButton` component exposes several public methods that you can call from your code:
59+
60+
| Method | Description |
61+
|----------------|----------------------------------------------------------------------------------------------|
62+
| `StartAsync` | Start the speech-to-text recognition process. |
63+
| `StopAsync` | Stop the speech recognition process. |
64+
| `AbortAsync` | Abort the speech recognition process without returning a result. |
65+
| `Refresh` | Force the component to re-render. |
66+
67+
**Example of Calling a Method by Reference**
68+
69+
<div class="skip-repl"></div>
70+
````RAZOR
71+
<TelerikSpeechToTextButton @ref="speechToTextButtonRef" />
72+
73+
@code {
74+
private async Task StartRecognition()
75+
{
76+
await speechToTextButtonRef.StartAsync();
77+
}
78+
}
79+
````
80+
81+
## Supported Browsers
82+
83+
The `SpeechToTextButton` component relies on the Web Speech API. For a list of supported browsers, refer to the [Web Speech API documentation](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API#browser_compatibility).
84+
85+
## Next Steps
86+
87+
* [Handle SpeechToTextButton Events](slug:speechtotextbutton-events)
88+
* [SpeechToTextButton Integration](slug:speechtotextbutton-integration)
89+
90+
## See Also
91+
92+
- [SpeechToTextButton Live Demo](https://demos.telerik.com/blazor-ui/speechtotextbutton/overview)
93+
- [SpeechToTextButton API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton)
94+
- [SpeechToTextButton Events](slug:speechtotextbutton-events)
95+
- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance)
96+
- [SpeechToTextButton Integration](slug:speechtotextbutton-integration)

‎docs-builder.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,8 @@ meta:
184184
title: Stepper
185185
"*stacklayout":
186186
title: Stack Layout
187+
"*speechtotextbutton":
188+
title: SpeechToTextButton
187189
"*splitter":
188190
title: Splitter
189191
"*splitbutton":

‎introduction.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ You can watch a YouTube playlist of getting started tutorials for Telerik UI for
8383
<IntroTableAnchor title="Menu" href="slug:components/menu/overview"></IntroTableAnchor>
8484
<IntroTableAnchor title="Context Menu" href="slug:contextmenu-overview"></IntroTableAnchor>
8585
<IntroTableAnchor title="PanelBar" href="slug:panelbar-overview"></IntroTableAnchor>
86+
<IntroTableAnchor title="Speech to Text Button" href="slug:speechtotextbutton-overview"></IntroTableAnchor>
8687
<IntroTableAnchor title="SplitButton" href="slug:splitbutton-overview"></IntroTableAnchor>
8788
<IntroTableAnchor title="Stepper" href="slug:stepper-overview"></IntroTableAnchor>
8889
<IntroTableAnchor title="Tab Strip" href="slug:components/tabstrip/overview"></IntroTableAnchor>

0 commit comments

Comments
 (0)