Ionic 3 create application text to speech / speech to text.

application TTS STT

By Code solution
Jan 20th, 2021
0 comments
0

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

Create a project run this command:

ionic start <project name> blank

then move into the newly created directory:

cd <project name>

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

<ion-header>
  <ion-navbar [color]="isRecording ? 'danger' : 'secondary'">
    <ion-title>
      Speech to Text
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>

  <ion-item>

    <ion-label stacked>Text</ion-label>
    <ion-textarea rows="4" [(ngModel)]="text" (ionChange)="onChange(text)"></ion-textarea>
  </ion-item>
  <ion-card>
    <ion-fab right top>
      <button (click)="startListening()" ion-fab [color]="isRecording ? 'danger' : 'secondary'">
        <ion-icon name="mic"></ion-icon>
      </button>
    </ion-fab>
  </ion-card>

  <ion-list *ngIf="!istext">
    <ion-list-header *ngIf="isRecording1">
      This is what I understood...
    </ion-list-header>
    <ion-item *ngFor="let match of matches" (click)="sayText(match)" text-wrap>
      {{ match }}
    </ion-item>
  </ion-list>

  <button ion-button block [color]="isRecording ? 'danger' : 'secondary'" (click)="sayText()">Play</button>
  <button ion-button block [color]="isRecording ? 'secondary' : 'danger'"  (click)="stopListening()" *ngIf="isIos()">Stop Sound</button>
</ion-content>

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
ionic cordova run android/ios/windows

See Demo: https://play.google.com/store/apps/details?id=com.wapptech.pronunciation

thank you

About the author

Code solution

info@codesolution.co.in

Discussion

0 comments

Add comment To Login

Add comment