Ionic Speech Recognition

🚶‍♂️Speech Recognition

Speech Recognition이란 사람이 말하는 음성언어를 컴퓨터가 해석해 내용을 문자 데이터로 전환하는 처리를 말한다고

위키백과에 적혀있다.

 

아래 사진처럼 내가 말한 음성을 데이터로 내 보내주는 것이라고 생각하면 될것 같다.

speech recognition

 

😛Ionic Speech Recognition Plugin 설치

기본적으로 구글 Speech Recognition를 사용한다. 그러기 위해서는 Plugin 설치를 필요로 한다. 나는 현재 Ionic + Cordova로 사용하였다.

 

$ ionic cordova plugin add cordova-plugin-speechrecognition 
$ npm install @awesome-cordova-plugins/speech-recognition

위 설치를 하고 나서 현재 기준으로 config.xml에 아래 문구를 추가해줘야 한다.

<config-file parent="/manifest" target="AndroidManifest.xml" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
  <queries>
    <intent>
    	<action android:name="android.speech.RecognitionService" />
    </intent>
  </queries>
</config-file>

Speech Recognition

 

🥍Ionic 적용하기

사용한 변수

• isRecording : 녹음상태 표시
• options : speech Recognition 옵션

현재 내가 사용하고 있는 옵션은 3가지를 사용하였다.

• language : 음성인식을 알아들을 언어
• showPopup : 팝업설정여부 true를 하면 구글 speech recongnition이 뜬다
• showPartial : 실시간으로 음성을 받아들일지 선택하는 것으로 보인다. false로 하면 한 문장을 말하고 나서, 결과를 준다.

사용한 함수 기능

• recording : 녹음을 하는 기능이며, subscribe에서 성공하면 matches를 받고, 실패하면 error를 받는다.
• stopRecording : 녹음을 중지하는 기능이다.

import { Component, ChangeDetectorRef } from '@angular/core';
import { SpeechRecognition } from '@awesome-cordova-plugins/speech-recognition/ngx';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  isRecording: boolean = false;
  options = {
    language: 'en-US',
    showPopup: false,
    showPartial: true
  }
  constructor(private speechRecognition: SpeechRecognition, private cd: ChangeDetectorRef) {}

  recording() {
    this.isRecording = true;

    this.speechRecognition.startListening(this.options)
      .subscribe(
        (matches) => {
          console.log(`success : `, matches);
          this.isRecording = false;
          this.cd.detectChanges();
        },
        (error) => {
          console.error(`recording : `, error);
          this.isRecording = false;
          this.cd.detectChanges();
        })
  }

  stopRecording() {
    this.isRecording = false;
    this.speechRecognition.stopListening().then((value) => {
      console.log('value : ' , value);
    })
  }
}

아래는 HTML 이다

isRecording이 true이면 붉은색으로, isRecording이 false이면 푸른색으로 보여주기로 하였다.

<ion-header [translucent]="true">
  <ion-toolbar [color]="isRecording ? 'danger' : 'primary'">
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button expand="block" (click)="recording()">녹음</ion-button>
  <ion-button expand="block" (click)="stopRecording()">녹음중지</ion-button>
</ion-content>

 

🤔 적용 결과

 

아래는 녹음을 하기전 사진이다.

녹음전

녹음중일때는 붉은색 표시를 하였다.

녹음중

 

그리고 녹음결과를 아래 사진처럼 받을 수 있다.

녹음결과

위 사진 처럼 success에 나온 것이 내가 말한 결과물이다.

 

🛺 후기

회사에서 적용한 것은 이것보다는 복잡하다. 실제 서비스에서는 얼마동안 말하는지를 해야 하기때문에 timer기능도 필요하며 , 하고나서 나의 발음 유사도의 대한 결과도 필요하다.

다음으로는 timer를 적용해볼 예정이다.