From 49a7b011137ae4f2c1c1ed1f6c7dbb1f3a30b325 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Tue, 1 Jul 2025 15:18:38 +0300 Subject: [PATCH 1/3] docs(SpeechToTextButton): add SpeechToTextButton docs --- components/speechtotextbutton/appearance.md | 110 +++++++++++++++++++ components/speechtotextbutton/events.md | 61 ++++++++++ components/speechtotextbutton/integration.md | 29 +++++ components/speechtotextbutton/overview.md | 96 ++++++++++++++++ docs-builder.yml | 2 + introduction.md | 1 + 6 files changed, 299 insertions(+) create mode 100644 components/speechtotextbutton/appearance.md create mode 100644 components/speechtotextbutton/events.md create mode 100644 components/speechtotextbutton/integration.md create mode 100644 components/speechtotextbutton/overview.md diff --git a/components/speechtotextbutton/appearance.md b/components/speechtotextbutton/appearance.md new file mode 100644 index 0000000000..d8b9273632 --- /dev/null +++ b/components/speechtotextbutton/appearance.md @@ -0,0 +1,110 @@ +--- +title: Appearance +page_title: SpeechToTextButton Appearance +description: Customize the appearance of the SpeechToTextButton component in Blazor applications. +slug: speechtotextbutton-appearance +tags: blazor, speech recognition, appearance, customization +published: true +position: 2 +--- + +# SpeechToTextButton Appearance + +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. + +## Size + +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: + +**Available values for the Size parameter** + +| Class member | Manual declaration | +|--------------|-------------------| +| Small | `"sm"` | +| Medium (default) | `"md"` | +| Large | `"lg"` | + +**Example of Setting the Button Size** + + + +## Fill Mode + +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: + +**Available values for the FillMode parameter** + +| Class member | Manual declaration | +|--------------|-------------------| +| Solid (default) | `"solid"` | +| Outline | `"outline"` | +| Flat | `"flat"` | +| Link | `"link"` | +| Clear | `"clear"` | + +**Example of Setting the Fill Mode** + + + +## Theme Color + +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: + +**Available values for the ThemeColor parameter** + +| Class member | Manual declaration | +|--------------|-------------------| +| Base (default) | `"base"` | +| Primary | `"primary"` | +| Secondary | `"secondary"`| +| Tertiary | `"tertiary"` | +| Info | `"info"` | +| Success | `"success"` | +| Warning | `"warning"` | +| Error | `"error"` | +| Dark | `"dark"` | +| Light | `"light"` | +| Inverse | `"inverse"` | + +**Example of Setting the Theme Color** + + + +## Rounded + +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: + +**Available values for the Rounded parameter** + +| Class member | Manual declaration | +|--------------|-------------------| +| Small | `"sm"` | +| Medium (default) | `"md"` | +| Large | `"lg"` | +| Full | `"full"` | + +**Example of Setting the Rounded Parameter** + + + +## Icon + +Set the `Icon` parameter to display an icon. You can use a predefined Telerik icon or a custom one. + +**Example of Customizing the Icon** + + + +## Custom Styles + +Use the `Class` parameter to apply custom CSS classes. You can further style the button by targeting these classes. + +**Example of Custom Styling** + + + +## See Also + +- [SpeechToTextButton Overview](slug:speechtotextbutton-overview) +- [SpeechToTextButton Events](slug:speechtotextbutton-events) +- [SpeechToTextButton Integration](slug:speechtotextbutton-integration) \ No newline at end of file diff --git a/components/speechtotextbutton/events.md b/components/speechtotextbutton/events.md new file mode 100644 index 0000000000..d576898b3a --- /dev/null +++ b/components/speechtotextbutton/events.md @@ -0,0 +1,61 @@ +--- +title: Events +page_title: SpeechToTextButton Events +description: Learn about the events that the SpeechToTextButton component emits and how to handle them in Blazor applications. +slug: speechtotextbutton-events +tags: blazor, speech recognition, events +published: true +position: 3 +--- + +# SpeechToTextButton Events + +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. + +## OnResult + +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. + +**Event arguments** + +The following table lists the properties of the `SpeechToTextButtonResultEventArgs` class: + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Property | Type | Description | +|------------------|----------------------------------------------|---------------------------------------------| +| `Alternatives` | `IEnumerable` | The recognized alternatives. | +| `IsFinal` | `bool` | Indicates whether the speech recognition result is final (true) or interim (false).| + +Each `SpeechRecognitionAlternative` contains: + +| Property | Type | Description | +|------------|----------|-----------------------------| +| `Transcript` | `string` | The recognized text. | +| `Confidence` | `double` | The confidence score level of recognition engine. A floating point value (0.0-1.0). | + +**Example: Displaying Recognized Alternatives and Confidence** + + + +## OnStart and OnEnd + +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. + +**Example: Indicating Listening State** + + + +## OnError + +The `OnError` event fires when an error occurs during speech recognition. Use this event to display error messages to the user. + +## OnClick + +The `OnClick` event fires when the user clicks or taps the button. It receives argument of type `MouseEventArgs`. + +## See Also + +- [SpeechToTextButton Overview](slug:speechtotextbutton-overview) +- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance) +- [SpeechToTextButton Integration](slug:speechtotextbutton-integration) \ No newline at end of file diff --git a/components/speechtotextbutton/integration.md b/components/speechtotextbutton/integration.md new file mode 100644 index 0000000000..83b7ba6604 --- /dev/null +++ b/components/speechtotextbutton/integration.md @@ -0,0 +1,29 @@ +--- +title: Integration +page_title: Integration +description: Learn how to integrate the SpeechToTextButton component with forms and other components in Blazor applications. +slug: speechtotextbutton-integration +tags: blazor, speech recognition, integration +published: true +position: 4 +--- + +# SpeechToTextButton Integration + +Integrate the `SpeechToTextButton` component with forms, input fields, and other UI elements to provide voice input capabilities. + +## Binding Recognized Text to an Input Field + +Use the `OnResult` event to update an input field with the recognized text. + +**Example of Binding Recognized Text to an TelerikTextArea** + + + + +## See Also + +- [AI Model Voice Transcription Intergration](https://github.com/telerik/blazor-ui/tree/master/common/microsoft-extensions-ai-integration/SpeechToTextIntegration) +- [SpeechToTextButton Overview](slug:speechtotextbutton-overview) +- [SpeechToTextButton Events](slug:speechtotextbutton-events) +- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance) \ No newline at end of file diff --git a/components/speechtotextbutton/overview.md b/components/speechtotextbutton/overview.md new file mode 100644 index 0000000000..9ce4411342 --- /dev/null +++ b/components/speechtotextbutton/overview.md @@ -0,0 +1,96 @@ +--- +title: Overview +page_title: SpeechToTextButton Overview +description: Learn about the SpeechToTextButton component, its features, and how to use it in Blazor applications. +slug: speechtotextbutton-overview +tags: blazor, speech recognition, button, voice input +published: true +position: 1 +--- + +# Blazor SpeechToTextButton Overview + +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. + +Use the `SpeechToTextButton` component to add voice input capabilities to forms, search bars, chat interfaces, and other scenarios that require speech-to-text functionality. + +## Basic Usage + +The following example demonstrates how to add the `SpeechToTextButton` to a Blazor page and handle the recognition result. + +**Example of Using the SpeechToTextButton** + + + +## Appearance + +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). + +## Events + +The `SpeechToTextButton` component emits several events that you can handle. For more details, refer to [SpeechToTextButton Events](slug:speechtotextbutton-events). + +## SpeechToTextButton Parameters + +Configure the `SpeechToTextButton` by setting its parameters: + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type and Default Value | Description | +|---------------------|-------------------------------------------------------------|----------------------------------------------------------------------------------------------| +| `Id` | `string` | Sets the `id` attribute of the button. | +| `Icon` | `object` | Specifies the icon rendered in the button. | +| `Title` | `string` | Sets the `title` attribute of the button. | +| `Enabled` | `bool`
(`true`) | Specifies whether the button is enabled. | +| `TabIndex` | `int`
(`0`) | Sets the `tabindex` attribute of the button. | +| `Lang` | `string`
(`browser or system language`) | BCP 47 language tag (for example, `en-US`). | +| `Continuous` | `bool`
(`false`) | Specify whether to return continuous results. | +| `InterimResults` | `bool`
(`false`) | Specify whether to return interim results. | +| `MaxAlternatives` | `int`
(`1`) | The maximum number of recognition alternatives. | +| `IntegrationMode` | `SpeechToTextButtonIntegrationMode`
(`WebSpeech`) | Specify the speech recognition engine or integration mode. | +| `AriaLabel` | `string` | Sets the `aria-label` attribute of the button. | +| `AriaLabelledBy` | `string` | Sets the `aria-labelledby` attribute of the button. | +| `AriaDescribedBy` | `string` | Sets the `aria-describedby` attribute of the button. | +| `AriaControls` | `string` | Sets the `aria-controls` attribute of the button. | + +## SpeechToTextButtton Reference and Methods + +The `SpeechToTextButton` component exposes several public methods that you can call from your code: + +| Method | Description | +|----------------|----------------------------------------------------------------------------------------------| +| `StartAsync` | Start the speech-to-text recognition process. | +| `StopAsync` | Stop the speech recognition process. | +| `AbortAsync` | Abort the speech recognition process without returning a result. | +| `Refresh` | Force the component to re-render. | + +**Example of Calling a Method by Reference** + +
+````RAZOR + + +@code { + private async Task StartRecognition() + { + await speechToTextButtonRef.StartAsync(); + } +} +```` + +## Supported Browsers + +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). + +## Next Steps + +* [Handle SpeechToTextButton Events](slug:speechtotextbutton-events) +* [SpeechToTextButton Integration](slug:speechtotextbutton-integration) + +## See Also + +- [SpeechToTextButton Live Demo](https://demos.telerik.com/blazor-ui/speechtotextbutton/overview) +- [SpeechToTextButton API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton) +- [SpeechToTextButton Events](slug:speechtotextbutton-events) +- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance) +- [SpeechToTextButton Integration](slug:speechtotextbutton-integration) \ No newline at end of file diff --git a/docs-builder.yml b/docs-builder.yml index 152eef3145..911edf40cd 100644 --- a/docs-builder.yml +++ b/docs-builder.yml @@ -184,6 +184,8 @@ meta: title: Stepper "*stacklayout": title: Stack Layout + "*speechtotextbutton": + title: SpeechToTextButton "*splitter": title: Splitter "*splitbutton": diff --git a/introduction.md b/introduction.md index b34fc00c05..a2e72e4a98 100644 --- a/introduction.md +++ b/introduction.md @@ -83,6 +83,7 @@ You can watch a YouTube playlist of getting started tutorials for Telerik UI for + From a237228ddbc2afa4ddfab2f98ff8fa2e32a01d18 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Thu, 3 Jul 2025 11:30:25 +0300 Subject: [PATCH 2/3] chore(SpeechToTextButton): remove tables and add links to api reference instead --- components/speechtotextbutton/appearance.md | 51 ++++----------------- components/speechtotextbutton/events.md | 18 +------- components/speechtotextbutton/overview.md | 36 ++------------- 3 files changed, 14 insertions(+), 91 deletions(-) diff --git a/components/speechtotextbutton/appearance.md b/components/speechtotextbutton/appearance.md index d8b9273632..f83e98e0f7 100644 --- a/components/speechtotextbutton/appearance.md +++ b/components/speechtotextbutton/appearance.md @@ -14,15 +14,9 @@ You can customize the appearance of the `SpeechToTextButton` component by using ## Size -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: +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. -**Available values for the Size parameter** - -| Class member | Manual declaration | -|--------------|-------------------| -| Small | `"sm"` | -| Medium (default) | `"md"` | -| Large | `"lg"` | +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). **Example of Setting the Button Size** @@ -30,17 +24,9 @@ You can increase or decrease the size of the button by setting the `Size` parame ## Fill Mode -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: - -**Available values for the FillMode parameter** +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. -| Class member | Manual declaration | -|--------------|-------------------| -| Solid (default) | `"solid"` | -| Outline | `"outline"` | -| Flat | `"flat"` | -| Link | `"link"` | -| Clear | `"clear"` | +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). **Example of Setting the Fill Mode** @@ -48,23 +34,9 @@ The `FillMode` toggles the background and border of the TelerikSpeechToTextButto ## Theme Color -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: +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. -**Available values for the ThemeColor parameter** - -| Class member | Manual declaration | -|--------------|-------------------| -| Base (default) | `"base"` | -| Primary | `"primary"` | -| Secondary | `"secondary"`| -| Tertiary | `"tertiary"` | -| Info | `"info"` | -| Success | `"success"` | -| Warning | `"warning"` | -| Error | `"error"` | -| Dark | `"dark"` | -| Light | `"light"` | -| Inverse | `"inverse"` | +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). **Example of Setting the Theme Color** @@ -72,16 +44,9 @@ The color of the button is controlled through the `ThemeColor` parameter. You ca ## Rounded -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: - -**Available values for the Rounded parameter** +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. -| Class member | Manual declaration | -|--------------|-------------------| -| Small | `"sm"` | -| Medium (default) | `"md"` | -| Large | `"lg"` | -| Full | `"full"` | +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). **Example of Setting the Rounded Parameter** diff --git a/components/speechtotextbutton/events.md b/components/speechtotextbutton/events.md index d576898b3a..87aef07714 100644 --- a/components/speechtotextbutton/events.md +++ b/components/speechtotextbutton/events.md @@ -16,23 +16,7 @@ The `SpeechToTextButton` component emits events that notify you about speech rec 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. -**Event arguments** - -The following table lists the properties of the `SpeechToTextButtonResultEventArgs` class: - -@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) - -| Property | Type | Description | -|------------------|----------------------------------------------|---------------------------------------------| -| `Alternatives` | `IEnumerable` | The recognized alternatives. | -| `IsFinal` | `bool` | Indicates whether the speech recognition result is final (true) or interim (false).| - -Each `SpeechRecognitionAlternative` contains: - -| Property | Type | Description | -|------------|----------|-----------------------------| -| `Transcript` | `string` | The recognized text. | -| `Confidence` | `double` | The confidence score level of recognition engine. A floating point value (0.0-1.0). | +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). **Example: Displaying Recognized Alternatives and Confidence** diff --git a/components/speechtotextbutton/overview.md b/components/speechtotextbutton/overview.md index 9ce4411342..619f462d4a 100644 --- a/components/speechtotextbutton/overview.md +++ b/components/speechtotextbutton/overview.md @@ -32,37 +32,11 @@ The `SpeechToTextButton` component emits several events that you can handle. For ## SpeechToTextButton Parameters -Configure the `SpeechToTextButton` by setting its parameters: - -@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) - -| Parameter | Type and Default Value | Description | -|---------------------|-------------------------------------------------------------|----------------------------------------------------------------------------------------------| -| `Id` | `string` | Sets the `id` attribute of the button. | -| `Icon` | `object` | Specifies the icon rendered in the button. | -| `Title` | `string` | Sets the `title` attribute of the button. | -| `Enabled` | `bool`
(`true`) | Specifies whether the button is enabled. | -| `TabIndex` | `int`
(`0`) | Sets the `tabindex` attribute of the button. | -| `Lang` | `string`
(`browser or system language`) | BCP 47 language tag (for example, `en-US`). | -| `Continuous` | `bool`
(`false`) | Specify whether to return continuous results. | -| `InterimResults` | `bool`
(`false`) | Specify whether to return interim results. | -| `MaxAlternatives` | `int`
(`1`) | The maximum number of recognition alternatives. | -| `IntegrationMode` | `SpeechToTextButtonIntegrationMode`
(`WebSpeech`) | Specify the speech recognition engine or integration mode. | -| `AriaLabel` | `string` | Sets the `aria-label` attribute of the button. | -| `AriaLabelledBy` | `string` | Sets the `aria-labelledby` attribute of the button. | -| `AriaDescribedBy` | `string` | Sets the `aria-describedby` attribute of the button. | -| `AriaControls` | `string` | Sets the `aria-controls` attribute of the button. | - -## SpeechToTextButtton Reference and Methods - -The `SpeechToTextButton` component exposes several public methods that you can call from your code: - -| Method | Description | -|----------------|----------------------------------------------------------------------------------------------| -| `StartAsync` | Start the speech-to-text recognition process. | -| `StopAsync` | Stop the speech recognition process. | -| `AbortAsync` | Abort the speech recognition process without returning a result. | -| `Refresh` | Force the component to re-render. | +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). + +## SpeechToTextButton Reference and Methods + +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). **Example of Calling a Method by Reference** From 12557023f97e246c6c5fd5e1aea031d2db25f362 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Fri, 4 Jul 2025 17:02:22 +0300 Subject: [PATCH 3/3] chore(SpeechToTextButton): apply changes based on review and polish the articles --- components/speechtotextbutton/appearance.md | 16 +++++------ components/speechtotextbutton/events.md | 6 ++-- components/speechtotextbutton/integration.md | 7 ++--- components/speechtotextbutton/overview.md | 30 ++++++++++---------- 4 files changed, 29 insertions(+), 30 deletions(-) diff --git a/components/speechtotextbutton/appearance.md b/components/speechtotextbutton/appearance.md index f83e98e0f7..d5b68ba16c 100644 --- a/components/speechtotextbutton/appearance.md +++ b/components/speechtotextbutton/appearance.md @@ -10,7 +10,7 @@ position: 2 # SpeechToTextButton Appearance -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. +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). ## Size @@ -18,7 +18,7 @@ You can increase or decrease the size of the button by setting the `Size` parame 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). -**Example of Setting the Button Size** +>caption Example of setting the Button Size @@ -28,7 +28,7 @@ The `FillMode` toggles the background and border of the TelerikSpeechToTextButto 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). -**Example of Setting the Fill Mode** +>caption Example of setting the FillMode @@ -38,7 +38,7 @@ The color of the button is controlled through the `ThemeColor` parameter. You ca 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). -**Example of Setting the Theme Color** +>caption Example of setting the ThemeColor @@ -48,15 +48,15 @@ The `Rounded` parameter applies the border-radius CSS rule to the button to achi 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). -**Example of Setting the Rounded Parameter** +>caption Example of Setting the Rounded parameter ## Icon -Set the `Icon` parameter to display an icon. You can use a predefined Telerik icon or a custom one. +Set the `Icon` parameter to display an icon. You can use a predefined [Telerik icon](slug:common-features-icons) or a custom one. -**Example of Customizing the Icon** +>caption Example of customizing the default icon @@ -64,7 +64,7 @@ Set the `Icon` parameter to display an icon. You can use a predefined Telerik ic Use the `Class` parameter to apply custom CSS classes. You can further style the button by targeting these classes. -**Example of Custom Styling** +>caption Example of custom styling diff --git a/components/speechtotextbutton/events.md b/components/speechtotextbutton/events.md index 87aef07714..3aaf680246 100644 --- a/components/speechtotextbutton/events.md +++ b/components/speechtotextbutton/events.md @@ -10,7 +10,7 @@ position: 3 # SpeechToTextButton Events -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. +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. ## OnResult @@ -18,7 +18,7 @@ The `OnResult` event fires when the component recognizes speech and produces a r 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). -**Example: Displaying Recognized Alternatives and Confidence** +>caption Example: Displaying recognized Alternatives and Confidence @@ -26,7 +26,7 @@ To review all available properties of the event arguments for `OnResult`, see th 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. -**Example: Indicating Listening State** +>caption Example: Indicating listening state diff --git a/components/speechtotextbutton/integration.md b/components/speechtotextbutton/integration.md index 83b7ba6604..a371f57679 100644 --- a/components/speechtotextbutton/integration.md +++ b/components/speechtotextbutton/integration.md @@ -10,17 +10,16 @@ position: 4 # SpeechToTextButton Integration -Integrate the `SpeechToTextButton` component with forms, input fields, and other UI elements to provide voice input capabilities. +Integrate the SpeechToTextButton component with forms, input fields, and other UI elements to provide voice input capabilities. ## Binding Recognized Text to an Input Field -Use the `OnResult` event to update an input field with the recognized text. +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. -**Example of Binding Recognized Text to an TelerikTextArea** +>caption Example of binding the recognized text to an TelerikTextArea - ## See Also - [AI Model Voice Transcription Intergration](https://github.com/telerik/blazor-ui/tree/master/common/microsoft-extensions-ai-integration/SpeechToTextIntegration) diff --git a/components/speechtotextbutton/overview.md b/components/speechtotextbutton/overview.md index 619f462d4a..e07277703d 100644 --- a/components/speechtotextbutton/overview.md +++ b/components/speechtotextbutton/overview.md @@ -10,35 +10,35 @@ position: 1 # Blazor SpeechToTextButton Overview -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. +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. -Use the `SpeechToTextButton` component to add voice input capabilities to forms, search bars, chat interfaces, and other scenarios that require speech-to-text functionality. +Use the SpeechToTextButton component to add voice input capabilities to forms, search bars, chat interfaces, and other scenarios that require speech-to-text functionality. ## Basic Usage -The following example demonstrates how to add the `SpeechToTextButton` to a Blazor page and handle the recognition result. +The following example demonstrates how to add the SpeechToTextButton to a Blazor page and handle the recognition result. -**Example of Using the SpeechToTextButton** +>caption Example of using the SpeechToTextButton ## Appearance -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). +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). ## Events -The `SpeechToTextButton` component emits several events that you can handle. For more details, refer to [SpeechToTextButton Events](slug:speechtotextbutton-events). +The SpeechToTextButton component emits several events that you can handle. For more details, refer to [SpeechToTextButton Events](slug:speechtotextbutton-events). ## SpeechToTextButton Parameters -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). +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). ## SpeechToTextButton Reference and Methods -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). +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). -**Example of Calling a Method by Reference** +>caption Example of Calling a Method by Reference
````RAZOR @@ -54,7 +54,7 @@ The `SpeechToTextButton` component exposes several public methods that you can c ## Supported Browsers -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). +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). ## Next Steps @@ -63,8 +63,8 @@ The `SpeechToTextButton` component relies on the Web Speech API. For a list of s ## See Also -- [SpeechToTextButton Live Demo](https://demos.telerik.com/blazor-ui/speechtotextbutton/overview) -- [SpeechToTextButton API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton) -- [SpeechToTextButton Events](slug:speechtotextbutton-events) -- [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance) -- [SpeechToTextButton Integration](slug:speechtotextbutton-integration) \ No newline at end of file +* [SpeechToTextButton Live Demo](https://demos.telerik.com/blazor-ui/speechtotextbutton/overview) +* [SpeechToTextButton API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSpeechToTextButton) +* [SpeechToTextButton Events](slug:speechtotextbutton-events) +* [SpeechToTextButton Appearance](slug:speechtotextbutton-appearance) +* [SpeechToTextButton Integration](slug:speechtotextbutton-integration) \ No newline at end of file