Getting Started with React SpeechToText Component

22 Jul 202610 minutes to read

This section explains how to create a simple React SpeechToText component and demonstrate its basic usage in a React environment.

Prerequisites

Requirement Version
React 15.5.4 or higher
Node.js 14.0.0 or above
Yarn (optional) 0.25 or above

React supported versions

React version Minimum Syncfusion React SpeechToText version
React v19 29.1.33 and above
React v18 20.2.36 and above
React v17 18.3.50 and above
React v16 16.2.45 and above

Browser support

Browser Supported versions
Chrome Latest
Firefox Latest
Opera Latest
Edge 13+
Internet Explorer (IE) 11+
Safari 9+
iOS Safari 9+
Android Browser / Chrome for Android 4.4+
Windows Mobile IE 11+

Setup for local development

Easily set up a React application using create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions.

Note: To create a React application using create-react-app, refer to this documentation for more details.

To create a new React application, run one of the following commands based on your preferred language:

React with JavaScript

npx create vite@latest my-app -- --template react

React with TypeScript

npx create vite@latest my-app -- --template react-ts

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → ESLint
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Then, navigate to the project directory:

cd my-app

Adding React SpeechToText packages

All Essential® JS 2 packages are published in the npmjs.com public registry.

Install the SpeechToText component using the following command:

npm install @syncfusion/ej2-react-inputs --save

Adding CSS reference

Themes for Syncfusion® SpeechToText component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Tailwind 3 theme package using the following command:

npm install @syncfusion/ej2-tailwind3-theme --save

Then add the following CSS reference to the src/App.css file:

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/speech-to-text/index.css";

Adding SpeechToText component

The SpeechToText code should be added to the src/App.tsx file.

// Import the SpeechToText.
import { SpeechToTextComponent, TextAreaComponent, TranscriptChangedEventArgs, ButtonSettingsModel } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render SpeechToText.
function App() {
    let textareaObj: TextAreaComponent;
    function onTranscriptChanged(args: TranscriptChangedEventArgs) {
        textareaObj.value = args.transcript;
    }
    
    return (
        <div id='container'>
            <SpeechToTextComponent transcriptChanged={onTranscriptChanged}></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'));
{ /* Import the SpeechToText.*/ }
import { SpeechToTextComponent, TextAreaComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

{ /* 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)}></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'));
#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%;
}

Registering your Syncfusion license

Generate a license key from the Syncfusion License Dashboard and register it before rendering your React application:

import { registerLicense } from '@syncfusion/ej2-base';

registerLicense('YOUR_LICENSE_KEY');

Note: A valid Syncfusion license is required for production use. Without a valid license, a trial license warning message will be displayed.

Run the application

Now run the npm run dev command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.

npm run dev

Important: The SpeechToText component requires an internet connection and a browser that supports SpeechRecognition from the Web Speech API. Speech recognition may request microphone permissions from the user.

Production build

To create an optimized production build:

npm run build

Preview the production build locally:

npm run preview

Troubleshooting

  • SpeechToText not rendering styles: Ensure the theme CSS is imported in App.css and that you removed the default Vite CSS in index.css.
  • Trial license warning banner: Register a license key via registerLicense() from @syncfusion/ej2-base.
  • Port 5173 already in use: Stop the conflicting process or run Vite on a different port with npm run dev -- --port 3000.