"Federated learning: out of reach no matter how close",Oleksandr Lapshyn
Thinking tts - Eric Floe
1. 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
2. Ionic Text To SpeechIonic Text To Speech
Why Angular?Why Angular?
3. Ionic Text To SpeechIonic Text To Speech
Why Angular?Why Angular?
4. Ionic Text To SpeechIonic Text To Speech
Why Angular?Why Angular?
5. Ionic Text To SpeechIonic Text To Speech
Why Angular?Why Angular?
Why Ionic?Why Ionic?
6. Ionic Text To SpeechIonic Text To Speech
Why Angular?Why Angular?
Why Ionic?Why Ionic?
Why Hybrid?Why Hybrid?
7. 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.
8. Ionic Text To SpeechIonic Text To Speech
Why Angular?Why Angular?
Why Ionic?Why Ionic?
Why Hybrid?Why Hybrid?
• 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?
9. Ionic Text To SpeechIonic Text To Speech
Why Angular?Why Angular?
Why Ionic?Why Ionic?
Why Hybrid?Why Hybrid?
• 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!
10. Ionic Text To SpeechIonic Text To Speech
Why Angular?Why Angular?
Why Ionic?Why Ionic?
Why Hybrid?Why Hybrid?
• 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!
• Want Proof? ... go to the docs:Want Proof? ... go to the docs:
http://ionicframework.com/docs/http://ionicframework.com/docs/
11. Ionic Text To SpeechIonic Text To Speech
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
12. Ionic Text To SpeechIonic 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
13. Ionic Text To SpeechIonic Text To Speech
Demo Time!!!Demo Time!!!
14. Ionic Text To SpeechIonic Text To Speech
Create a new project:Create a new project:
• ionic start SoCalCodeCamp blank --v2ionic start SoCalCodeCamp blank --v2
15. Ionic Text To SpeechIonic Text To Speech
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
16. Ionic Text To SpeechIonic Text To Speech
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
Run the new project:Run the new project:
• ionic serveionic serve
• http://localhost:8100/http://localhost:8100/
17. Ionic Text To SpeechIonic Text To Speech
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
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
18. Ionic Text To SpeechIonic Text To Speech
From the root directory add a Mobile Platform:From the root directory add a Mobile Platform:
• ionic platform add androidionic platform add android
19. Ionic Text To SpeechIonic Text To Speech
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
20. Ionic Text To SpeechIonic Text To Speech
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 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
21. Ionic Text To SpeechIonic Text To Speech
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
]]
22. Ionic Text To SpeechIonic Text To Speech
In the markup:In the markup:
• Add an ion-itemAdd an ion-item
23. Ionic Text To SpeechIonic Text To Speech
In the markup:In the markup:
• Add an ion-itemAdd an ion-item
• Add a ion-labelAdd a ion-label
24. Ionic Text To SpeechIonic Text To Speech
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
25. Ionic Text To SpeechIonic Text To Speech
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 buttonAdd a button
26. Ionic Text To SpeechIonic Text To Speech
In the markup:In the markup:
<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>
27. Ionic Text To SpeechIonic Text To Speech
In the component import TextToSpeech:In the component import TextToSpeech:
• import { TextToSpeech } from '@ionic-native/text-to-speech';import { TextToSpeech } from '@ionic-native/text-to-speech';
28. Ionic Text To SpeechIonic Text To Speech
In the component import TextToSpeech:In the component import TextToSpeech:
• import { TextToSpeech } from '@ionic-native/text-to-speech';import { TextToSpeech } from '@ionic-native/text-to-speech';
Create a string variable in the export class.Create a string variable in the export class.
• text: string;text: string;
29. Ionic Text To SpeechIonic Text To Speech
In the component import TextToSpeech:In the component import TextToSpeech:
• import { TextToSpeech } from '@ionic-native/text-to-speech';import { TextToSpeech } from '@ionic-native/text-to-speech';
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
30. Ionic Text To SpeechIonic Text To Speech
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) {
}}
31. Ionic Text To SpeechIonic Text To Speech
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
32. Ionic Text To SpeechIonic Text To Speech
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)
}}
}}