Ionic 3 - aplikacija koja govori

Ionic 3 – aplikacija koja govori

Nedavno mi je pala jedna ideja na pamet koju mislim realizirati koristeći upravo Ionic Native Text To Speech plugin tako da će ovaj blog post poslužiti kao proba.

Dodavanje TTS plugina

Ionic Text To Speech

Za početak trebamo dodati plugin koji će činiti jezgru aplikacije, a to činimo naredbama:

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

Nakon uspješne instalacije plugin ćemo dodati kao jedan od providera u app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TextToSpeech } from '@ionic-native/text-to-speech';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { BrowserModule } from '@angular/platform-browser'

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    TextToSpeech
    ]
})
export class AppModule {}

Logika aplikacije

Logika aplikacije nalazit će se u ovom slučaju unutar home.ts datoteke.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TextToSpeech } from '@ionic-native/text-to-speech';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  speakingText = '';
  speakingLocale = 'hr-HR';
  speakingRate = 50;

  constructor(public _navCtrl: NavController, 
              public _tts: TextToSpeech) { 
                
              }

  speak() {
    let options = {
      text: this.speakingText,
      locale: this.speakingLocale,
      rate: this.speakingRate / 200
    };

    this._tts.speak(options)
      .then(() => console.log('Uspješno izgovoreno!'))
      .catch((reason: any) => console.log(reason));
  }
}

Ovako to izgleda na ekranu

Ionic aplikacija govori

Ekran se sastoji od četiri dijela:

  • Polje za unos sadržaja kojeg želimo da aplikacija izgovori
  • <ion-item>
     <ion-input type="text" placeholder="Unesite sadržaj koji želite izgovoriti..." [(ngModel)]="speakingText"></ion-input>
    </ion-item>
  • Padajući izbornik s popisom jezika pomoću kojih želimo izgovoriti uneseni sadržaj
  •  <ion-item>
        <ion-label>Odabir jezika</ion-label>
        <ion-select [(ngModel)]="speakingLocale" okText="Odaberi" cancelText="Odustani">
          <ion-option value="hr-HR">hr-HR</ion-option>
          <ion-option value="en-G">en-GB</ion-option>
          <ion-option value="en-US">en-US</ion-option>
          <ion-option value="de-DE">de-DE</ion-option>
        </ion-select>
      </ion-item>
  • Klizač koji određuje brzinu izgovora
  • <ion-item>
        <ion-range [(ngModel)]="speakingRate" min="100" max="200">
          <ion-icon range-left small name="speedometer"></ion-icon>
          <ion-icon range-right name="speedometer"></ion-icon>
        </ion-range>
      </ion-item>
  • Gumb za pokretanje govora
  • <button ion-button full icon-left (click)="speak()"><ion-icon name="megaphone"></ion-icon>Govor!</button>

U konačnici sve zajedno to izgleda ovako:


  
    
      Ionic3TextToSpeech
    
  



  
    
  
  
    Odabir jezika
    
      hr-HR
      en-GB
      en-US
      de-DE
    
  

   
    
      
      
    
  

  

Zaključak

Nažalost nisam mogao pokazati kako ova aplikacija radi u praksi, ali ako budete radili prema ranije navedenom imati ćete i sami funkcionalan primjer aplikacije koja tekst pretvara u govor.

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *