SpeechSynthesis

Angular 7+ speech synthesis service (based on browser implementation such as Chrome).

Demo

See storybook.

See

Support Browsers

Web Speech API -- MDN

Installation

yarn

$ yarn add @kamiazya/ngx-speech-synthesis

npm

$ npm install --save @kamiazya/ngx-speech-synthesis

Setup

Module

import { NgModule } from '@angular/core';

import {
  SpeechSynthesisModule,
} from '@kamiazya/ngx-speech-synthesis';

@NgModule({
  declarations: [
    AppComponent,
    AppDemoComponent
  ],
  imports: [
    BrowserModule,
    SpeechSynthesisModule.forRoot({
      lang: 'en',
      volume: 1.0,
      pitch: 1.0,
      rate: 1.0,
    }),
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

API

import { Component, NgModule } from '@angular/core';

import {
  SpeechSynthesisUtteranceFactoryService,
  SpeechSynthesisService,
} from '@kamiazya/ngx-speech-synthesis';

@Component({
  template: `
    <div>
      <p *ngFor="let text of contents">{{text}}</p>
    </div>
    <div>
      <button (click)="speech()">
        speech
      </button>
      <button (click)="resume()">
        resume
      </button>
      <button (click)="pause()">
        pause
      </button>
      <button (click)="cancel()">
        cancel
      </button>
    </div>
  `,
  providers: [
    SpeechSynthesisUtteranceFactoryService,
  ],
})
export class AppDemoComponent {

  contents = [
    'Peter Piper picked a peck of pickled peppers.',
    'A peck of pickled peppers Peter Piper picked.',
    'If Peter Piper picked a peck of pickled peppers,',
    'Where\'s the peck of pickled peppers Peter Piper picked?',
  ];

  constructor(
    public f: SpeechSynthesisUtteranceFactoryService,
    public svc: SpeechSynthesisService,
  ) { }

  speech() {
    for (const text of this.contents) {
      const v = this.f.text(text);
      this.svc.speak(this.f.text(text));
    }
  }

  cancel() {
    this.svc.cancel();
  }
  pause() {
    this.svc.pause();
  }

  resume() {
    this.svc.resume();
  }
}

Development

On Demo App

Run yarn start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

On Storybook

Run yarn storybook for a dev server. Navigate to http://localhost:9001/. The app will automatically reload if you change any of the source files.

License

Author

kamiazya(Yuki Yamazaki)