How to use Speech recognition plugin in Ionic react?

Ionic Framework Ionic React
1

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

notAvailableError

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

2

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:

cd
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: [
StatusBar,
SplashScreen,
SpeechRecognition,
TextToSpeech,
{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’;

@Component({
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() {
return this.plt.is(‘ios’);
}
onChange(value){
console.log(value);
if(value){
this.istext = true;
}else{
this.istext = false;
}
}

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

ngOnInit(){
this.speechRecognition.hasPermission()
.then((hasPermission: boolean) => {
if (!hasPermission) {
this.speechRecognition.requestPermission();
}
});
}
// this.getPermission();
startListening() {
this.isRecording = true;
let options = {
language: ‘en-US’
}
this.speechRecognition.startListening().subscribe(matches => {
this.matches = matches;
this.cd.detectChanges();
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

3

wait is this angular?

4

yes, things have changed since then

5

but the post is about react tho hehe