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
Za početak trebamo dodati plugin koji će činiti jezgru aplikacije, a to činimo naredbama:
|
1 2 |
$ 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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
Ekran se sastoji od četiri dijela:
- Polje za unos sadržaja kojeg želimo da aplikacija izgovori
- Padajući izbornik s popisom jezika pomoću kojih želimo izgovoriti uneseni sadržaj
- Klizač koji određuje brzinu izgovora
- Gumb za pokretanje govora
|
1 2 3 |
<ion-item> <ion-input type="text" placeholder="Unesite sadržaj koji želite izgovoriti..." [(ngModel)]="speakingText"></ion-input> </ion-item> |
|
1 2 3 4 5 6 7 8 9 |
<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> |
|
1 2 3 4 5 6 |
<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> |
|
1 |
<button ion-button full icon-left (click)="speak()"><ion-icon name="megaphone"></ion-icon>Govor!</button> |
U konačnici sve zajedno to izgleda ovako:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<ion-header> <ion-navbar> <ion-title> Ionic3TextToSpeech </ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-item> <ion-input type="text" placeholder="Unesite sadržaj koji želite izgovoriti..." [(ngModel)]="speakingText"></ion-input> </ion-item> <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> <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> <button ion-button full icon-left (click)="speak()"><ion-icon name="megaphone"></ion-icon>Govor!</button> </ion-content> |
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.