Getting Started Started with React SpeechToText Component

25 Mar 202513 minutes to read

This section explains how to create a simple SpeechToText and configure its available functionalities in the React environment.

Dependencies

The following list of dependencies is required to use the SpeechToText component in your application.

|-- @syncfusion/ej2-react-inputs
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-popups

Setup for Local Development

To set-up a React application, choose any of the following ways. The best and easiest way is to use the create-react-app. It sets up your development environment in JavaScript and improvise your application for production. Refer to the installation instructions of create-react-app.

npx create-react-app my-app
cd my-app
npm start

or

yarn create react-app my-app
cd my-app
yarn start

To set-up a React application in TypeScript environment, run the following command.

npx create-react-app my-app --template typescript
cd my-app
npm start

Besides using the npx package runner tool, also create an application from the npm init. To begin with the npm init, upgrade the npm version to npm 6+.

npm init react-app my-app
cd my-app
npm start

Adding Syncfusion® packages

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

To install SpeechToText component, use the following command

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

Adding SpeechToText component

Now, you can start adding SpeechToText component in the application. For getting started, add the SpeechToText component by using <SpeechToTextComponent> tag directive in src/App.tsx file using following code. Now place the below SpeechToText code in the src/App.tsx.

[Class-component]

import { SpeechToTextComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  public render() {
    return (
        // specifies the tag for render the Speech to text component
        <SpeechToTextComponent id='speechToText'></SpeechToTextComponent>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('speech-to-text'));

[Functional-component]

import { SpeechToTextComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App() {
    return (
        // specifies the tag for render the Speech to text component
        <SpeechToTextComponent id="speechToText"></SpeechToTextComponent>
    );
}

ReactDOM.render(<App />, document.getElementById('speech-to-text'));

Adding CSS Reference

Import the SpeechToText component required CSS references as follows in src/App.css.

@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-react-inputs/styles/material.css";

Run the application

After completing the configuration required to render a basic SpeechToText, run the following command to display the output in your default browser.

npm start

The following example shows a basic SpeechToText component.

{ /* 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. */ }
function App() {
    const textareaObj = useRef(null);
    const onTranscriptChanged = (args) => {
        textareaObj.current.value = args.transcript;
    };
    return (
        <div id='container'>
            <SpeechToTextComponent transcriptChanged={onTranscriptChanged}></SpeechToTextComponent>
            <TextAreaComponent
                id="textareaInst"
                ref={textareaObj}
                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, 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() {
    const textareaObj = useRef<TextAreaComponent>(null);
    const onTranscriptChanged = (args: TranscriptChangedEventArgs) => {
        textareaObj.current.value = args.transcript;
    };
    return (
        <div id='container'>
            <SpeechToTextComponent transcriptChanged={onTranscriptChanged}></SpeechToTextComponent>
            <TextAreaComponent
                id="textareaInst"
                ref={textareaObj}
                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%;
}

The SpeechToText component requires an internet connection and using a browser that supports SpeechRecognition from the Web Speech API.

## Adding button content

You can use the content property to display the start listening text and stopContent to display the stop listening text by using the buttonSettings property.

// 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.
function App() {
    const textareaObj = useRef(null);
    const onTranscriptChanged = (args) => {
        textareaObj.current.value = args.transcript;
    };
    const buttonSettings = {
        content: 'Start Listening',
        stopContent: 'Stop Listening'
    }
    return (
        <div id='container'>
            <SpeechToTextComponent transcriptChanged={onTranscriptChanged} buttonSettings={buttonSettings}></SpeechToTextComponent>
            <TextAreaComponent
                id="textareaInst"
                ref={textareaObj}
                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, TranscriptChangedEventArgs, ButtonSettingsModel } 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() {
    const textareaObj = useRef<TextAreaComponent>(null);
    const onTranscriptChanged = (args: TranscriptChangedEventArgs) => {
        textareaObj.current.value = args.transcript;
    };
    const buttonSettings: ButtonSettingsModel = {
        content: 'Start Listening',
        stopContent: 'Stop Listening'
    }
    return (
        <div id='container'>
            <SpeechToTextComponent transcriptChanged={onTranscriptChanged} buttonSettings={buttonSettings}></SpeechToTextComponent>
            <TextAreaComponent
                id="textareaInst"
                ref={textareaObj}
                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%;
}