Skip to main content

​
Overview

The SpeechService provides speech-to-text and text-to-speech capabilities using the browser’s native Web Speech API. This service enables voice input and audio output features throughout the application.

​
Service details

File: src/app/_services/__Utils/SpeechService/speech.service.ts
Provided in: root

​
Properties

​
recognition
any
SpeechRecognition instance (browser API)
​
isListening
boolean
default:"false"
Indicates whether speech recognition is currently active
​
transcript
string
default:"''"
The recognized speech text
​
error
string
default:"''"
Error message from speech recognition

​
Methods

​
startListening()

Starts listening for speech input. 
startListening(): void
Behavior:
  • Sets isListening to true
  • Starts the speech recognition engine
  • Supports English (en-US) by default
  • Only captures final results (no interim)

​
stopListening()

Stops listening for speech input. 
stopListening(): void
Behavior:
  • Sets isListening to false
  • Stops the speech recognition engine

​
speakText()

Speaks the current transcript using text-to-speech. 
speakText(): string
Returns: The spoken transcript text Behavior:
  • Uses SpeechSynthesisUtterance API
  • Speaks in English (en-US)
  • Shows alert if no text available

​
speakTextCustom()

Speaks custom text with optional language selection. 
speakTextCustom(_transcript: string, lang: string = ''): void
​
_transcript
string
required
The text to speak
​
lang
string
default:"'en-US'"
Language code for speech synthesis

​
Browser compatibility

The Web Speech API is not supported in all browsers. The service checks for SpeechRecognition or webkitSpeechRecognition availability.
Supported browsers:
  • Chrome/Edge (full support)
  • Safari (partial support)
  • Firefox (limited support)

​
Usage example

import { Component, inject } from '@angular/core';
import { SpeechService } from './_services/__Utils/SpeechService/speech.service';

@Component({
  selector: 'app-voice-input',
  template: `
    <button (click)="startVoiceInput()">Start Listening</button>
    <button (click)="stopVoiceInput()">Stop Listening</button>
    <p>{{ speechService.transcript }}</p>
    <button (click)="speakText()">Speak</button>
  `
})
export class VoiceInputComponent {
  speechService = inject(SpeechService);

  startVoiceInput() {
    this.speechService.startListening();
  }

  stopVoiceInput() {
    this.speechService.stopListening();
  }

  speakText() {
    this.speechService.speakText();
  }
}

​
Integration with components

The SpeechService is used by:
  • SpeechPanelComponent: Provides UI controls for voice input/output
  • BaseComponent: Enables voice feedback for page titles
  • Various form components for voice data entry

​
Error handling

The service captures speech recognition errors in the error property: 
this.recognition.onerror = (event: any) => {
  this.error = event.error;
  this.isListening = false;
  console.error('Error:', this.error);
};
Common error types:
  • no-speech: No speech detected
  • audio-capture: Microphone access denied
  • not-allowed: Permission not granted
  • network: Network error

​
See also

Build docs developers (and LLMs) love

Get started for freeTalk to us