Please wait...

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

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

@text  @ speech  @ ionic3  @ plugin  @ npm   @ module  

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: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}

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

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


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

  <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>
  <button ion-button block [color]="isRecording ? 'secondary' : 'danger'"  (click)="stopListening()" *ngIf="isIos()">Stop Sound</button>

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

See Demo:

thank you

Comments 0