Angular 애플리케이션에 문법 지원이 포함된 음성 인식 추가

음성 인식은 사용자가 음성으로 텍스트나 명령을 입력할 수 있도록 하여 웹 애플리케이션에서 사용자 상호 작용을 크게 향상시킬 수 있습니다. 이 튜토리얼에서는 음성 인식을 Angular 애플리케이션에 통합하고 문법 지원을 통해 이를 향상시키는 방법을 보여 드리겠습니다.

전제조건

• Angular에 대한 기본 지식
• Angular CLI가 설치되었습니다.
• 기존 Angular 프로젝트를 사용하거나 새로운 음성 인식 앱을 사용하여 새 프로젝트를 만듭니다.

1단계: 음성 인식 서비스 설정

먼저 음성 인식을 처리하는 서비스를 만들어야 합니다. 이 서비스는 Web Speech API의 webkitSpeechRecognition 및 SpeechGrammarList를 사용합니다.

새 서비스 만들기:
ng 서비스 음성 인식 생성
이제 생성된 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;
}

2단계: 구성요소 생성

다음으로 음성 인식 서비스를 활용하기 위한 구성 요소를 만들어 보겠습니다. 이 구성 요소에는 텍스트 영역과 마이크 아이콘이 있습니다. 사용자가 아이콘을 클릭하면 음성 인식이 시작되고, 인식된 텍스트가 텍스트 영역에 추가됩니다.
app.comComponent.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;
        }
      );
    }
  }
}

3단계: 템플릿 업데이트

템플릿에서 클릭 이벤트를 토글 메소드에 바인딩하고 Angular의 ngClass 지시문을 사용하여 마이크가 듣고 있을 때 글로우 효과를 추가합니다.

app.comComponent.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>

4단계: 스타일 추가

몇 가지 스타일을 추가하여 마이크 아이콘의 위치를 ​​지정하고 들을 때 빛나는 효과를 추가하세요.

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

5단계: 애플리케이션 테스트

다음을 사용하여 Angular 애플리케이션을 실행하세요.
서브하세요

브라우저에서 http://localhost:4200/으로 이동하세요. 마이크 아이콘이 있는 텍스트 영역이 표시됩니다. 아이콘을 클릭하면 듣기가 시작되고 아이콘이 빛납니다. 문법 목록에서 색상(빨간색, 녹색, 파란색, 노란색)을 말하면 인식된 색상이 텍스트 영역에 추가됩니다.

결론

Angular 애플리케이션에 문법 지원이 포함된 음성 인식을 성공적으로 추가했습니다. 이 기능을 확장하여 더 복잡한 명령을 인식하고 애플리케이션의 다양한 기능과 원활하게 통합할 수 있습니다. 다양한 문법과 음성 인식 설정을 실험하여 귀하의 사용 사례에 가장 적합한 것이 무엇인지 알아보세요.
링크드인에서 나를 팔로우하세요
즐거운 코딩하세요!

위 내용은 Angular 애플리케이션에 문법 지원이 포함된 음성 인식 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!