Speech recognition in EJ2 Angular SpeechToText Component

22 Aug 202524 minutes to read

Retrieving Transcripts

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

import { Component, ViewChild, ChangeDetectorRef  } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { SpeechToTextModule, SpeechToTextComponent, TextAreaModule, TranscriptChangedEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        SpeechToTextModule, TextAreaModule, FormsModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render SpeechToText component. -->
    <div class="speechText-container">
        <button #speechtotext ejs-speechtotext [transcript]="transcript" (transcriptChanged)="onTranscriptChanged($event)"></button>
        <ejs-textarea #outputTextarea id="textareaInst" [(value)]="transcript" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
    </div>`
})

export class AppComponent {
    @ViewChild('speechtotext') speechtotext!: SpeechToTextComponent;
    public transcript: string = 'Hi, hello! How are you?';
    constructor(private cdr: ChangeDetectorRef) {}

    onTranscriptChanged(args: TranscriptChangedEventArgs): void {
        this.transcript = this.speechtotext.transcript;
        this.cdr.detectChanges();
    }
 }
/* You can add global styles to this file, and also import other style files */
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Angular Speech To Text</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular Speech To Text Component" />
    
<meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
<style>
    .speechText-container {
        margin: 50px auto;
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="wrapper">
            <app-root>
                <div id='loader'>LOADING....</div>
            </app-root>
        </div>
    </body>
</html>

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).

import { Component, ViewChild } from '@angular/core';

import { SpeechToTextModule, TextAreaComponent, TextAreaModule, TranscriptChangedEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        SpeechToTextModule, TextAreaModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render SpeechToText component. -->
    <div class="speechText-container">
        <button #speechtotext ejs-speechtotext (transcriptChanged)="onTranscriptChange($event)" [lang]="language"></button>
        <ejs-textarea #outputTextarea id="textareaInst" value="" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
    </div>`
})

export class AppComponent {
    @ViewChild('outputTextarea') outputTextarea!: TextAreaComponent;
    public language: string = 'fr-FR';
    onTranscriptChange(args: TranscriptChangedEventArgs): void {
        this.outputTextarea.value = args.transcript;
    }
}
/* You can add global styles to this file, and also import other style files */
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Angular Speech To Text</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular Speech To Text Component" />
    
<meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
<style>
    .speechText-container {
        margin: 50px auto;
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="wrapper">
            <app-root>
                <div id='loader'>LOADING....</div>
            </app-root>
        </div>
    </body>
</html>

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.

import { Component, ViewChild } from '@angular/core';

import { SpeechToTextModule, TextAreaComponent, TextAreaModule, TranscriptChangedEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        SpeechToTextModule, TextAreaModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render SpeechToText component. -->
    <div class="speechText-container">
        <button #speechtotext ejs-speechtotext (transcriptChanged)="onTranscriptChange($event)" [allowInterimResults]="false"></button>
        <ejs-textarea #outputTextarea id="textareaInst" value="" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
    </div>`
})

export class AppComponent {
    @ViewChild('outputTextarea') outputTextarea!: TextAreaComponent;
    onTranscriptChange(args: TranscriptChangedEventArgs): void {
        this.outputTextarea.value = args.transcript;
    }
}
/* You can add global styles to this file, and also import other style files */
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Angular Speech To Text</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular Speech To Text Component" />
    
<meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
<style>
    .speechText-container {
        margin: 50px auto;
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="wrapper">
            <app-root>
                <div id='loader'>LOADING....</div>
            </app-root>
        </div>
    </body>
</html>

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.

import { Component } from '@angular/core';
import { SpeechToTextModule, SpeechToTextState, StopListeningEventArgs, StartListeningEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        SpeechToTextModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render SpeechToText component. -->
        <div id="container">
            <div id="status-box-container" class="status-box inactive">
                <span>Status: <strong id="status-text">Inactive</strong></span>
            </div>
            <button #speechtotext ejs-speechtotext (onStart)="updateListeningState($event)" (onStop)="updateListeningState($event)" [listeningState]="listeningState" id="speechtotext_default"></button>
            <div class="waveform-container">
                <div id="waveform-item" class="waveform" style="display: none;">
                    <span></span><span></span><span></span><span></span><span></span>
                </div>
                <p id="instruction-text">Click the button to start listening.</p>
            </div>
        </div>`
})

export class AppComponent {
    public listeningState: SpeechToTextState = SpeechToTextState.Inactive;
    updateListeningState(args: StartListeningEventArgs | StopListeningEventArgs): void {
        const state = args.listeningState;
        const statusBox = document.getElementById('status-box-container');
        const statusTextElement = document.getElementById('status-text');
        const waveform = document.getElementById('waveform-item');
        const instructionText = document.getElementById('instruction-text');

        if (statusTextElement) {
            statusTextElement.innerText = state;
        }

        if (statusBox && waveform && instructionText) {
            if (state === "Listening") {
                statusBox.className = "status-box listening";
                waveform.style.display = "flex";
                instructionText.innerText = "Listening... Speak now!";
            } else if (state === "Stopped") {
                statusBox.className = "status-box stopped";
                waveform.style.display = "none";
                instructionText.innerText = "Recognition Stopped.";
            } else {
                statusBox.className = "status-box inactive";
                waveform.style.display = "none";
                instructionText.innerText = "Click the button to start listening.";
            }
        }
    }
}
/* You can add global styles to this file, and also import other style files */
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Angular Speech To Text</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular Speech To Text Component" />
    
<meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <style>
        .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;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="wrapper">
            <app-root>
                <div id='loader'>LOADING....</div>
            </app-root>
        </div>
    </body>
</html>

Show or Hide Tooltip

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

import { Component, ViewChild } from '@angular/core';

import { SpeechToTextModule, TextAreaComponent, TextAreaModule, TranscriptChangedEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        SpeechToTextModule, TextAreaModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render SpeechToText component. -->
    <div class="speechText-container">
        <button #speechtotext ejs-speechtotext (transcriptChanged)="onTranscriptChange($event)" [showTooltip]="false"></button>
        <ejs-textarea #outputTextarea id="textareaInst" value="" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
    </div>`
})

export class AppComponent {
    @ViewChild('outputTextarea') outputTextarea!: TextAreaComponent;
    onTranscriptChange(args: TranscriptChangedEventArgs): void {
        this.outputTextarea.value = args.transcript;
    }
 }
/* You can add global styles to this file, and also import other style files */
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Angular Speech To Text</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular Speech To Text Component" />
    
<meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
<style>
    .speechText-container {
        margin: 50px auto;
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="wrapper">
            <app-root>
                <div id='loader'>LOADING....</div>
            </app-root>
        </div>
    </body>
</html>

Setting Disabled

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

import { Component, ViewChild } from '@angular/core';

import { SpeechToTextModule, TextAreaComponent, TextAreaModule, TranscriptChangedEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        SpeechToTextModule, TextAreaModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<!-- To Render SpeechToText component. -->
    <div class="speechText-container">
        <button #speechtotext ejs-speechtotext (transcriptChanged)="onTranscriptChange($event)" [disabled]="true"></button>
        <ejs-textarea #outputTextarea id="textareaInst" value="" rows="5" cols="50" resizeMode="None" placeholder="Transcribed text will be shown here..."></ejs-textarea>
    </div>`
})

export class AppComponent {
    @ViewChild('outputTextarea') outputTextarea!: TextAreaComponent;
    onTranscriptChange(args: TranscriptChangedEventArgs): void {
        this.outputTextarea.value = args.transcript;
    }
 }
/* You can add global styles to this file, and also import other style files */
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';
<!DOCTYPE html>
<html lang="en">
<head>
    <title>EJ2 Angular Speech To Text</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Angular Speech To Text Component" />
    
<meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
<style>
    .speechText-container {
        margin: 50px auto;
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="wrapper">
            <app-root>
                <div id='loader'>LOADING....</div>
            </app-root>
        </div>
    </body>
</html>

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+