New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

ASP.NET MVC SpeechToTextButton Overview

The Telerik UI SpeechToTextButton HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI SpeechToTextButton widget.

The SpeechToTextButton is an interactive UI component that converts spoken words into written text using the browser's built-in speech recognition capabilities. This powerful tool enhances user experience by providing an alternative input method valuable for accessibility, mobile applications, and scenarios where hands-free interaction is preferred. Users click the button to activate voice recording, speak naturally, and watch their words automatically transcribed into editable text. The component is suitable for form filling, content creation, search functionality, and any application requiring efficient voice-to-text conversion.

Demo page for the SpeechToTextButton

Initializing the SpeechToTextButton

The following example demonstrates how to define the SpeechToTextButton component.

Razor

@(Html.Kendo().SpeechToTextButton()
    .Name("speechButton")
    .IntegrationMode(IntegrationMode.WebSpeech)
    .Icon("microphone-outline")
    .StopIcon("stop-sm")
)

Basic Configuration

Usually, the SpeechToTextButton is integrated with other input UI components, such as TextBox, TextArea, or NumericTextBox, to display the converted speech-to-text results, enabling direct voice-to-text input functionality within the editors.

Handle the Result client-side 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 button, the component captures the speech and updates the value of the editor with the recognized text.

The following example demonstrates a basic integration of the SpeechToTextButton into a TextBox component. The SpeechToTextButton is displayed in the suffix adornment of the TextBox using the Template component.

Razor
@(Html.Kendo().TextBox()
    .Name("txtBox")
    .SuffixOptions(suffix =>
    {
        suffix.Template(Html.Kendo().Template()
        .AddHtml("<div class='description k-ml-xs'>Click the mic to speak</div>")
        .AddComponent(btn => btn
        .SpeechToTextButton()
        .Name("speechButton")
        .FillMode(ButtonFillMode.Flat)
        .Events(ev => ev.Result("onResult"))
        ));
    })
)
JS
<script>
    function onResult(e) {
        var transcript = e.alternatives[0].transcript; // Access the array of alternative transcripts. 
        $("#txtBox").data("kendoTextBox").value(`${transcript}`);
    }
</script>

Functionality and Features

Appearance—You can control the appearance of the SpeechToTextButton by configuring its styling options.
Events—The component emits a variety of events that allow you to implement custom functionality.
Accessibility—The SpeechToTextButton is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.

Button States

The SpeechToTextButton component operates in three distinct states that reflect the current status of the speech recognition process:

Inactive State—The state before speech recognition begins. The default button's icon is microphone-outline.
Active State (listening)—Indicates that speech recognition is currently in progress. The button's icon changes to the default stop-sm icon.
Error State—Triggers when speech recognition encounters an error or when the Web Speech API is not supported by the browser.

Browser Support

By default, the SpeechToTextButton component relies on the Web Speech API to perform speech recognition. For a list of supported browsers, refer to the Web Speech API documentation.

The Web Speech API requires a secure context (HTTPS) in most browsers. Ensure your application is served over HTTPS for optimal functionality.