React Native용 음성-텍스트 라이브러리입니다.
원사 추가 @react-native-voice/voice# ornpm i @react-native-voice/voice --save
iOS 패키지 연결
npx 포드 설치
연결
수동으로 Android 연결
수동으로 iOS 연결
사전 빌드 플러그인
용법
예
API
이벤트
권한
기계적 인조 인간
iOS
기여자
NativeModule을 수동 또는 자동으로 연결
반응 네이티브 링크 @react-native-voice/voice
android/setting.gradle
에서
... include ':@react-native-voice_voice', ':app'project(':@react-native-voice_voice').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-voice/ 음성/안드로이드')
android/app/build.gradle
에서
...종속성 {... 프로젝트 컴파일(':@react-native-voice_voice') }
MainApplication.java
에서
import android.app.Application;import com.facebook.react.ReactApplication;import com.facebook.react.ReactPackage; ...com.wenkesj.voice.VoicePackage 가져오기; // <------ 이것을 추가하세요!...public class MainActivity extends Activity Implements ReactApplication { ...@Overrideprotected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList(new MainReactPackage(),new VoicePackage() // <------ 이것을 추가하세요!); } }
@react-native-voice/voice/ios 폴더에 있는 Voice.xcodeproj를 프로젝트의 Xcode에 있는 라이브러리 그룹으로 드래그하세요. 수동 연결
기본 프로젝트 파일(.xcodeproj를 나타내는 파일)을 클릭하고 Build Phases를 선택하고 Libraries/Voice.xcodeproj/Products 폴더에서 정적 라이브러리인 lib.Voice.a를 Link Binary With Libraries로 드래그합니다.
이 패키지는 사용자 정의 네이티브 코드가 필요하기 때문에 "Expo Go" 앱에서 사용할 수 없습니다.
이 npm 패키지를 설치한 후 app.json
또는 app.config.js
의 plugins
배열에 구성 플러그인을 추가하세요.
{ "엑스포": {"플러그인": ["@react-native-voice/voice"] } }
그런 다음 "사용자 정의 네이티브 코드 추가" 가이드에 설명된 대로 앱을 다시 빌드하세요.
플러그인은 추가 사용자 정의를 위한 소품을 제공합니다. 소품이나 플러그인을 변경할 때마다 기본 앱을 다시 빌드(및 prebuild
)해야 합니다. 추가 속성이 추가되지 않으면 기본값이 사용됩니다.
speechRecognition
( string | false ): Info.plist
메시지에서 NSSpeechRecognitionUsageDescription
키에 대한 메시지를 설정합니다. 정의되지 않은 경우 기본 권한 메시지가 사용됩니다. false
인 경우 권한을 건너뜁니다.
microphone
( string | false ): Info.plist
에 NSMicrophoneUsageDescription
키에 대한 메시지를 설정합니다. 정의되지 않은 경우 기본 권한 메시지가 사용됩니다. false
인 경우 android.permission.RECORD_AUDIO
AndroidManifest.xml
에 추가되지 않고 iOS 권한을 건너뜁니다.
{ "플러그인": [ [ "@react-native-voice/voice", {"microphonePermission": "CUSTOM: $(PRODUCT_NAME)이 마이크에 액세스하도록 허용","speechRecognitionPermission": "CUSTOM: $(PRODUCT_NAME)이 사용자 음성을 안전하게 인식하도록 허용" } ] ] }
Android 및 iOS의 전체 예입니다.
'@react-native-voice/voice'에서 음성 가져오기;'react'에서 React, {Component} 가져오기;class VoiceTest는 구성 요소 {를 확장합니다. 생성자(props) {Voice.onSpeechStart = this.onSpeechStartHandler.bind(this);Voice.onSpeechEnd = this.onSpeechEndHandler.bind(this);Voice.onSpeechResults = this.onSpeechResultsHandler.bind(this); } onStartButtonPress(e){Voice.start('en-US'); } ...}
Voice API에 대한 정적 액세스입니다.
이제 모든 메소드는 async/await
호환성을 위해 new Promise
반환합니다.
메소드 이름 | 설명 | 플랫폼 |
---|---|---|
Voice.isAvailable() | 시스템에서 음성 인식 서비스를 사용할 수 있는지 확인합니다. | 안드로이드, iOS |
Voice.start(로케일) | 특정 로캘에 대한 음성 듣기를 시작합니다. 오류가 발생하지 않으면 null을 반환합니다. | 안드로이드, iOS |
음성.정지() | 음성 듣기를 중지합니다. 오류가 발생하지 않으면 null을 반환합니다. | 안드로이드, iOS |
음성.취소() | 음성 인식을 취소합니다. 오류가 발생하지 않으면 null을 반환합니다. | 안드로이드, iOS |
Voice.destroy() | 현재 SpeechRecognizer 인스턴스를 삭제합니다. 오류가 발생하지 않으면 null을 반환합니다. | 안드로이드, iOS |
Voice.removeAllListeners() | 재정의된 Voice 정적 메서드를 정리/무효화합니다. | 안드로이드, iOS |
Voice.isRecognizing() | SpeechRecognizer가 인식하는 경우 반환합니다. | 안드로이드, iOS |
Voice.getSpeechRecognitionServices() | 기기에서 사용할 수 있는 음성 인식 엔진 목록을 반환합니다. (예: Google만 사용할 수 있는 경우 ['com.google.android.googlequicksearchbox'] ) | 기계적 인조 인간 |
네이티브 이벤트가 발생할 때 호출되는 콜백입니다.
이벤트 이름 | 설명 | 이벤트 | 플랫폼 |
---|---|---|---|
Voice.onSpeechStart(이벤트) | .start() 오류 없이 호출될 때 호출됩니다. | { error: false } | 안드로이드, iOS |
Voice.onSpeechRecognized(이벤트) | 음성이 인식되면 호출됩니다. | { error: false } | 안드로이드, iOS |
Voice.onSpeechEnd(이벤트) | SpeechRecognizer가 인식을 중지할 때 호출됩니다. | { error: false } | 안드로이드, iOS |
Voice.onSpeechError(이벤트) | 오류가 발생할 때 호출됩니다. | { error: Description of error as string } | 안드로이드, iOS |
Voice.onSpeechResults(이벤트) | SpeechRecognizer가 인식을 마치면 호출됩니다. | { value: [..., 'Speech recognized'] } | 안드로이드, iOS |
Voice.onSpeechPartialResults(이벤트) | 결과가 계산될 때 호출됩니다. | { value: [..., 'Partial speech recognized'] } | 안드로이드, iOS |
Voice.onSpeechVolumeChanged(이벤트) | 인식된 음조가 변경되면 호출됩니다. | { value: pitch in dB } | 기계적 인조 인간 |
가장 중요한 부분이라 할 수 있습니다.
포함된 VoiceTest
앱은 명시적인 권한 확인 및 요청 없이 작동하지만 일부 구성의 경우 RECORD_AUDIO
에 대한 권한 요청을 추가해야 할 수도 있습니다. Android M(6.0)부터 사용자는 런타임 시(앱 설치 중에는 권한을 부여해야 함) 권한을 부여해야 합니다. 기본적으로 startSpeech
메소드를 호출하면 사용자에게 RECORD AUDIO
권한 팝업이 호출됩니다. 이는 옵션 인수에 REQUEST_PERMISSIONS_AUTO: true
전달하여 비활성화할 수 있습니다.
추출된 expo/expokit 앱을 실행하는 경우 Android에서 권한 문제가 발생할 수 있으며 다음 오류가 host.exp.exponent.MainActivity cannot be cast to com.facebook.react.ReactActivity startSpeech
수 있습니다. 이 문제는 인식을 시작하기 전에 expo-permission
패키지를 사용하여 권한을 묻는 메시지를 표시하여 해결할 수 있습니다.
import { Permissions } from "expo";async componentDidMount() {const { status,expires,Permissions } = wait Permissions.askAsync(Permissions.AUDIO_RECORDING);if (status !== "granted") {//권한이 부여되지 않았습니다. 녹화 시작 버튼을 누르면 문제가 발생하므로 표시하지 마세요.this.setState({showRecordButton: false});} else {this.setState({showRecordButton: true});}}
Android에 대한 참고 사항
Android에서 모든 권한이 올바른 후에도 이 라이브러리가 Android에서 제대로 작동하는지 확인하기 위한 마지막 작업이 하나 있습니다. Voice.getSpeechRecognitionServices()
호출하여 기기에 com.google.android.googlequicksearchbox
와 같은 Google 음성 인식 엔진이 있는지 확인하세요. Android 휴대폰은 매우 다양한 옵션으로 구성할 수 있으므로 기기에 googlequicksearchbox 엔진이 있더라도 다른 서비스를 사용하도록 구성할 수 있습니다. 대부분의 Android 휴대폰에서 다음 단계에 따라 음성 보조 앱에 사용되는 서비스를 확인할 수 있습니다.
Settings > App Management > Default App > Assistive App and Voice Input > Assistive App
위의 흐름은 Android 모델 및 제조업체에 따라 다를 수 있습니다. Huawei 휴대폰의 경우 기기에 Google 서비스를 설치하지 못할 수도 있습니다.
기기에서 com.google.android.googlequicksearchbox
어떻게 얻을 수 있나요?
사용자에게 Google 검색 앱을 설치하도록 요청하세요.
iOS용 Info.plist 내에 NSMicrophoneUsageDescription
및 NSSpeechRecognitionUsageDescription
에 대한 권한을 포함해야 합니다. 이러한 경우를 처리하는 방법은 포함된 VoiceTest
참조하세요.
<딕셔너리> ... <key>NSMicrophoneUsage설명</key> <string>마이크 사용이 필요한 이유 설명</string> <key>NSSpeechRecognitionUsageDescription</key> <string>음성인식 사용이 필요한 이유 설명</string> ... </dict>
이에 대해서는 ReactNative에서 제공하는 문서를 참조하세요: PermissionsAndroid
@asafron
@BrendanFDMoore
@brudny
@치테즈
@ifsnow
@jamsch
@misino
@Noitidart
@ohtangza & @hayanmind
@rudiedev6
@tdonia
@wenkesj