Hinzufügen von Spracherkennung mit Grammatikunterstützung zu Ihrer Angular-Anwendung

Spracherkennung kann Benutzerinteraktionen in Webanwendungen erheblich verbessern, indem sie es Benutzern ermöglicht, Text oder Befehle mit ihrer Stimme einzugeben. In diesem Tutorial zeige ich Ihnen, wie Sie die Spracherkennung in eine Angular-Anwendung integrieren und diese mit Grammatikunterstützung erweitern.

Voraussetzungen

• Grundkenntnisse in Angular.
• Angular CLI installiert.
• Ein vorhandenes Angular-Projekt oder erstellen Sie ein neues mit der neuen Spracherkennungs-App.

Schritt 1: Richten Sie den Spracherkennungsdienst ein

Zuerst müssen wir einen Dienst für die Spracherkennung erstellen. Dieser Dienst verwendet das Webkit SpeechRecognition und SpeechGrammarList der Web Speech API.

Neuen Dienst erstellen:
ng generiert einen Spracherkennungsdienst
Aktualisieren Sie nun die generierte Speech-Recognition.service.ts:

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;
}

Schritt 2: Erstellen Sie die Komponente

Als nächstes erstellen wir eine Komponente zur Nutzung unseres Spracherkennungsdienstes. Diese Komponente verfügt über einen Textbereich und ein Mikrofonsymbol. Wenn der Benutzer auf das Symbol klickt, startet die Spracherkennung und der erkannte Text wird dem Textbereich hinzugefügt.
Aktualisieren Sie 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;
        }
      );
    }
  }
}

Schritt 3: Aktualisieren Sie die Vorlage

In der Vorlage binden wir das Klickereignis an unsere Umschaltmethode und verwenden die ngClass-Direktive von Angular, um einen Leuchteffekt hinzuzufügen, wenn das Mikrofon zuhört.

app.component.html aktualisieren:

<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>

Schritt 4: Styling hinzufügen

Fügen Sie einige Stile hinzu, um das Mikrofonsymbol zu positionieren und beim Zuhören einen Leuchteffekt hinzuzufügen.

app.component.css aktualisieren:

.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);
}

Schritt 5: Testen Sie Ihre Anwendung

Führen Sie Ihre Angular-Anwendung aus mit:
ng servieren

Navigieren Sie in Ihrem Browser zu http://localhost:4200/. Sie sollten den Textbereich mit einem Mikrofonsymbol sehen. Wenn Sie auf das Symbol klicken, beginnt es zuzuhören und das Symbol leuchtet. Sprechen Sie eine Farbe aus der Grammatikliste (Rot, Grün, Blau, Gelb), und die erkannte Farbe wird dem Textbereich hinzugefügt.

Abschluss

Sie haben Ihrer Angular-Anwendung erfolgreich Spracherkennung mit Grammatikunterstützung hinzugefügt. Diese Funktion kann erweitert werden, um komplexere Befehle zu erkennen und nahtlos in verschiedene Funktionalitäten Ihrer Anwendung zu integrieren. Experimentieren Sie mit verschiedenen Grammatiken und Spracherkennungseinstellungen, um herauszufinden, was für Ihren Anwendungsfall am besten funktioniert.
Folgen Sie mir auf LinkedIn
Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonHinzufügen von Spracherkennung mit Grammatikunterstützung zu Ihrer Angular-Anwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!