@speak-tts/angular

Angular standalone component and signal-based service for text-to-speech, built on @speak-tts/core and the Web Speech API. Real-time word highlighting, dynamic mid-speech controls, audio download, and 67 languages.

Live demo & docs: https://speak-tts.vercel.app/ — try the interactive demo or read the Angular guide.

Built with ng-packagr into the Angular Package Format — works with Angular 16+, every Angular bundler (Angular CLI, Vite + Angular, esbuild, webpack), and SSR (Angular Universal).

Install

npm install @speak-tts/angular
# Adds @speak-tts/core automatically.
# Peer deps: @angular/core ^16, @angular/common ^16.

Usage — component

// app.component.ts
import { Component } from "@angular/core";
import { SpeakTtsComponent } from "@speak-tts/angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [SpeakTtsComponent],
  template: `
    <speak-tts
      text="Hello from Angular!"
      lang="en-US"
      [rate]="1.05"
    ></speak-tts>
  `,
})
export class AppComponent {}

Usage — service

import { Component, inject, signal } from "@angular/core";
import { SpeakTtsService } from "@speak-tts/angular";

@Component({
  selector: "app-root",
  standalone: true,
  template: `
    <p>{{ text }}</p>
    <button (click)="play()">Speak</button>
    <button (click)="speech.stop()">Stop</button>
    <span>Status: {{ speech.status() }}</span>
  `,
})
export class AppComponent {
  readonly text = "This service is reactive via Angular signals.";
  readonly speech = inject(SpeakTtsService);

  play() {
    this.speech.configure({ text: this.text, rate: 1 });
    this.speech.start();
  }
}

API

SpeakTtsComponent inputs

| Input | Type | Description | | ---------------- | --------- | ---------------------------------------- | | text | string | Required. The text to read. | | pitch | number | 0-2, default 1 | | rate | number | 0.1-10, default 1 | | volume | number | 0-1, default 1 | | lang | string | BCP-47 tag (e.g. "en-US") | | voiceURI | string | Voice from speechSynthesis.getVoices() | | maxChunkLength | number | Default 200 | | highlightText | boolean | Default true | | hideControls | boolean | Default false |

SpeakTtsComponent outputs

speechStart, speechPause, speechResume, speechStop, speechEnd, speechError.

SpeakTtsService API

class SpeakTtsService {
  isSupported: boolean;
  status: Signal<SpeechStatus>;
  activeOffset: Signal<number>;
  voices: Signal<SpeechSynthesisVoice[]>;

  configure(options: SpeechOptions): void;
  setText(text: string): void;
  setOptions(opts: Partial<SpeechOptions>): void;
  start(): void;
  pause(): void;
  resume(): void;
  stop(): void;
  destroy(): void;

  on<K>(event: K, listener): () => void;
}

Browser support

Requires the Web Speech API, available in all modern browsers. Audio download additionally requires getDisplayMedia and MediaRecorder (Chromium-based browsers, served over HTTPS or localhost).

@speak-tts/angular is SSR-safe (Angular Universal) — every window access is guarded. On the server, SpeakTtsService.isSupported returns false, all imperative methods are no-ops, and signals start in their idle states.

Related packages

• @speak-tts/core — framework-agnostic core (auto-installed as a dependency).
• @speak-tts/react — React hook + component.

License

MIT