Ionic App 수정 ( 음성인식 기능 추가 )

2023.03.20 - [기록/개발 노트] - Ionic App 수정 ( 뒤로가기 시 앱 종료 기능 추가 )

Ionic App 수정 ( 뒤로가기 시 앱 종료 기능 추가 )

다양한 기능을 추가중인데

원래는 궁극적으로 Google Home과 

어플/장치를 연결하는게 목표인데

 

그 이외에도 따로

음성으로 제어하도록 하는 기능을

추가하면 유용할 것 같아서

몇일 고생하면서 

결국 완성했다

아름답구나 아름다워

음성인식으로 들어온 값을

화면상에 표시하고 있다.

---

1. ionic 소스 코드

<!-- tab3.page.html -->

<ion-header>
  <ion-toolbar>
    <ion-title>
      도움말
    </ion-title>
    <ion-button (click)="startListening()" slot="end"><p>음성인식</p></ion-button>
    <!-- <ion-button (click)="stopRecognition()" slot="end"><p>Stop Listening</p></ion-button> -->
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-label position="stacked">입력된 음성</ion-label>
    <div #inputVoice>{{inputVoice}}</div>
  </ion-item>

  <a><br>라이트토크(주)에서 제작한 기기들을 앱을 통해 쉽게 제어합니다.</a>

<br><br><br>
<a class="connectGuide"> 기기 등록 방법</a>

<a><br><br><br>1. <strong>'블루투스'</strong>탭에서 Wifi 버튼을 눌러 사용할 Wifi 정보를 입력해주세요.</a>
<a><br><br>2. <strong>'확인'</strong> 버튼을 통해 입력된 값을 확인할 수 있습니다.</a>
<a><br><br>3. <strong>'Scan'</strong> 버튼을 누르면 주변 BLE 장치들을 검색합니다.</a>
<a><br><br>4. LightTalk 이름을 가진 장치가 식별되면 <strong>'Connect'</strong> 버튼을 눌러주세요.</a>
<a><br><br>5. 잠시 후 장치가 자동으로 연결됩니다.</a>
</ion-content>

 

 

 

//tab3.page.ts 파일

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
  @ViewChild('inputVoice', { static: true }) inputVoiceElement: ElementRef;

  inputVoice = '';

  constructor(
    private speechRecognition: SpeechRecognition,
    private androidPermissions: AndroidPermissions,
    private renderer: Renderer2
  ) {}

  startRecognition() {
    this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.RECORD_AUDIO).then(
      result => {
        if (result.hasPermission) {
          this.startListening();
        } else {
          this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.RECORD_AUDIO).then(
            () => {
              this.startListening();
            },
            err => console.log(err)
          );
        }
      },
      err => console.log(err)
    );
  }
  
  startListening() {
    this.speechRecognition.startListening()
      .subscribe(
        (matches: string[]) => {
          console.log(matches);
          this.inputVoice = matches[0];
          this.renderer.setProperty(this.inputVoiceElement.nativeElement, 'textContent', matches[0]);
        },
        (error) => {
          console.log(error);
        }
      );
  }

  // stopRecognition() {
  //   this.speechRecognition.stopListening();
  //   console.log('Recognition stopped');
  // }
}

 

 

//tab3.module.ts 파일

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab3Page } from './tab3.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';

import { Tab3PageRoutingModule } from './tab3-routing.module';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@NgModule({
  providers: [AndroidPermissions],
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    RouterModule.forChild([{ path: '', component: Tab3Page }]),
    Tab3PageRoutingModule,
  ],
  declarations: [Tab3Page]
})
export class Tab3PageModule {}

라이브러리를 추가하기 위해 Ionic project 디렉토리에

아래 명령어를 순차적으로 실행한다.

npm i cordova-plugin-speechrecognition
npm i cordova-plugin-android-permissions

여러가지 라이브러리 시도하다가

결국 찾아낸 라이브러리다.

---

2. Android Studio

위와 같이 AndroidManifest.xml 파일에서

<uses-permission android:name="android.permission.RECORD_AUDIO" />

다음을 추가해준다.

음성 권한을 부여하는 과정이다.

위와 같이 스마트폰 자체에서 

권한 설정하는 부분과 일치하다.

---

음성을 인식해서

변수 값을 변화시키는데 성공했다.

 

다양하게 활용할 수 있어 보인다.

 

참고로 tab3 페이지 이외에

app.module.ts 에도

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BLE } from '@awesome-cordova-plugins/ble/ngx';
import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [AndroidPermissions,SpeechRecognition,BLE,{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

위와 같이 AndroidPermission 및

SpeechRecognition을 추가해줬다.

 

tab3 페이지에서 음성인식 동작이

발생되긴 하지만

혹시 몰라서 앱 전체에도

권한을 부여했다.

.

.

.

.

.

 

작년 1~2월 처음 개발일을 시작했을 때

아무것도 모르는 상태에서

Bluetooth 업무를 맡고

혼자 몇달에 걸쳐 머리박고 해결했었는데

 

그 때 이후로 역대급 힘든 순간이었다...

뿌듯해서 좋다

---

https://github.com/choiprin/Ionic-app/tree/main/voiceRecognition

GitHub - choiprin/Ionic-app