recognize user voice

Outline
Installation
Configure Permission
- iOS
- Android(Unidentified)
How to use
Configure Language
Reference

Outline

if you need to recognize the user voice and transform to text(STT, Speech To Text), you can use react-native-voice. in this blog, we will see how to add the feature to recognize the user voice and transform to text by using react-native-voice.

react-native-voice official site: https://github.com/wenkesj/react-native-voice

Installation

install react-native-voice library by executing below command for STT(Speech To Text) feature which recognize user voice and transform to text.

npm install --save react-native-voice

after installing, execute below command to link react-native-voice to RN(React Native) project.

npx pod-install

Configure Permission

we need to configure the permission to use STT(Speech To Text) feature which recognize user voice and transform to text.

iOS

add below code to ios/app_name/Info.plist file in RN(React Native) project folder to set the permission on iOS.

<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(Unidentified)

add contents below to android/app/src/AndroidManifest.xml file in RN(React Native) project folder to set the permission on Android. (Warning: I didn’t check this is OK on Android for the permission yet.)

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

How to use

in here, I will use RN(React Native) code basically applied typescript and styled-components. if you want to know how to apply typescript and styled-components to RN(React Native), see my previous blogs.

below is how to use react-native-voice about STT(Speech To Text) feature which recognize user voice and transform to text.

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;

let’s see the source above deeply.

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

connect react-native-voice event functions in the useEffect.

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

when the component which use react-native-voice is unmounted, make react-native-voice also removed.

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

you should bind a specific event to recognize or stop the user voice.

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

if react-native-voice is executed by Voice.start('en-US');, user voice which is recognized by the mic is continuously changed through Voice.onSpeechResults = _onSpeechResults;.

you can see full source code via the link below.

react native voice exercise reepository: https://github.com/dev-yakuza/react_native_voice_exercise

Configure Language

if you want to use STT(Speech To Text) feature which recognize the user voice and transform text, you should set what user use language.

Voice.start('ja-JP');

The list blow is the language-country code to configure the language.

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

Reference

react-native-voice official site: https://github.com/wenkesj/react-native-voice

Github Sponsor

Buy me a coffee

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.