Appearance in ASP.NET CORE SpeechToText control

28 Apr 20256 minutes to read

Customizing the button

You can use the buttonSettings property to customize the appearance of the start and stop buttons in the speech to text conversion.

Setting start content

You can use the content property to define text content for the listening start state in the SpeechToText button.

Setting stop content

You can use the stopContent property to define text content for the listening stop state in the SpeechToText button.

Setting iconcss

You can use the iconCss property to apply a CSS class to customize the icon appearance for the listening start state.

Setting stop iconcss

You can use the stopIconCss property to apply a CSS class to customize the icon appearance for the listening stop state.

Setting icon position

You can display the icon on the top, bottom, left, or right side of the button text content using the iconPosition property.

Setting primary

You can use the isPrimary property to configure the button as a primary action button.

Below code sample demonstrates how to configure the button with above mentioned properties.

@using Syncfusion.EJ2.Inputs

<div id='speechtotext-container'>
    <ejs-speechtotext id="speech-to-text" transcriptChanged="onTranscriptChanged">
        <e-speechtotext-buttonSettings content="Start" stopContent="Stop" iconCss="e-icons e-play" stopIconCss="e-icons e-pause" iconPosition="@("Right")" isPrimary="true"></e-speechtotext-buttonSettings>
    </ejs-speechtotext>
    <ejs-textarea id="output-textarea" rows="5" cols="50" value="" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
</div>

<script>
    function onTranscriptChanged(args) {
        var textareaObj = ej.base.getComponent(document.getElementById("output-textarea"), "textarea");
        textareaObj.value = args.transcript;
    }
</script>

<style>
    #speechtotext-container {
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
public ActionResult ButtonSettings()
{
    return View();
}

buttonSettings

Customizing the tooltips

You can use the tooltipSettings property to customize the content and positions of the tooltip.

Setting start content

You can use the content property to customize the content to be displayed in the tooltip when the speech recognition begins.

Setting stop content

You can use the stopContent property to customize the stop button tooltip text which is displayed on-hover.

Setting tooltip position

You can use the position property to determine the placement of tooltips relative to the button.

Below code sample demonstrates how to configure the tooltip with above mentioned properties.

@using Syncfusion.EJ2.Inputs

<div id='speechtotext-container'>
    <ejs-speechtotext id="speech-to-text" transcriptChanged="onTranscriptChanged">
        <e-speechtotext-tooltipsettings position="BottomRight" content="Click the button to start recognition" stopContent="Click the button to stop recognition"></e-speechtotext-tooltipsettings>
    </ejs-speechtotext>
    <ejs-textarea id="output-textarea" rows="5" cols="50" value="" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
</div>

<script>
    function onTranscriptChanged(args) {
        var textareaObj = ej.base.getComponent(document.getElementById("output-textarea"), "textarea");
        textareaObj.value = args.transcript;
    }
</script>

<style>
    #speechtotext-container {
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
public ActionResult TooltipSettings()
{
    return View();
}

tooltipSettings

Setting button styles

The SpeechToText control supports the following predefined styles that can be defined using the cssClass property. You can customize by adding the cssClass property with the below defined class.

cssClass Description
e-primary Used to represent a primary action.
e-outline Used to represent an appearance of button with outline.
e-info Used to represent an informative action.
e-success Used to represent a positive action.
e-warning Used to represent an action with caution.
e-danger Used to represent a negative action.

Setting cssclass

You can use the cssClass property to customize the appearance of the SpeechToText control.

@using Syncfusion.EJ2.Inputs

<div id='speechtotext-container'>
    <ejs-speechtotext id="speech-to-text" cssClass="customSpeechBtn" transcriptChanged="onTranscriptChanged"></ejs-speechtotext>
    <ejs-textarea id="output-textarea" rows="5" cols="50" value="" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
</div>

<script>
    function onTranscriptChanged(args) {
        var textareaObj = ej.base.getComponent(document.getElementById("output-textarea"), "textarea");
        textareaObj.value = args.transcript;
    }
</script>

<style>
    #speechtotext-container {
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .e-speech-to-text.customSpeechBtn {
        background-color: #ff6347;
        color: #fff;
        border-radius: 5px;
    }

    .e-speech-to-text.customSpeechBtn:hover,
    .e-speech-to-text.customSpeechBtn:focus {
        background-color: #ff4500;
    }
</style>
public ActionResult Cssclass()
{
    return View();
}

cssclass