Angular 14 – Mastering the Art of Voice and Gesture Interactions: A Step-by-Step Guide

Voice and gesture-based interactions are becoming increasingly popular in modern web applications, allowing users to interact with their devices in a more natural and intuitive way. Angular is a popular JavaScript framework for building web applications, and it can be used to create applications that support voice and gesture interactions.

In this tutorial, we will walk through the process of building a simple Angular application that supports voice and gesture-based interactions. We will be using the Angular CLI (Command Line Interface) to create our application and the Web Speech API and HammerJS library to add voice and gesture support.

How to add Voice and Gesture Support in Angular App?

Follow these step by step guide for building natural and engaging user interfaces with Angular and voice/gesture recognition

Step1 – Creating a new Angular Application
Step2 – Adding the Web Speech API and HammerJS Library
Step3 – Adding Voice Recognition Functionality
Step4 – Adding Gesture Recognition Functionality

 

To follow along with this tutorial, you will need the following:

• Node.js and npm (Node Package Manager) installed on your computer
• Basic understanding of Angular and TypeScript
• A code editor (Visual Studio Code is recommended)

 

Creating a new Angular Application

First, we will create a new Angular application using the Angular CLI. Open a command prompt or terminal window and run the following command:

ng new voice-gesture-app

This command will create a new Angular application in a directory called “voice-gesture-app”.

 

Adding the Web Speech API and HammerJS Library

To add voice and gesture support to our application, we will be using the Web Speech API and HammerJS library. These libraries can be added to our application by installing them with npm.

First, navigate to the root of your application in the command prompt or terminal window, and run the following command:

npm install @angular/material @angular/cdk hammerjs

This command will install the Angular Material, Angular CDK and HammerJS library in your application.

Next, we need to import the Web Speech API in our application. To do this, open the src/app/app.module.ts file and add the following line at the top of the file:

import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx';

Adding Voice Recognition Functionality

To add voice recognition functionality to our application, we will create a new service that uses the Web Speech API to listen for voice commands.

Run the following command to generate a new service:

ng generate service speech

This command will create a new service called “SpeechService” in the “src/app” directory.

Open the src/app/speech.service.ts file and import the SpeechRecognition class.

import { Injectable } from '@angular/core';
import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx';

@Injectable({
  providedIn: 'root'
})
export class SpeechService {

  constructor(private speechRecognition: SpeechRecognition) { }

}

Now, we can use the startListening() method of the SpeechRecognition class to start listening for voice commands.

startListening() {
    this.speechRecognition.startListening()
      .subscribe(
        (matches: string[]) => {
          console.log(matches);
        },
        (onerror) => console.log('error:', onerror)
      )
  }

In this example, when a user speaks a command, the `matches` variable will contain an array of the recognized words or phrases. You can then use this array to perform different actions in your application based on the spoken command.

You can also use the isRecognitionAvailable() method to check if the device supports speech recognition.

isRecognitionAvailable() {
    this.speechRecognition.isRecognitionAvailable()
      .then((available: boolean) => console.log(available))
  }

In order to use this service in your component, you need to import the service in the component and create an instance of the service in the constructor of the component.

import { SpeechService } from './speech.service';

export class AppComponent {
    constructor(private speechService: SpeechService) { }
}

Adding Gesture Recognition Functionality

To add gesture recognition functionality to our application, we will use the HammerJS library.

First, open the src/app/app.module.ts file and import the HammerModule from the @angular/platform-browser package.

import { HammerModule } from '@angular/platform-browser';

@NgModule({
  imports: [
    HammerModule
  ],
  ...
})
export class AppModule { }

Next, you can use the hammer directive to add gesture recognition to an element in your template.

<div (tap)="onTap()" (swipe)="onSwipe($event)" (pan)="onPan($event)" (press)="onPress()" (pinch)="onPinch($event)" hammer>
  Gesture Recognition
</div>

In this example, the onTap(), onSwipe(), onPan(), onPress(), and onPinch() methods are called when the respective gesture is detected. You can use these methods to perform different actions in your application based on the gesture.

 

Conclusion

In this tutorial, we have learned how to add voice and gesture-based interactions to an Angular application using the Web Speech API and HammerJS library. You can use these techniques to create more natural and intuitive user interfaces in your applications.

There are many other uses of these technologies such as games, accessibility, AR/VR, and more, as they are becoming more prevalent in modern web development, you can explore and implement them in your projects as well.

It’s important to keep in mind that not all browsers support the Web Speech API, so you may need to provide an alternative method of input for users on unsupported browsers. Additionally, the Web Speech API is still relatively new and the level of support can vary across different devices and browsers.