Skip to content
Angular 7+ speech synthesis service (based on browser implementation such as Chrome).
TypeScript HTML JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
.vscode
docs
e2e
projects/speech-synthesis
src
.editorconfig
.gitignore
LICENSE
README.md
angular.json
package.json
tsconfig.json
tslint.json
yarn.lock

README.md

Codacy Badge Maintainability CodeFactor FOSSA Status BCH compliance npm version

SpeechSynthesis

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

NPM

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

FOSSA Status

Author

kamiazya(Yuki Yamazaki)

ko-fi

You can’t perform that action at this time.