Ionic 3 Text To Speech Conversion

 Ionic 3 Text To Speech Conversion

Installation:

ionic cordova plugin add cordova-plugin-tts
npm install --save @ionic-native/text-to-speech




 Create Your Project:

ionic start textToSpeech

Change Directory To Your Ionic Project:

cd textToSpeech

Add Page To Your Application : 

ionic g page textToSpeech

Add the following in app.module.ts 

import { TextToSpeechPage } from '../pages/text-to-speech/text-to-speech';

declarations:[
.....
TextToSpeechPage
BrowserFacebookPage
],
entryComponents : [
....
TextToSpeechPage
]

Add the following code in text-to-speech.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Text To Speech</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-item>
      <ion-label floating>Username</ion-label>
      <ion-input type="text" [(ngModel)]="speakOut"></ion-input>
    </ion-item>
  <button ion-button (click)="textToSpeech()" full>Text to speech</button>

</ion-content>

Add The Following Code In text-to-speech.ts:

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { TextToSpeech } from '@ionic-native/text-to-speech';
@Component({
  selector: 'page-text-to-speech',
  templateUrl: 'text-to-speech.html',
  providers: [TextToSpeech ]
})
export class TextToSpeechPage {

  speakOut: string;

  constructor(public navCtrl: NavController, public navParams: NavParams,
    public txtCtrl: TextToSpeech) {
    this.speakOut="Enter Your Message and Convert to speech "
  }

  textToSpeech() {
    this.txtCtrl.speak(this.speakOut)
      .then(() => console.log('Success'))
      .catch((reason: any) => console.log(reason));
  }
}

Run The Application: 

ionic cordova run android

Input :

Enter Some data in the input field and click button. The entered data will be listened
in audio format