add speech recognition

mo-rieger · Jan 4, 2019 · 47a85bb · 47a85bb
1 parent 41c18e7
commit 47a85bb
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 7 deletions.
diff --git a/ios/App/App/Info.plist b/ios/App/App/Info.plist
@@ -5,7 +5,7 @@
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
-        <string>speech</string>
+	<string>speech</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
@@ -50,6 +50,8 @@
 	<string>Store camera photos to camera</string>
 	<key>NSPhotoLibraryUsageDescription</key>
 	<string>To Pick Photos from Library</string>
+	<key>NSSpeechRecognitionUsageDescription</key>
+	<string>To trigger actions by voice</string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>

diff --git a/ios/App/App/config.xml b/ios/App/App/config.xml
@@ -1,6 +1,11 @@
 <?xml version='1.0' encoding='utf-8'?>
   <widget version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
 
+  <feature name="SpeechRecognition">
+    <param name="ios-package" value="SpeechRecognition"/>
+  </feature>
+
+
   <feature name="TTS">
     <param name="ios-package" value="CDVTTS"/>
   </feature>

diff --git a/ios/App/Podfile.lock b/ios/App/Podfile.lock
@@ -21,7 +21,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   Capacitor: 95a02969f90a0384263d8dd3a0930548c5eb4d3f
   CapacitorCordova: 0ac0f51826feddef37d1ef8a8f6ff8c8b1ed0dd3
-  CordovaPlugins: aaa38c836d940ac3e36763f941159cfc9a49906a
+  CordovaPlugins: d228888b1364ff8e48e964686469ef9b3ce8b2d5
 
 PODFILE CHECKSUM: 78ac319422efe1338956118f7aa7dc29bef1ae28
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,10 +24,12 @@
     "@capacitor/core": "^1.0.0-beta.13",
     "@capacitor/ios": "^1.0.0-beta.13",
     "@ionic-native/core": "5.0.0-beta.21",
+    "@ionic-native/speech-recognition": "^5.0.0-beta.22",
     "@ionic-native/splash-screen": "5.0.0-beta.21",
     "@ionic-native/status-bar": "5.0.0-beta.21",
     "@ionic-native/text-to-speech": "^5.0.0-beta.22",
     "@ionic/angular": "4.0.0-rc.0",
+    "cordova-plugin-speechrecognition": "^1.2.0",
     "cordova-plugin-tts": "^0.2.3",
     "core-js": "^2.5.4",
     "rxjs": "~6.3.3",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -9,6 +9,7 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { TextToSpeech } from '@ionic-native/text-to-speech/ngx';
+import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx';
 
 @NgModule({
   declarations: [AppComponent],
@@ -18,6 +19,7 @@ import { TextToSpeech } from '@ionic-native/text-to-speech/ngx';
     StatusBar,
     SplashScreen,
     TextToSpeech,
+    SpeechRecognition,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
   ],
   bootstrap: [AppComponent]

diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
@@ -7,6 +7,19 @@
 </ion-header>
 
 <ion-content padding>
-  The world is your oyster.
-  <p>If you get lost, the <a target="_blank" rel="noopener" href="https://beta.ionicframework.com/docs/">docs</a> will be your guide.</p>
+  <ion-button (click)="play()">Play</ion-button>
+  <ion-button full (click)="getPermission()">Get Permission</ion-button>
+  <ion-button full (click)="startListening()">Start Listening</ion-button>
+  <ion-button full (click)="stopListening()" *ngIf="isIos()">Stop Listening</ion-button>
+
+  <ion-card>
+    <ion-card-header>This is what I understood...</ion-card-header>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let match of matches">
+          {{ match }}
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
 </ion-content>
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
@@ -1,4 +1,9 @@
 import { Component } from '@angular/core';
+import { TextToSpeech } from '@ionic-native/text-to-speech/ngx';
+import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx';
+import { NavController, Platform } from '@ionic/angular';
+import { ChangeDetectorRef } from '@angular/core';
+
 
 @Component({
   selector: 'app-home',
@@ -7,4 +12,49 @@ import { Component } from '@angular/core';
 })
 export class HomePage {
 
+  matches: String[];
+  isRecording = false;
+
+  constructor(
+    private tts: TextToSpeech,
+    private speechRecognition: SpeechRecognition,
+    public navCtrl: NavController,
+    private plt: Platform,
+    private cd: ChangeDetectorRef) { }
+
+
+  isIos() {
+    return this.plt.is('ios');
+  }
+  stopListening() {
+    this.speechRecognition.stopListening().then(() => {
+      this.isRecording = false;
+    });
+  }
+  getPermission() {
+    this.speechRecognition.hasPermission()
+      .then((hasPermission: boolean) => {
+        if (!hasPermission) {
+          this.speechRecognition.requestPermission();
+        }
+      });
+  }
+  startListening() {
+    let options = {
+      language: 'en-US'
+    };
+    this.speechRecognition.startListening().subscribe(matches => {
+      this.matches = matches;
+      this.cd.detectChanges();
+    });
+    this.isRecording = true;
+  }
+
+  play() {
+    this.tts.speak('Hello World')
+  .then(() => console.log('Success'))
+  .catch((reason: any) => console.log(reason));
+
+  }
+
 }