Speech recognition in EJ2 React SpeechToText component

28 Aug 202524 minutes to read

Retrieving Transcripts

The transcript property allows you to retrieve the transcribed text generated from the spoken input.

index.jsx
index.tsx
styles.css
// Import the SpeechToText.
import { SpeechToTextComponent, TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useRef } from 'react';

// To render SpeechToText.
export default class App extends React.Component {
    textareaObj;
    transcript = 'Hi, hello! How are you?';
    onTranscriptChanged = (args) => {
        textareaObj.current.value = args.transcript;
    };
    render() {
        return (
            <div id='container'>
                <SpeechToTextComponent transcriptChanged={this.onTranscriptChanged.bind(this)} transcript={this.transcript.bind(this)}></SpeechToTextComponent>
                <TextAreaComponent
                    id="textareaInst"
                    ref={(textarea) => {this.textareaObj = textarea} }
                    resizeMode="None"
                    rows={5}
                    cols={50}
                    placeholder="Transcribed text will be shown here..."
                    created={ () => textareaObj.current.value = transcript }
                />
            </div>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));
// Import the SpeechToText.
import { SpeechToTextComponent, TextAreaComponent, TranscriptChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useRef } from 'react';

// To render SpeechToText.
function App() {
    let transcript: string = 'Hi, hello! How are you?';
    let textareaObj: TextAreaComponent;
    function onTranscriptChanged(args: TranscriptChangedEventArgs) {
        textareaObj.value = args.transcript;
    }

    return (
        <div id='container'>
            <SpeechToTextComponent transcriptChanged={onTranscriptChanged} transcript={transcript}></SpeechToTextComponent>
            <TextAreaComponent
                id="textareaInst"
                ref={(textarea) => {textareaObj = textarea} }
                resizeMode="None"
                rows={5}
                cols={50}
                placeholder="Transcribed text will be shown here..."
                created={ () => textareaObj.current.value = transcript }
            />
        </div>
    );
}

export default App;
ReactDom.render(<App />,document.getElementById('element'));
#container {
    margin: 50px auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Represents the styles for loader */
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Setting Language

The lang property specifies the language for speech recognition, ensuring the engine correctly interprets spoken words for a given locale (e.g., en-US for American English or fr-FR for French).

index.jsx
index.tsx
styles.css
// Import the SpeechToText.
import { SpeechToTextComponent, TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useRef } from 'react';

// To render SpeechToText.
export default class App extends React.Component {
    language = 'fr-FR';
    textareaObj;
    onTranscriptChanged = (args) => {
        this.textareaObj.value = args.transcript;
    };
    render() {
        return (
            <div id='container'>
                <SpeechToTextComponent transcriptChanged={this.onTranscriptChanged.bind(this)} lang={this.language.bind(this)}></SpeechToTextComponent>
                <TextAreaComponent
                    id="textareaInst"
                    ref={(textarea) => {this.textareaObj = textarea} }
                    resizeMode="None"
                    rows={5}
                    cols={50}
                    value=""
                    placeholder="Transcribed text will be shown here..."
                />
            </div>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));
// Import the SpeechToText.
import { SpeechToTextComponent, TextAreaComponent, TranscriptChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useRef } from 'react';

// To render SpeechToText.
function App() {
    let language: string = 'fr-FR';
    let textareaObj: TextAreaComponent;
    function onTranscriptChanged(args: TranscriptChangedEventArgs) {
        textareaObj.value = args.transcript;
    }
    return (
        <div id='container'>
            <SpeechToTextComponent transcriptChanged={onTranscriptChanged} lang={language}></SpeechToTextComponent>
            <TextAreaComponent
                id="textareaInst"
                ref={(textarea) => {textareaObj = textarea} }
                resizeMode="None"
                rows={5}
                cols={50}
                value=""
                placeholder="Transcribed text will be shown here..."
            />
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));
#container {
    margin: 50px auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Represents the styles for loader */
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Allowing Interim Results

The allowInterimResults property controls whether interim (real-time) or final speech recognition results are provided. When true, results are displayed as the user speaks; otherwise, only the final transcript is shown. This property is true by default.

index.jsx
index.tsx
styles.css
// Import the SpeechToText.
import { SpeechToTextComponent, TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useRef } from 'react';

// To render SpeechToText.
export default class App extends React.Component {
    textareaObj;
    onTranscriptChanged = (args) => {
        this.textareaObj.value = args.transcript;
    };
    render() {
        return (
            <div id='container'>
                <SpeechToTextComponent transcriptChanged={this.onTranscriptChanged.bind(this)} allowInterimResults={false}></SpeechToTextComponent>
                <TextAreaComponent
                    id="textareaInst"
                    ref={(textarea) => {this.textareaObj = textarea} }
                    resizeMode="None"
                    rows={5}
                    cols={50}
                    value=""
                    placeholder="Transcribed text will be shown here..."
                />
            </div>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));
// Import the SpeechToText.
import { SpeechToTextComponent, TextAreaComponent, TranscriptChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useRef } from 'react';

// To render SpeechToText.
function App() {
    let textareaObj: TextAreaComponent;
    function onTranscriptChanged(args: TranscriptChangedEventArgs) {
        textareaObj.value = args.transcript;
    }
    return (
        <div id='container'>
            <SpeechToTextComponent transcriptChanged={onTranscriptChanged} allowInterimResults={false}></SpeechToTextComponent>
            <TextAreaComponent
                id="textareaInst"
                ref={(textarea) => {textareaObj = textarea} }
                resizeMode="None"
                rows={5}
                cols={50}
                value=""
                placeholder="Transcribed text will be shown here..."
            />
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));
#container {
    margin: 50px auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Represents the styles for loader */
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Managing Listening State

The listeningState property manages and indicates the component’s current status. It can be Inactive (idle), Listening (actively capturing audio), or Stopped (recognition complete). The default state is Inactive.

Inactive

The component is in an idle state with no active speech recognition.

Listening

The component is actively listening, capturing, and transcribing speech, indicated by a stop icon and blinking animation.

Stopped

Denotes that speech recognition has ended, and no further speech is being processed.

The following sample demonstrates the usage of the listeningState property.

index.jsx
index.tsx
styles.css
// Import the SpeechToText.
import { SpeechToTextComponent } from '@syncfusion/ej2-react-inputs';
import React, { useState } from 'react';
import ReactDom from 'react-dom';

export default class App extends React.Component {
    listeningState = 'Inactive';

    updateListeningState = (state) => {
        this.listeningState = state;
    };

    render() {
        return (
            <div id='container'>
                <div id="status-box-container" className={`status-box ${listeningState.toLowerCase()}`}>
                    <span>Status: <strong id="status-text">{listeningState}</strong></span>
                </div>
                <SpeechToTextComponent
                    onStart={(args) => this.updateListeningState(args.listeningState)}
                    onStop={(args) => this.updateListeningState(args.listeningState)}
                    listeningState={listeningState}
                />
                <div className="waveform-container">
                    <div id="waveform-item" className="waveform" style=>
                        <span></span><span></span><span></span><span></span><span></span>
                    </div>
                    <p id="instruction-text">
                        {listeningState === 'Listening' ? 'Listening... Speak now!' :
                        listeningState === 'Stopped' ? 'Recognition Stopped.' :
                        'Click the button to start listening.'}
                    </p>
                </div>
            </div>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));
// Import the SpeechToText.
import { SpeechToTextComponent, StartListeningEventArgs, StopListeningEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    let listeningState = 'Inactive';

    function updateListeningState(state: string) {
        listeningState=state;
    };

    return (
        <div id='container'>
            <div id="status-box-container" className={`status-box ${listeningState.toLowerCase()}`}>
                <span>Status: <strong id="status-text">{listeningState}</strong></span>
            </div>
            <SpeechToTextComponent
                onStart={(args: StartListeningEventArgs) => updateListeningState(args.listeningState)}
                onStop={(args: StopListeningEventArgs) => updateListeningState(args.listeningState)}
                listeningState={listeningState}
            />
            <div className="waveform-container">
                <div id="waveform-item" className="waveform" style=>
                    <span></span><span></span><span></span><span></span><span></span>
                </div>
                <p id="instruction-text">
                    {listeningState === 'Listening' ? 'Listening... Speak now!' :
                     listeningState === 'Stopped' ? 'Recognition Stopped.' :
                     'Click the button to start listening.'}
                </p>
            </div>
        </div>
    );
}

export default App;
ReactDOM.render(<App />,document.getElementById('element'));
/* Represents the styles for loader */
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

/* Represents the styles for SpeechToText sample */

.waveform-container {
    margin-top: 20px;
    font-weight: bold;
}

.waveform {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
gap: 5px;
}

.waveform span {
display: block;
width: 6px;
height: 20px;
background: #28a745;
animation: wave-animation 1.2s infinite ease-in-out;
}

.waveform span:nth-child(1) {
    animation-delay: 0s;
}

.waveform span:nth-child(2) {
    animation-delay: 0.2s;
}

.waveform span:nth-child(3) {
    animation-delay: 0.4s;
}

.waveform span:nth-child(4) {
    animation-delay: 0.6s;
}

.waveform span:nth-child(5) {
    animation-delay: 0.8s;
}

@keyframes wave-animation {
    0%, 100% {
        height: 10px;
    }

    50% {
        height: 30px;
    }
}

#container {
    text-align: center;
    margin: 50px auto;
    max-width: 400px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    background: #fff;
}

.status-box {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 40px;
    font-weight: bold;
}

.status-box.listening {
    background-color: #d1e7dd;
    color: #0f5132;
}

.status-box.stopped {
    background-color: #f8d7da;
    color: #842029;
}

.status-box.inactive {
    background-color: #e2e3e5;
    color: #6c757d;
}

.visual-indicator {
    margin-top: 20px;
}

The showTooltip property determines whether to display a tooltip when hovering over the SpeechToText button. It is enabled by default.

index.jsx
index.tsx
styles.css
// Import the SpeechToText.
import { SpeechToTextComponent, TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useRef } from 'react';

// To render SpeechToText.
export default class App extends React.Component {
    textareaObj;
    onTranscriptChanged = (args) => {
        this.textareaObj.value = args.transcript;
    };
    render() {
        return (
            <div id='container'>
                <SpeechToTextComponent transcriptChanged={this.onTranscriptChanged.bind(this)} showTooltip={false}></SpeechToTextComponent>
                <TextAreaComponent
                    id="textareaInst"
                    ref={(textarea) => {this.textareaObj = textarea} }
                    resizeMode="None"
                    rows={5}
                    cols={50}
                    value=""
                    placeholder="Transcribed text will be shown here..."
                />
            </div>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));
// Import the SpeechToText.
import { SpeechToTextComponent, TextAreaComponent, TranscriptChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useRef } from 'react';

// To render SpeechToText.
function App() {
    let textareaObj: TextAreaComponent;
    function onTranscriptChanged(args: TranscriptChangedEventArgs) {
        textareaObj.value = args.transcript;
    }
    return (
        <div id='container'>
            <SpeechToTextComponent transcriptChanged={onTranscriptChanged} showTooltip={false}></SpeechToTextComponent>
            <TextAreaComponent
                id="textareaInst"
                ref={(textarea) => {textareaObj = textarea} }
                resizeMode="None"
                rows={5}
                cols={50}
                value=""
                placeholder="Transcribed text will be shown here..."
            />
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));
#container {
    margin: 50px auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Represents the styles for loader */
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Setting Disabled

The disabled property, when set to true, disables the SpeechToText component and prevents user interaction. By default, it is false.

index.jsx
index.tsx
styles.css
// Import the SpeechToText.
import { SpeechToTextComponent, TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useRef } from 'react';

// To render SpeechToText.
export default class App extends React.Component {
    textareaObj;
    onTranscriptChanged = (args) => {
        this.textareaObj.value = args.transcript;
    };
    render() {
        return (
            <div id='container'>
                <SpeechToTextComponent transcriptChanged={this.onTranscriptChanged.bind(this)} disabled={true}></SpeechToTextComponent>
                <TextAreaComponent
                    id="textareaInst"
                    ref={(textarea) => {this.textareaObj = textarea} }
                    resizeMode="None"
                    rows={5}
                    cols={50}
                    value=""
                    placeholder="Transcribed text will be shown here..."
                />
            </div>
        );
    }
}
ReactDom.render(<App />,document.getElementById('element'));
// Import the SpeechToText.
import { SpeechToTextComponent, TextAreaComponent, TranscriptChangedEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { useRef } from 'react';

// To render SpeechToText.
function App() {
    let textareaObj: TextAreaComponent;
    function onTranscriptChanged(args: TranscriptChangedEventArgs) {
        textareaObj.value = args.transcript;
    }
    return (
        <div id='container'>
            <SpeechToTextComponent transcriptChanged={onTranscriptChanged} disabled={true}></SpeechToTextComponent>
            <TextAreaComponent
                id="textareaInst"
                ref={(textarea) => {textareaObj = textarea} }
                resizeMode="None"
                rows={5}
                cols={50}
                value=""
                placeholder="Transcribed text will be shown here..."
            />
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));
#container {
    margin: 50px auto;
    gap: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Represents the styles for loader */
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

Setting HTML Attributes

You can use the htmlAttributes property to assign custom attributes to the SpeechToText component for the button element.

Error Handling

The SpeechToText component handles various errors that may occur during speech recognition. The following table lists the possible errors and their causes:

Error	Cause
`no-speech`	The microphone did not detect any speech input.
`aborted`	The speech recognition process was intentionally terminated.
`audio-capture`	The system was unable to detect a microphone device.
`not-allowed`	Access to the microphone was denied by the user or browser settings.
`service-not-allowed`	The current context does not permit the use of the speech recognition service.
`network`	A network issue is preventing the speech recognition service from functioning.
`unsupported-browser`	The browser being used does not support the SpeechRecognition API.
`default`	An unidentified error occurred during the speech recognition process.

Browser Support

The SpeechToText component relies on the Speech Recognition API for processing speech input. Ensure that the browser supports this API before implementation.

Browser	Supported versions
Chrome	25+
Edge	79+
Firefox	Not Supported
Safari	12+
Opera	30+