How to use Speech recognition plugin in Ionic react?

Hi I am creating a simple application that uses both Speech to text and Text to Speech. If use the speech recognition plugin in react projects it throws an error


If i run my app with cordova instead of ionic serve it throws cordova is not supported for @ionic/react projects. use capacitor instead . But capacitor doesn’t have native plugin for speech recognition.

Please suggest me an idea or solution for this . :pray:
Thank you

1 Like

We create the application to convert voice to text/text to voice.

Create a project run this command:

ionic start blank
then move into the newly created directory:

Install required js and CSS file

ionic cordova plugin add cordova-plugin-tts npm install --save @ionic-native/text-to-speech
ionic cordova plugin add cordova-plugin-speechrecognition npm install --save @ionic-native/speech-recognition
Open app.js in src ->app-> app.module.ts and add code

import { SpeechRecognition } from ‘@ionic-native/speech-recognition’;
import { TextToSpeech } from ‘@ionic-native/text-to-speech’

providers: [
{provide: ErrorHandler, useClass: IonicErrorHandler}
Open app.js in src ->home-> home.html and add code tellgamestop

Speech to Text
<ion-label stacked>Text</ion-label>
<ion-textarea rows="4" [(ngModel)]="text" (ionChange)="onChange(text)"></ion-textarea>

<ion-list *ngIf="!istext">
<ion-list-header *ngIf=“isRecording1”>
This is what I understood…

<ion-item *ngFor=“let match of matches” (click)=“sayText(match)” text-wrap>
{{ match }}

<button ion-button block [color]=“isRecording ? ‘danger’ : ‘secondary’” (click)=“sayText()”>Play
<button ion-button block [color]=“isRecording ? ‘secondary’ : ‘danger’” (click)=“stopListening()” *ngIf=“isIos()”>Stop Sound

Open app.js in src ->home-> home.ts and add code

import { Component, OnInit } from ‘@angular/core’;
import { NavController, Platform } from ‘ionic-angular’;
import { SpeechRecognition } from ‘@ionic-native/speech-recognition’;
import { ChangeDetectorRef } from ‘@angular/core’;
import {TextToSpeech} from ‘@ionic-native/text-to-speech’;

selector: ‘page-home’,
templateUrl: ‘home.html’
export class HomePage implements OnInit{
matches: String;
isRecording = false;
isRecording1 = false;
istext = false;
recognition: any;
text: string;
public words: any
constructor(private navCtrl: NavController, private speechRecognition: SpeechRecognition, private cd: ChangeDetectorRef, private tts: TextToSpeech, private plt: Platform) {

isIos() {
this.istext = true;
this.istext = false;

stopListening() {
this.speechRecognition.stopListening().then(() => {
this.isRecording = false;

.then((hasPermission: boolean) => {
if (!hasPermission) {
// this.getPermission();
startListening() {
this.isRecording = true;
let options = {
language: ‘en-US’
this.speechRecognition.startListening().subscribe(matches => {
this.matches = matches;;
this.isRecording1 = true;
this.isRecording = false;
Voice to Text/Text to voice application code are done you add platform in your application code platform add command:

ionic cordova platform add android/ios/windows
Build and Run command

ionic cordova build android/ios/windows