Add voice rate and pitch selection.

src/app/app-settings.ts

@@ -69,6 +69,8 @@ export class Options {
   speech = true;
   sectors = false;
   voice = '';
+  rate = 1000;
+  pitch = 1000;
 }
 
 export interface Notification {

src/app/app.component.ts

@@ -66,6 +66,8 @@ export class AppComponent implements AfterViewInit, OnInit, OnDestroy {
       this.logger.setDebugEnabled(options.debug);
       this.setLanguage(options.language);
       this.speech.setVoice(options.voice);
+      this.speech.setRate(options.rate / 1000.0);
+      this.speech.setPitch(options.pitch / 1000.0);
     });
   }
 

src/app/services/speech.service.ts

@@ -33,6 +33,7 @@ class WebSpeech {
         utterance.text = textOrOptions.text;
         utterance.lang = textOrOptions.locale;
         utterance.rate = textOrOptions.rate;
+        utterance.pitch = textOrOptions.pitch;
         utterance.voice = this.getVoiceMap().get(textOrOptions.identifier);
       }
       utterance.onend = () => {
@@ -100,6 +101,8 @@ export class SpeechService {
 
   private rate = 1.0;
 
+  private pitch = 1.0;
+
   private voice: string;
 
   private lastMessage: string;
@@ -123,6 +126,10 @@ export class SpeechService {
     this.rate = rate;
   }
 
+  setPitch(pitch: number) {
+    this.pitch = pitch;
+  }
+
   setVoice(voice: string) {
     this.voice = voice;
   }
@@ -138,6 +145,7 @@ export class SpeechService {
             text: message,
             locale: this.locale || 'en-us',
             rate: this.rate,
+            pitch: this.pitch,
             identifier: this.voice || null
           }).then(() => {
             if (this.pending === 0) {

src/app/settings/index.ts

@@ -4,4 +4,5 @@ export * from './about.page';
 export * from './logging.page';
 export * from './licenses.page';
 export * from './connection.page';
-export * from './notifications.page';
+export * from './notifications.page';
+export * from './voice.page';

src/app/settings/settings.module.ts

@@ -14,6 +14,7 @@ import { LoggingMenu } from './logging.menu';
 import { LoggingPage } from './logging.page';
 import { NotificationsPage } from './notifications.page';
 import { SettingsPage } from './settings.page';
+import { VoicePage } from './voice.page';
 
 const routes: Routes = [
   {
@@ -39,6 +40,10 @@ const routes: Routes = [
   {
     path: 'notifications',
     component: NotificationsPage
+  },
+  {
+    path: 'voice',
+    component: VoicePage
   }
 ];
 
@@ -50,6 +55,7 @@ const routes: Routes = [
     LoggingMenu,
     LoggingPage,
     NotificationsPage,
+    VoicePage,
     SettingsPage
   ],
   exports: [

src/app/settings/settings.page.html

@@ -12,7 +12,7 @@
 <ion-content>
   <ion-list lines="full">
     <ion-item>
-      <ion-select label="{{'Language' | translate}}" [(ngModel)]="options.language" (ionChange)="update()" cancelText="{{'Cancel' | translate}}" okText="{{'OK' | translate}}">
+      <ion-select label="{{'Language' | translate}}" [(ngModel)]="options.language" (ionChange)="updateLanguage()" cancelText="{{'Cancel' | translate}}" okText="{{'OK' | translate}}">
         <!-- ion-option seems to require translate attribute value; see
              https://github.com/ionic-team/ionic/issues/8561#issuecomment-391079689
           -->
@@ -25,11 +25,8 @@
         <ion-select-option value="sk">Slovak</ion-select-option>
       </ion-select>
     </ion-item>
-    <ion-item>
-      <ion-select label="{{'Voice' | translate}}" [disabled]="!options.language || voices.length < 2" [(ngModel)]="options.voice" (ionChange)="updateAndGreet()" cancelText="{{'Cancel' | translate}}" okText="{{'OK' | translate}}">
-        <ion-select-option translate value="">Default</ion-select-option>
-        <ion-select-option *ngFor="let v of voices" value="{{v.identifier}}">{{v.name}}</ion-select-option>
-      </ion-select>
+    <ion-item routerLink="/settings/voice">
+      <ion-label translate>Voice</ion-label>
     </ion-item>
     <ion-item routerLink="/settings/connection">
       <ion-label translate>Connection</ion-label>

src/app/settings/settings.page.ts

@@ -1,7 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 
-import { TranslateService } from '@ngx-translate/core';
-
 import { AboutPage } from './about.page';
 import { ConnectionPage } from './connection.page';
 import { LicensesPage } from './licenses.page';
@@ -15,24 +13,16 @@ import { I18nAlertService, SpeechService } from '../services';
   templateUrl: 'settings.page.html'
 })
 export class SettingsPage implements OnDestroy, OnInit {
-  aboutPage = AboutPage;
-  connectionPage = ConnectionPage;
-  licensesPage = LicensesPage;
-  loggingPage = LoggingPage;
-  notificationsPage = NotificationsPage;
 
   options = new Options();
 
-  voices = [];
-
   private subscription: any;
 
-  constructor(private alert: I18nAlertService, private settings: AppSettings, private speech: SpeechService, private translate: TranslateService) {}
+  constructor(private alert: I18nAlertService, private settings: AppSettings, private speech: SpeechService) {}
 
   ngOnInit() {
     this.subscription = this.settings.getOptions().subscribe(options => {
       this.options = options;
-      this.updateVoices();
     });
   }
 
@@ -53,27 +43,15 @@ export class SettingsPage implements OnDestroy, OnInit {
     });
   }
 
-  async update() {
-    await this.updateVoices();
-    return this.settings.setOptions(this.options);
-  }
-
-  async updateVoices() {
+  async updateLanguage() {
     if (this.options.language) {
-      this.voices = await this.speech.getVoices(this.options.language);
-      if (!this.voices.find(v => v.identifier == this.options.voice)) {
+      let voices = await this.speech.getVoices(this.options.language);
+      if (!voices.find(v => v.identifier == this.options.voice)) {
         this.options.voice = "";
       }
     } else {
-      this.voices = [];
       this.options.voice = "";
     }
-  }
-
-  async updateAndGreet() {
-    await this.update();
-    // TODO: trigger when voice is selected
-    const greeting = this.translate.instant("notifications.greeting");
-    this.speech.speak(greeting);
+    return this.settings.setOptions(this.options);
   }
 }

src/app/settings/voice.page.html

@@ -0,0 +1,48 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>
+      <span translate>Voice</span>
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <ion-item>
+      <ion-select label="{{'Voice' | translate}}" [disabled]="!options.language || voices.length < 2" [(ngModel)]="options.voice" (ionChange)="update()" cancelText="{{'Cancel' | translate}}" okText="{{'OK' | translate}}">
+        <ion-select-option translate value="">Default</ion-select-option>
+        <ion-select-option *ngFor="let v of voices" value="{{v.identifier}}">{{v.name}}</ion-select-option>
+      </ion-select>
+    </ion-item>
+    <ion-item>
+      <ion-label class="ion-text-wrap" translate>
+        Rate
+      </ion-label>
+      <ion-range legacy="true" slot="end" [(ngModel)]="options.rate" (ionChange)="update()" min="700" max="1300">
+      </ion-range>
+      <ion-buttons slot="end">
+        <ion-button fill="clear" (click)="resetRate()">
+          <ion-icon name="refresh-outline"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-item>
+    <ion-item>
+      <ion-label class="ion-text-wrap" translate>
+        Pitch
+      </ion-label>
+      <ion-range legacy="true" slot="end" [(ngModel)]="options.pitch" (ionChange)="update()" min="500" max="1500">
+      </ion-range>
+      <ion-buttons slot="end">
+        <ion-button fill="clear" (click)="resetPitch()">
+          <ion-icon name="refresh-outline"></ion-icon>
+        </ion-button>
+      </ion-buttons>
+    </ion-item>
+    <ion-item>
+      <ion-button (click)="test()">Test</ion-button>
+    </ion-item>
+  </ion-list>
+</ion-content>

src/app/settings/voice.page.ts

@@ -0,0 +1,55 @@
+import { Component, OnDestroy } from '@angular/core';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { AppSettings, Options } from '../app-settings';
+import { SpeechService } from '../services';
+
+
+@Component({
+  templateUrl: 'voice.page.html'
+})
+export class VoicePage implements OnDestroy {
+
+  options = new Options();
+
+  voices = [];
+
+  private subscription: any;
+
+  constructor(private settings: AppSettings, private speech: SpeechService, private translate: TranslateService) {}
+
+  ngOnInit() {
+    this.subscription = this.settings.getOptions().subscribe(options => {
+      this.options = options;
+      this.updateVoices();
+    });
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+  resetRate() {
+    this.options.rate = 1000;
+    this.update();
+  }
+
+  resetPitch() {
+    this.options.pitch = 1000;
+    this.update();
+  }
+
+  async update() {
+    return this.settings.setOptions(this.options);
+  }
+
+  async test() {
+    const greeting = this.translate.instant("notifications.greeting");
+    this.speech.speak(greeting);
+  }
+
+  async updateVoices() {
+    this.voices = await this.speech.getVoices(this.options.language);
+  }
+}

src/assets/i18n/de.json

@@ -71,10 +71,12 @@
   "Open source licenses": "Open-Source-Lizenzen",
   "Order by number": "Nach Nummer ordnen",
   "Pace Car": "Pace Car",
+  "Pitch": "Tonhöhe",
   "Privacy policy": "Datenschutz-Bestimmungen",
   "Qualifying": "Qualifying",
   "Race finished": "Rennen beendet",
   "Race": "Rennen",
+  "Rate": "Geschwindigkeit",
   "Reconnect": "Erneut verbinden",
   "Reconnect delay": "Verzögerung beim erneuten Verbinden",
   "Request timeout": "Zeitlimit für Anfragen",

src/assets/i18n/en.json

@@ -71,10 +71,12 @@
   "Open source licenses": "Open source licenses",
   "Order by number": "Order by number",
   "Pace Car": "Pace Car",
+  "Pitch": "Pitch",
   "Privacy policy": "Privacy policy",
   "Qualifying": "Qualifying",
   "Race finished": "Race finished",
   "Race": "Race",
+  "Rate": "Rate",
   "Reconnect": "Reconnect",
   "Reconnect delay": "Reconnect delay",
   "Request timeout": "Request timeout",

src/assets/i18n/es.json

@@ -71,10 +71,12 @@
   "Open source licenses": "Licencia open source",
   "Order by number": "Ordenar por número",
   "Pace Car": "Coche de seguridad",
+  "Pitch": "Paso",
   "Privacy policy": "Política de privacidad",
   "Qualifying": "Clasificación",
   "Race finished": "Carrera terminada",
   "Race": "Carrera",
+  "Rate": "Velocidad",
   "Reconnect": "Reconectar",
   "Reconnect delay": "Retardo para reconexión",
   "Request timeout": "Solicitud de tiempo de espera",

src/assets/i18n/fr.json

@@ -71,10 +71,12 @@
   "Open source licenses": "Licence Open source",
   "Order by number": "Ordre par numéro",
   "Pace Car": "Pace Car",
+  "Pitch": "Pas",
   "Privacy policy": "Politique de confidentialité",
   "Qualifying": "Qualifications",
   "Race finished": "Course terminée",
   "Race": "Course",
+  "Rate": "Vitesse",
   "Reconnect": "Reconnexion",
   "Reconnect delay": "Délai de reconnexion",
   "Request timeout": "Demande de délai d'attente",

src/assets/i18n/it.json

@@ -71,10 +71,12 @@
   "Open source licenses": "Licenze open source",
   "Order by number": "In ordine di numero",
   "Pace Car": "Pace Car",
+  "Pitch": "Pece",
   "Privacy policy": "Politica sulla riservatezza",
   "Qualifying": "Qualificazioni",
   "Race finished": "Corsa finita",
   "Race": "Corsa",
+  "Rate": "Velocità",
   "Reconnect": "Ricollegamento",
   "Reconnect delay": "Attesa per il ricollegamento",
   "Request timeout": "Tempo massimo per la richiesta",

src/assets/i18n/sk.json

@@ -71,10 +71,12 @@
   "Open source licenses": "Licencie otvoreného zdrojového kódu",
   "Order by number": "Zoradiť podľa čísla",
   "Pace Car": "Pace Car",
+  "Pitch": "Ihrisko",
   "Privacy policy": "Ochrana súkromia",
   "Qualifying": "Kvalifikácia",
   "Race finished": "Preteky ukončené",
   "Race": "Preteky",
+  "Rate": "Rýchlosť",
   "Reconnect": "Opätovne pripojiť",
   "Reconnect delay": "Oneskorenie pri opätovnom pripojení",
   "Request timeout": "Vypršanie časového limitu požiadavky",