Ajout de la reconnaissance vocale avec prise en charge de la grammaire à votre application angulaire

La reconnaissance vocale peut grandement améliorer les interactions des utilisateurs dans les applications Web en permettant aux utilisateurs de saisir du texte ou des commandes à l'aide de leur voix. Dans ce tutoriel, je vais vous montrer comment intégrer la reconnaissance vocale dans une application Angular et l'améliorer avec une prise en charge grammaticale.

Prérequis

• Connaissance de base d'Angular.
• CLI angulaire installée.
• Un projet Angular existant ou créez-en un nouveau à l'aide de la nouvelle application de reconnaissance vocale.

Étape 1 : configurer le service de reconnaissance vocale

Tout d'abord, nous devons créer un service pour gérer la reconnaissance vocale. Ce service utilisera le webkitSpeechRecognition et SpeechGrammarList de l'API Web Speech.

Créer un nouveau service :
ng générer un service de reconnaissance vocale
Maintenant, mettez à jour le Speech-recognition.service.ts généré :

import { Injectable, NgZone } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class SpeechRecognitionService {
  recognition: any;
  isListening: boolean = false;

  constructor(private zone: NgZone) {
    const { webkitSpeechRecognition, webkitSpeechGrammarList }: IWindow = window as any;
    this.recognition = new webkitSpeechRecognition();
    this.recognition.continuous = false;
    this.recognition.interimResults = false;
    this.recognition.lang = 'en-US';

    const grammar = '#JSGF V1.0; grammar colors; public <color> = red | green | blue | yellow ;';
    const speechRecognitionList = new webkitSpeechGrammarList();
    speechRecognitionList.addFromString(grammar, 1);
    this.recognition.grammars = speechRecognitionList;
  }

  startListening(): Promise<string> {
    return new Promise((resolve, reject) => {
      if (this.isListening) {
        reject('Already listening');
      }

      this.isListening = true;

      this.recognition.onresult = (event: any) => {
        this.zone.run(() => {
          const result = event.results[0][0].transcript;
          this.stopListening();
          resolve(result);
        });
      };

      this.recognition.onerror = (event: any) => {
        this.zone.run(() => {
          this.isListening = false;
          reject(event.error);
        });
      };

      this.recognition.onend = () => {
        this.zone.run(() => {
          this.isListening = false;
        });
      };

      this.recognition.start();
    });
  }

  stopListening(): void {
    if (this.isListening) {
      this.recognition.stop();
      this.isListening = false;
    }
  }
}

interface IWindow extends Window {
  webkitSpeechRecognition: any;
  webkitSpeechGrammarList: any;
}

Étape 2 : créer le composant

Ensuite, nous allons créer un composant pour utiliser notre service de reconnaissance vocale. Ce composant aura une zone de texte et une icône de microphone. Lorsque l'utilisateur clique sur l'icône, la reconnaissance vocale démarre et le texte reconnu sera ajouté à la zone de texte.
Mettre à jour app.component.ts :

import { Component } from '@angular/core';
import { SpeechRecognitionService } from './speech-recognition.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  note: string = '';
  isListening: boolean = false;

  constructor(private speechRecognitionService: SpeechRecognitionService) {}

  toggleListening() {
    if (this.isListening) {
      this.speechRecognitionService.stopListening();
      this.isListening = false;
    } else {
      this.isListening = true;
      this.speechRecognitionService.startListening().then(
        (result: string) => {
          this.note = result;
          this.isListening = false;
        },
        (error: any) => {
          console.error('Speech recognition error', error);
          this.isListening = false;
        }
      );
    }
  }
}

Étape 3 : mettre à jour le modèle

Dans le modèle, nous lierons l'événement click à notre méthode toggle et utiliserons la directive ngClass d'Angular pour ajouter un effet de lueur lorsque le microphone écoute.

Mettre à jour app.component.html :

<div class="textarea-container">
  <textarea
    maxlength="150"
    class="form-control"
    id="message-text"
    rows="3"
    [(ngModel)]="note"
  ></textarea>
  <i
    (click)="toggleListening()"
    class="mdi mdi-microphone mic-icon"
    [ngClass]="{ 'glow': isListening }"
  ></i>
</div>

Étape 4 : ajouter du style

Ajoutez quelques styles pour positionner l'icône du microphone et ajoutez un effet lumineux lorsqu'il écoute.

Mettre à jour app.component.css :

.textarea-container {
  position: relative;
  display: inline-block;
}

.textarea-container textarea {
  width: 100%;
  box-sizing: border-box;
}

.mic-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 24px;
  color: #333;
  transition: box-shadow 0.3s ease;
}

.mic-icon.glow {
  box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.8);
}

Étape 5 : Testez votre application

Exécutez votre application Angular en utilisant :
ng servir

Accédez à http://localhost:4200/ dans votre navigateur. Vous devriez voir la zone de texte avec une icône de microphone. Lorsque vous cliquez sur l'icône, l'écoute commence et l'icône brille. Prononcez une couleur de la liste de grammaire (rouge, vert, bleu, jaune) et la couleur reconnue sera ajoutée à la zone de texte.

Conclusion

Vous avez ajouté avec succès la reconnaissance vocale avec prise en charge de la grammaire à votre application Angular. Cette fonctionnalité peut être étendue pour reconnaître des commandes plus complexes et s'intégrer de manière transparente à diverses fonctionnalités de votre application. Expérimentez avec différentes grammaires et paramètres de reconnaissance vocale pour voir ce qui fonctionne le mieux pour votre cas d'utilisation.
Suivez-moi sur LinkedIn
Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!