Thinking tts - Eric Floe

Thinking “out of the box”Thinking “out of the box”
with Ionic Text To Speechwith Ionic Text To Speech
Eric James FloeEric James Floe
SoCal Code Camp 6/24/17SoCal Code Camp 6/24/17

Ionic Text To SpeechIonic Text To Speech
Why Angular?Why Angular?

Why Ionic?Why Ionic?

Why Hybrid?Why Hybrid?

• Build and maintain one codebase while deploying toBuild and maintain one codebase while deploying to
numerous device platforms.numerous device platforms.

• Build and maintain one code base.Build and maintain one code base.
• Deploy to numerous device platforms.Deploy to numerous device platforms.
Why Native Device capabilities?Why Native Device capabilities?

• Because they are cool and synergistically extend theBecause they are cool and synergistically extend the
functional reach of our applications!functional reach of our applications!

• Because they are cool and synergistically extend theBecause they are cool and synergistically extend the
functional reach of our applications!functional reach of our applications!
• Want Proof? ... go to the docs:Want Proof? ... go to the docs:
http://ionicframework.com/docs/http://ionicframework.com/docs/

Audio/Video Barcode Scanner
Beacons Bluetooth
Camera Contacts
DB Integration File Access
Fingerprint FTP
Geolocation Geofencing
Globalization Google Maps
Media Phone
SMS Social Media
Speech Recognition Text to Speech

Install Ionic and its Dependencies
Install a web development IDEInstall a web development IDE
Install GITInstall GIT
Install Node.jsInstall Node.js
Install/Upgrade npmInstall/Upgrade npm
Install Angular CLIInstall Angular CLI
Install CordovaInstall Cordova
Install IonicInstall Ionic

Demo Time!!!Demo Time!!!

Create a new project:Create a new project:
• ionic start SoCalCodeCamp blank --v2ionic start SoCalCodeCamp blank --v2

CD into the new project:CD into the new project:
• cd SoCalCodeCampcd SoCalCodeCamp

• CD SoCalCodeCampCD SoCalCodeCamp
Run the new project:Run the new project:
• ionic serveionic serve
• http://localhost:8100/http://localhost:8100/

• CD SoCalCodeCampCD SoCalCodeCamp
Run the new project:Run the new project:
• ionic serveionic serve
• http://localhost:8100/http://localhost:8100/
Open the project in an IDE & review the code.Open the project in an IDE & review the code.
• Edit the title & saveEdit the title & save

From the root directory add a Mobile Platform:From the root directory add a Mobile Platform:
• ionic platform add androidionic platform add android

Add the tts plugin to the project:Add the tts plugin to the project:
• cordova plugin add cordova-plugin-ttscordova plugin add cordova-plugin-tts

Add the tts plugin to the project:Add the tts plugin to the project:
• cordova plugin add cordova-plugin-ttscordova plugin add cordova-plugin-tts
Add the Ionic Native Package for Text To Speech:Add the Ionic Native Package for Text To Speech:
• npm install @ionic-native/text-to-speech --savenpm install @ionic-native/text-to-speech --save

In the IDE open the src/app/app.module.ts and add theIn the IDE open the src/app/app.module.ts and add the
TextToSpeech import:TextToSpeech import:
• import { TextToSpeech } from '@ionic-native/text-to-speech';import { TextToSpeech } from '@ionic-native/text-to-speech';
Add TextToSpeech to the list of providers:Add TextToSpeech to the list of providers:
providers: [providers: [
StatusBar,StatusBar,
SplashScreen,SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},{provide: ErrorHandler, useClass: IonicErrorHandler},
TextToSpeechTextToSpeech
]]

In the markup:In the markup:
• Add an ion-itemAdd an ion-item

• Add a ion-labelAdd a ion-label

• Add a ion-text areaAdd a ion-text area

• Add a ion-text areaAdd a ion-text area
• Add a buttonAdd a button

<ion-content padding><ion-content padding>
<ion-item><ion-item>
<ion-label>Text</ion-label><ion-label>Text</ion-label>
<ion-textarea rows="5" [(ngModel)]="text"></ion-textarea><ion-textarea rows="5" [(ngModel)]="text"></ion-textarea>
</ion-item></ion-item>
<button ion-button (click)="sayText()">Text to Speech</button><button ion-button (click)="sayText()">Text to Speech</button>
</ion-content></ion-content>

In the component import TextToSpeech:In the component import TextToSpeech:

Create a string variable in the export class.Create a string variable in the export class.
• text: string;text: string;

Create a string variable in the export class.Create a string variable in the export class.
• text: string;text: string;
Inject TextToSpeech into the constructor.Inject TextToSpeech into the constructor.
• private tts: TextToSpeechprivate tts: TextToSpeech

import { Component } from '@angular/core';import { Component } from '@angular/core';
import { TextToSpeech } from '@ionic-native/text-to-speech';import { TextToSpeech } from '@ionic-native/text-to-speech';
@Component({@Component({
selector: 'page-home',selector: 'page-home',
templateUrl: 'home.html'templateUrl: 'home.html'
})})
export class HomePage {export class HomePage {
text: string;text: string;
constructor(private tts: TextToSpeech) {constructor(private tts: TextToSpeech) {
}}

In the component:In the component:
• import { TextToSpeech } from '@ionic-native/text-import { TextToSpeech } from '@ionic-native/text-
to-speech';to-speech';
Inject TextToSpeech into the constructor.Inject TextToSpeech into the constructor.
• private tts: TextToSpeechprivate tts: TextToSpeech

In the component build the function:In the component build the function:
async sayText():Promise<any>{async sayText():Promise<any>{
try{try{
await this.tts.speak(this.text);await this.tts.speak(this.text);
}}
catch(e){catch(e){
console.log(e)console.log(e)
}}
}}

Thinking tts - Eric Floe

More Related Content

What's hot (15)

Similar to Thinking tts - Eric Floe (20)

Recently uploaded (20)

Thinking tts - Eric Floe