Appearance in EJ2 JavaScript SpeechToText control

15 Apr 202514 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.

// Initializes the SpeechToText control
var speechToText = new ej.inputs.SpeechToText({
    buttonSettings: {
        content: 'Start',
        stopContent: 'Stop',
        iconCss: 'e-icons e-play',
        stopIconCss: 'e-icons e-pause',
        iconPosition: 'Right',
        isPrimary: true
    },
    transcriptChanged: (args) => {
        textareaObj.value = args.transcript;
    }
});

// Render initialized SpeechToText.
speechToText.appendTo('#speechtotext_default');

var textareaObj = new ej.inputs.TextArea({
    rows: 5,
    cols: 50,
    value: '',
    resizeMode: 'None',
    placeholder: 'Transcribed text will be shown here...'
});
textareaObj.appendTo('#textareaInst');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - SpeechToText</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-inputs/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <button id="speechtotext_default"></button>
        <textarea id="textareaInst"></textarea>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>

    <script src="index.js" type="text/javascript"></script>
    <style>
        #container {
            margin: 50px auto;
            gap: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</body>

</html>

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.

// Initializes the SpeechToText control
var speechToText = new ej.inputs.SpeechToText({
    tooltipSettings: {
        position: 'BottomRight',
        content: 'Click the button to start recognition',
        stopContent: 'Click the button to stop recognition'
    },
    transcriptChanged: (args) => {
        textareaObj.value = args.transcript;
    }
});

// Render initialized SpeechToText.
speechToText.appendTo('#speechtotext_default');

var textareaObj = new ej.inputs.TextArea({
    rows: 5,
    cols: 50,
    value: '',
    resizeMode: 'None',
    placeholder: 'Transcribed text will be shown here...'
});
textareaObj.appendTo('#textareaInst');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - SpeechToText</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-inputs/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <button id="speechtotext_default"></button>
        <textarea id="textareaInst"></textarea>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <style>
        #container {
            margin: 50px auto;
            gap: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>

    <script src="index.js" type="text/javascript"></script>
</body>

</html>

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.

// Initializes the SpeechToText control
var speechToText = new ej.inputs.SpeechToText({
    cssClass: 'customSpeechBtn',
    transcriptChanged: (args) => {
        textareaObj.value = args.transcript;
    }
});

// Render initialized SpeechToText.
speechToText.appendTo('#speechtotext_default');

var textareaObj = new ej.inputs.TextArea({
    rows: 5,
    cols: 50,
    value: '',
    resizeMode: 'None',
    placeholder: 'Transcribed text will be shown here...'
});
textareaObj.appendTo('#textareaInst');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 - SpeechToText</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-inputs/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="index.css" rel="stylesheet">

    <script src="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id="container">
        <button id="speechtotext_default"></button>
        <textarea id="textareaInst"></textarea>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <style>
        #container {
            margin: 50px auto;
            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>

    <script src="index.js" type="text/javascript"></script>
</body>

</html>