Skip to content

Commit ad67921

Browse files
Tsvetomir-HrTsvetomir-Hr
authored
docs(SpeechToTextButton): add SpeechToTextButton docs (#3076)
* docs(SpeechToTextButton): add SpeechToTextButton docs * chore(SpeechToTextButton): remove tables and add links to api reference instead * chore(SpeechToTextButton): apply changes based on review and polish the articles
1 parent 6f5224b commit ad67921

File tree

6 files changed

+221
-0
lines changed

6 files changed

+221
-0
lines changed

‎components/speechtotextbutton/appearance.md

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
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 [Telerik UI for Blazor Button](slug:components/button/overview).
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+
To review all available values for the `Size` parameter, see the [Button Size API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ThemeConstants.Button.Size.html).
20+
21+
>caption Example of setting the Button Size
22+
23+
<demo metaUrl="client/speechtotextbutton/size/" height="150"></demo>
24+
25+
## Fill Mode
26+
27+
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.
28+
29+
To review all available values for the `FillMode` parameter, see the [Button FillMode API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ThemeConstants.Button.FillMode.html).
30+
31+
>caption Example of setting the FillMode
32+
33+
<demo metaUrl="client/speechtotextbutton/fillmode/" height="150"></demo>
34+
35+
## Theme Color
36+
37+
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.
38+
39+
To review all available values for the `ThemeColor` parameter, see the [Button ThemeColor API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ThemeConstants.Button.ThemeColor.html).
40+
41+
>caption Example of setting the ThemeColor
42+
43+
<demo metaUrl="client/speechtotextbutton/themecolor/" height="150"></demo>
44+
45+
## Rounded
46+
47+
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.
48+
49+
To review all available values for the `Rounded` parameter, see the [Button Rounded API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.ThemeConstants.Button.Rounded.html).
50+
51+
>caption Example of Setting the Rounded parameter
52+
53+
<demo metaUrl="client/speechtotextbutton/rounded/" height="150"></demo>
54+
55+
## Icon
56+
57+
Set the `Icon` parameter to display an icon. You can use a predefined [Telerik icon](slug:common-features-icons) or a custom one.
58+
59+
>caption Example of customizing the default icon
60+
61+
<demo metaUrl="client/speechtotextbutton/icon/" height="150"></demo>
62+
63+
## Custom Styles
64+
65+
Use the `Class` parameter to apply custom CSS classes. You can further style the button by targeting these classes.
66+
67+
>caption Example of custom styling
68+
69+
<demo metaUrl="client/speechtotextbutton/customstyle/" height="150"></demo>
70+
71+
## See Also
72+
73+
- [SpeechToTextButton Overview](slug:speechtotextbutton-overview)
74+
- [SpeechToTextButton Events](slug:speechtotextbutton-events)
75+
- [SpeechToTextButton Integration](slug:speechtotextbutton-integration)

‎components/speechtotextbutton/events.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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+
To review all available properties of the event arguments for `OnResult`, see the [`SpeechToTextButtonResultEventArgs` API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.SpeechToTextButtonResultEventArgs.html).
20+
21+
>caption Example: Displaying recognized Alternatives and Confidence
22+
23+
<demo metaUrl="client/speechtotextbutton/onresult/" height="300"></demo>
24+
25+
## OnStart and OnEnd
26+
27+
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.
28+
29+
>caption Example: Indicating listening state
30+
31+
<demo metaUrl="client/speechtotextbutton/onstartend/" height="300"></demo>
32+
33+
## OnError
34+
35+
The `OnError` event fires when an error occurs during speech recognition. Use this event to display error messages to the user.
36+
37+
## OnClick
38+
39+
The `OnClick` event fires when the user clicks or taps the button. It receives argument of type `MouseEventArgs`.
40+
41+
## See Also
42+
43+
- [SpeechToTextButton Overview](slug:speechtotextbutton-overview)
44+
- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance)
45+
- [SpeechToTextButton Integration](slug:speechtotextbutton-integration)

‎components/speechtotextbutton/integration.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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. For example, you can enable users to fill out a feedback form by speaking instead of typing. When the user clicks the SpeechToTextButton, the component captures their speech. It then updates the value of a [TelerikTextArea](slug:textarea-overview) with the recognized text.
18+
19+
>caption Example of binding the recognized text to an TelerikTextArea
20+
21+
<demo metaUrl="client/speechtotextbutton/integration/" height="250"></demo>
22+
23+
## See Also
24+
25+
- [AI Model Voice Transcription Intergration](https://github.com/telerik/blazor-ui/tree/master/common/microsoft-extensions-ai-integration/SpeechToTextIntegration)
26+
- [SpeechToTextButton Overview](slug:speechtotextbutton-overview)
27+
- [SpeechToTextButton Events](slug:speechtotextbutton-events)
28+
- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance)

‎components/speechtotextbutton/overview.md

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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 [Blazor SpeechToTextButton component](https://www.telerik.com/blazor-ui/speech-to-text-button) 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+
>caption 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+
To review all available parameters for the SpeechToTextButton component, see the [SpeechToTextButton API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton#parameters).
36+
37+
## SpeechToTextButton Reference and Methods
38+
39+
The SpeechToTextButton component exposes several public methods that you can call from your code. For a full list and details, see the [SpeechToTextButton API Reference](https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton#methods).
40+
41+
>caption Example of Calling a Method by Reference
42+
43+
<div class="skip-repl"></div>
44+
````RAZOR
45+
<TelerikSpeechToTextButton @ref="speechToTextButtonRef" />
46+
47+
@code {
48+
private async Task StartRecognition()
49+
{
50+
await speechToTextButtonRef.StartAsync();
51+
}
52+
}
53+
````
54+
55+
## Supported Browsers
56+
57+
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).
58+
59+
## Next Steps
60+
61+
* [Handle SpeechToTextButton Events](slug:speechtotextbutton-events)
62+
* [SpeechToTextButton Integration](slug:speechtotextbutton-integration)
63+
64+
## See Also
65+
66+
* [SpeechToTextButton Live Demo](https://demos.telerik.com/blazor-ui/speechtotextbutton/overview)
67+
* [SpeechToTextButton API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton)
68+
* [SpeechToTextButton Events](slug:speechtotextbutton-events)
69+
* [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance)
70+
* [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)