New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side API

Additional Information
Click the mic to speak

  • Demo Configurator

The WebForms SpeechToTextButton comes with an extensive set of API configurations. This demo shows how to utilize some of its functions and events such as enabling and disabling the component, settings its Integration Mode, making it Continous or not, changing the Language and Messages and many more.

You can check the full list of the supported API calls in the WebForms SpeechToTextButton API reference documentation.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="SpeechToTextButton_Client_Side_Programming_DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js"></script>
    <link href="../../Overview/style.css" rel="stylesheet" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg flex-center" runat="server">
        <div class="info-wrapper">
            <div class="sidebar"></div>
            <div class="info-container">
                <div class="info-header">
                    <div class="avatar"></div>
                    <span class="title">Additional Information</span>
                </div>
                <div class="rect-field-sm"></div>
                <div class="rect-field"></div>
                <label class="message-label">Project Impact Summary</label>
                <div class="main-container">
                    <div>
                        <telerik:RadTextBox ID="RadTextBox1" runat="server" Width="100%" Height="100px" Skin="Default"
                            EmptyMessage="Describe a project you worked on that had a strong impact." TextMode="MultiLine" />
                    </div>

                    <div class="sttb-container">
                        <span class="description">Click the mic to speak</span>
                        <telerik:RadSpeechToTextButton ID="SpeechToTextButton1" runat="server" Skin="Default" ThemeColor="Base" FillMode="Flat">
                            <ClientEvents OnStart="onStart" OnEnd="onEnd" OnResult="onResult" />
                        </telerik:RadSpeechToTextButton>
                    </div>
                </div>
                <br />
                <div class="rect-field-sm"></div>
                <div class="rect-field"></div>
            </div>
        </div>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button ID="EnableDisable" runat="server" AutoPostBack="false" Width="250px" Text="Disable" OnClientClicked="onEnableDisableClick" />
                        </li>
                        <li>
                            <qsf:Button ID="Button1" runat="server" AutoPostBack="false" Width="250px" Text="Start Recognition" OnClientClicked="startRecognition" />
                        </li>
                        <li>
                            <qsf:Button ID="Button2" runat="server" AutoPostBack="false" Width="250px" Text="Abort Recognition" OnClientClicked="abortRecognition" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox runat="server" ID="Language" AutoPostBack="false" Label="Change Input Language" AllowCustomText="false" OnClientSelectedIndexChanged="changeLanguage">
                                <Items>
                                    <telerik:RadComboBoxItem Text="English" Value="en-US" Selected="True" />
                                    <telerik:RadComboBoxItem Text="Spanish" Value="es-ES" />
                                    <telerik:RadComboBoxItem Text="French" Value="fr-FR" />
                                    <telerik:RadComboBoxItem Text="German" Value="de-DE" />
                                    <telerik:RadComboBoxItem Text="Italian" Value="it-IT" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                        <li>
                            <qsf:ComboBox runat="server" ID="ComboBox1" AutoPostBack="false" Label="Change Messages" AllowCustomText="false" OnClientSelectedIndexChanged="changeMessages">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Minimal" Value="minimal" />
                                    <telerik:RadComboBoxItem Text="Formal" Value="formal" Selected="True" />
                                    <telerik:RadComboBoxItem Text="Friendly" Value="friendly" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance