Integrating Speech Recognition in an Angular Chat Application

Introduction

Speech recognition technology has advanced significantly, providing developers with powerful tools to integrate voice-based features into their applications. In this tutorial, we will create a chat application in Angular that leverages the Web Speech API to enable voice recognition. This will allow users to input messages by speaking instead of typing, enhancing user experience and accessibility.

Prerequisites

Before we begin, ensure you have the following:

1. Angular CLI: Installed globally on your machine. If not, you can install it using:

   npm install -g @angular/cli

1. Basic Knowledge of Angular: Familiarity with Angular components, services, and two-way data binding.

Step-by-Step Guide

1. Setting Up the Angular Project

First, create a new Angular project:

ng new voice-recognition-chat
cd voice-recognition-chat

2. Creating the Speech Recognition Service

Next, generate a service to handle speech recognition:

ng generate service service/voice-recognition

In the newly created service file (voice-recognition.service.ts), implement the Web Speech API:

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

declare var webkitSpeechRecognition: any;

@Injectable({
  providedIn: 'root',
})
export class VoiceRecognitionService {
  recognition = new webkitSpeechRecognition();
  isStoppedSpeechRecog = false;
  tempWords: string = '';
  text: string = '';

  constructor() {
    this.recognition.interimResults = true;
    this.recognition.lang = 'en-US';
  }

  init() {
    this.recognition.addEventListener('result', (event: any) => {
      const transcript = Array.from(event.results)
        .map((result: any) => result[0])
        .map((result: any) => result.transcript)
        .join('');
      this.tempWords = transcript;
    });
  }

  start() {
    this.isStoppedSpeechRecog = false;
    this.recognition.start();
    console.log('Speech recognition started');

    this.recognition.addEventListener('end', () => {
      if (this.isStoppedSpeechRecog) {
        this.recognition.stop();
        console.log('End speech recognition');
      } else {
        this.wordConcat();
        this.recognition.start();
      }
    });
  }

  stop() {
    this.isStoppedSpeechRecog = true;
    this.wordConcat();
    this.recognition.stop();
    console.log('End speech recognition');
  }

  wordConcat() {
    this.text = `${this.text} ${this.tempWords}.`;
    this.tempWords = '';
  }
}

3. Creating the Chat Component

Generate a new component for the chat interface:

ng generate component chat

Update the chat component's TypeScript file (chat.component.ts) to use the speech recognition service:

import { Component, OnInit } from '@angular/core';
import { VoiceRecognitionService } from '../service/voice-recognition.service';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css'],
})
export class ChatComponent implements OnInit {
  message: string = '';

  constructor(public voiceRecognitionService: VoiceRecognitionService) {}

  ngOnInit() {
    this.voiceRecognitionService.init();
  }

  startRecording() {
    this.voiceRecognitionService.start();
  }

  stopRecording() {
    this.voiceRecognitionService.stop();
    this.message += this.voiceRecognitionService.text;
    this.voiceRecognitionService.text = ''; // Clear the recognized text after appending to message
  }

  submitMessage(event: Event) {
    // Handle message submission logic here
    console.log('Message submitted:', this.message);
    this.message = ''; // Clear the input after submission
  }
}

4. Updating the HTML Template

In the chat component's HTML file (chat.component.html), add the following code to create the chat input and buttons for starting and stopping the voice recognition:

<div class="chat-container">
  <input class="chat__input" placeholder="Type a message" [(ngModel)]="message" (keyup.enter)="submitMessage($event)">
  <button aria-label="Record voice note" (mousedown)="startRecording()" (mouseup)="stopRecording()">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="chat__input-icon">
      <path fill="currentColor" d="M11.999 14.942c2.001 0 3.531-1.53 3.531-3.531V4.35c0-2.001-1.53-3.531-3.531-3.531S8.469 2.35 8.469 4.35v7.061c0 2.001 1.53 3.531 3.53 3.531zm6.238-3.53c0 3.531-2.942 6.002-6.237 6.002s-6.237-2.471-6.237-6.002H3.761c0 4.001 3.178 7.297 7.061 7.885v3.884h2.354v-3.884c3.884-.588 7.061-3.884 7.061-7.885h-2z"></path>
    </svg>
  </button>
</div>

5. Running the Application

To run the application, use the following command:

ng serve -o

Conclusion

Congratulations! You've successfully integrated speech recognition into your Angular chat application. This feature enhances user experience by allowing voice input, making the chat more accessible and interactive. Feel free to explore additional functionalities such as real-time transcription or language support customization.

Thank you for following along. Happy coding!