{"id":5351,"date":"2017-05-14T23:44:08","date_gmt":"2017-05-14T21:44:08","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=5351"},"modified":"2019-01-05T19:55:03","modified_gmt":"2019-01-05T17:55:03","slug":"ionic-pretvara-tekst-govor-texttospeech","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-pretvara-tekst-govor-texttospeech\/","title":{"rendered":"Ionic 3 – aplikacija koja govori"},"content":{"rendered":"

Nedavno mi je pala jedna ideja na pamet koju mislim realizirati koriste\u0107i upravo Ionic Native Text To Speech plugin<\/em><\/a> tako da \u0107e ovaj blog post poslu\u017eiti kao proba. <\/p>\n

Dodavanje TTS plugina<\/h2>\n

\"Ionic<\/a><\/p>\n

Za po\u010detak trebamo dodati plugin koji \u0107e \u010diniti jezgru aplikacije, a to \u010dinimo naredbama:<\/p>\n

$ ionic plugin add --save cordova-plugin-tts\r\n$ npm install --save @ionic-native\/text-to-speech<\/pre>\n
Nakon uspje\u0161ne instalacije plugin<\/em> \u0107emo dodati kao jedan od providera<\/em> u  app.module.ts<\/span> <\/p>\n
import { NgModule, ErrorHandler } from '@angular\/core';\r\nimport { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';\r\nimport { MyApp } from '.\/app.component';\r\nimport { HomePage } from '..\/pages\/home\/home';\r\nimport { TextToSpeech } from '@ionic-native\/text-to-speech';\r\nimport { StatusBar } from '@ionic-native\/status-bar';\r\nimport { SplashScreen } from '@ionic-native\/splash-screen';\r\nimport { BrowserModule } from '@angular\/platform-browser'\r\n\r\n@NgModule({\r\n  declarations: [\r\n    MyApp,\r\n    HomePage\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    IonicModule.forRoot(MyApp)\r\n  ],\r\n  bootstrap: [IonicApp],\r\n  entryComponents: [\r\n    MyApp,\r\n    HomePage\r\n  ],\r\n  providers: [\r\n    StatusBar,\r\n    SplashScreen,\r\n    {provide: ErrorHandler, useClass: IonicErrorHandler},\r\n    TextToSpeech\r\n    ]\r\n})\r\nexport class AppModule {}<\/pre>\n
Logika aplikacije<\/h2>\n
Logika aplikacije nalazit \u0107e se u ovom slu\u010daju unutar  home.ts<\/span> datoteke.<\/p>\n
import { Component } from '@angular\/core';\r\nimport { NavController } from 'ionic-angular';\r\nimport { TextToSpeech } from '@ionic-native\/text-to-speech';\r\n\r\n@Component({\r\n  selector: 'page-home',\r\n  templateUrl: 'home.html'\r\n})\r\nexport class HomePage {\r\n\r\n  speakingText = '';\r\n  speakingLocale = 'hr-HR';\r\n  speakingRate = 50;\r\n\r\n  constructor(public _navCtrl: NavController, \r\n              public _tts: TextToSpeech) { \r\n                \r\n              }\r\n\r\n  speak() {\r\n    let options = {\r\n      text: this.speakingText,\r\n      locale: this.speakingLocale,\r\n      rate: this.speakingRate \/ 200\r\n    };\r\n\r\n    this._tts.speak(options)\r\n      .then(() => console.log('Uspje\u0161no izgovoreno!'))\r\n      .catch((reason: any) => console.log(reason));\r\n  }\r\n}<\/pre>\n
Ovako to izgleda na ekranu<\/h2>\n
\"Ionic<\/a><\/p>\n
Ekran se sastoji od \u010detiri dijela<\/strong>:<\/p>\n