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 .
Thank you
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: [
StatusBar,
SplashScreen,
SpeechRecognition,
TextToSpeech,
{provide: ErrorHandler, useClass: IonicErrorHandler}
Open app.js in src ->home-> home.html and add code
tellgamestop
Speech to Text
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
