diff --git a/components/speechtotextbutton/appearance.md b/components/speechtotextbutton/appearance.md new file mode 100644 index 000000000..d5b68ba16 --- /dev/null +++ b/components/speechtotextbutton/appearance.md @@ -0,0 +1,75 @@ +--- +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 [Telerik UI for Blazor Button](slug:components/button/overview). + +## 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. + +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). + +>caption 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. + +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). + +>caption Example of setting the FillMode + + + +## 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. + +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). + +>caption Example of setting the ThemeColor + + + +## 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. + +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). + +>caption Example of Setting the Rounded parameter + + + +## Icon + +Set the `Icon` parameter to display an icon. You can use a predefined [Telerik icon](slug:common-features-icons) or a custom one. + +>caption Example of customizing the default icon + + + +## Custom Styles + +Use the `Class` parameter to apply custom CSS classes. You can further style the button by targeting these classes. + +>caption 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 000000000..3aaf68024 --- /dev/null +++ b/components/speechtotextbutton/events.md @@ -0,0 +1,45 @@ +--- +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. + +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). + +>caption 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. + +>caption 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 000000000..a371f5767 --- /dev/null +++ b/components/speechtotextbutton/integration.md @@ -0,0 +1,28 @@ +--- +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. 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. + +>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) +- [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 000000000..e07277703 --- /dev/null +++ b/components/speechtotextbutton/overview.md @@ -0,0 +1,70 @@ +--- +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 [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. + +## Basic Usage + +The following example demonstrates how to add the SpeechToTextButton to a Blazor page and handle the recognition result. + +>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). + +## 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). + +## 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). + +>caption 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 152eef314..911edf40c 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 b34fc00c0..a2e72e4a9 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 +