ユーザ音声認識

概要

リアクトネイティブ(React Native)プロジェクトでユーザ音声を認識して文字に変換する機能(STT, Speech To Text)が必要な時react-native-voiceライブラリを使うことをお勧めします。このブログではreact-native-voiceを使ってユーザの音声を文字で変換する機能(STT, Speech To Text)を追加する方法について説明します。

react-native-voice公式サイト: https://github.com/wenkesj/react-native-voice

インストール

ユーザ音声を認識して文字に変換する機能であるSTT(Speech To Text)を使うため下のコマンドでreact-native-voiceライブラリをリアクトネイティブ(React Native)プロジェクトへインストールします。

npm install --save react-native-voice

インストールが終わったら下のコマンドでreact-native-voiceをリアクトネイティブ(React Native)プロジェクトと連結します。

npx pod-install

権限設定

ユーザ音声を認識して文字に変換する機能であるSTT(Speech To Text)を使うためそれそれのOSに合う権限設定が必要です。

iOS

iOSで権限を設定するため下記の内容をリアクトネイティブ(React Native)プロジェクトフォルダのios/app_name/Info.plistに追加します。

<dict>
    ...
    <key>NSMicrophoneUsageDescription</key>
    <string>Description of why you require the use of the microphone</string>
    <key>NSSpeechRecognitionUsageDescription</key>
    <string>Description of why you require the use of the speech recognition</string>
    ...
</dict>

アンドロイド(未確認)

アンドロイド(Android)で権限を設定するため下記の内容をリアクトネイティブ(React Native)プロジェクトのフォルダのandroid/app/src/AndroidManifest.xmlに追加します。(参考: アンドロイドで権限の問題があるかどうかはまだ確認してないです。)

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="package_name">
    ...
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    ...
</manifest>

使い方

ここで説明するリアクトネイティブ(React Native)のコードは基本的typescriptとstyled-componentsが適応されています。リアクトネイティブ(React Native)にtypescriptとstyled-componentsを適応する方法については以前のブログを参考してください。

下記の内容はユーザ音声を認識して文字で変換する機能であるSTT(Speech To Text)を使うためreact-native-voiceを使う方法です。

import React, {useState, useEffect} from 'react';
import Styled from 'styled-components/native';
import Voice from 'react-native-voice';

const Container = Styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #f5fcff;
`;
const ButtonRecord = Styled.Button``;
const VoiceText = Styled.Text`
  margin: 32px;
`;

const App = () => {
  const [isRecord, setIsRecord] = useState<boolean>(false);
  const [text, setText] = useState<string>('');
  const buttonLabel = isRecord ? 'Stop' : 'Start';
  const voiceLabel = text
    ? text
    : isRecord
    ? 'Say something...'
    : 'press Start button';

  const _onSpeechStart = () => {
    console.log('onSpeechStart');
    setText('');
  };
  const _onSpeechEnd = () => {
    console.log('onSpeechEnd');
  };
  const _onSpeechResults = (event) => {
    console.log('onSpeechResults');
    setText(event.value[0]);
  };
  const _onSpeechError = (event) => {
    console.log('_onSpeechError');
    console.log(event.error);
  };

  const _onRecordVoice = () => {
    if (isRecord) {
      Voice.stop();
    } else {
      Voice.start('en-US');
    }
    setIsRecord(!isRecord);
  };

  useEffect(() => {
    Voice.onSpeechStart = _onSpeechStart;
    Voice.onSpeechEnd = _onSpeechEnd;
    Voice.onSpeechResults = _onSpeechResults;
    Voice.onSpeechError = _onSpeechError;

    return () => {
      Voice.destroy().then(Voice.removeAllListeners);
    };
  }, []);
  return (
    <Container>
      <VoiceText>{voiceLabel}</VoiceText>
      <ButtonRecord onPress={_onRecordVoice} title={buttonLabel} />
    </Container>
  );
};

export default App;

上のソースを詳しく見てみます。

Voice.onSpeechStart = _onSpeechStart;
Voice.onSpeechEnd = _onSpeechEnd;
Voice.onSpeechResults = _onSpeechResults;
Voice.onSpeechError = _onSpeechError;

useEffectでreact-native-voiceに使うイベント関数を連結します。

// componentWillUnmount
useEffect(() => {
  ...
  return () => {
    Voice.destroy().then(Voice.removeAllListeners);
  };
}, []);

react-native-voiceを使ってるコンポーネント(Component)が除去(Unmount)される時react-native-voiceライブラリも除去します。

const _onRecordVoice = () => {
  if (isRecord) {
    Voice.stop();
  } else {
    Voice.start('en-US');
  }
  setIsRecord(!isRecord);
};

特定イベントでユーザ音声を認識したり、中止したりします。

const _onSpeechResults = (event) => {
  console.log('onSpeechResults');
  setText(event.value[0]);
};

react-native-voiceがVoice.start('en-US');で起動したら、マイクを通じて認識されたユーザの音声がVoice.onSpeechResults = _onSpeechResults;を通じで継続的に更新されます。

全てのソースコードは下記のレポジトリ(Repository)で確認できます。

react native voice exerciseレポジトリ(Repository): https://github.com/dev-yakuza/react_native_voice_exercise

提供言語選定

ユーザ音声を認識して文字に変換する機能であるSTT(Speech To Text)を使うためにはユーザの音声がどんな言語か設定する必要があります。

Voice.start('ja-JP');

下記のリストは言語を設定するための言語-国家コードです。

ar-SA
cs-CZ
da-DK
de-DE
el-GR
en-AU
en-GB
en-IE
en-US
en-ZA
es-ES
es-MX
fi-FI
fr-CA
fr-FR
he-IL
hi-IN
hu-HU
id-ID
it-IT
ja-JP
ko-KR
nl-BE
nl-NL
no-NO
pl-PL
pt-BR
pt-PT
ro-RO
ru-RU
sk-SK
sv-SE
th-TH
tr-TR
zh-CN
zh-HK
zh-TW