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
内
android.app.Application をインポート; com.facebook.react.ReactApplication をインポート; com.facebook.react.ReactPackage をインポート; ...com.wenkesj.voice.VoicePackage をインポートします。 // <------ これを追加してください!...public class MainActivity extends Activityimplements ReactApplication { ...@Overrideprotected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList(new MainReactPackage(),new VoicePackage() // <------ これを追加してください!); } }
Voice.xcodeproj を @react-native-voice/voice/ios フォルダーからプロジェクト内の Xcode の Libraries グループにドラッグします。手動リンク
メイン プロジェクト ファイル (.xcodeproj を表すファイル) をクリックして、[ビルド フェーズ] を選択し、静的ライブラリ lib.Voice.a を Libraries/Voice.xcodeproj/Products フォルダーからドラッグして、バイナリをライブラリにリンクします。
このパッケージはカスタム ネイティブ コードが必要なため、「Expo Go」アプリでは使用できません。
この npm パッケージをインストールした後、 app.json
またはapp.config.js
のplugins
配列に構成プラグインを追加します。
{ "expo": {"プラグイン": ["@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": "カスタム: $(PRODUCT_NAME) にマイクへのアクセスを許可する","speechRecognitionPermission": "カスタム: $(PRODUCT_NAME) にユーザーの音声を安全に認識させる" } 】 】 }
Android と iOS の完全な例。
import Voice from '@react-native-voice/voice';import React, {Component} from 'react';class VoiceTest extends Component { constructor(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 |
Voice.stop() | 会話を聞くのをやめます。エラーが発生しない場合は 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";asyncComponentDidMount() {const { status, Expires, Permissions } = await Permissions.askAsync(Permissions.AUDIO_RECORDING);if (status !== "granted") {//権限が付与されていません。録画開始ボタンを押すと問題が発生するため、録画開始ボタンを表示しないでください。this.setState({showRecordButton: false});} else {this.setState({showRecordButton: true});}}
Androidの注意点
Android ですべての権限が正しく設定された後でも、このライブラリが Android で正常に動作することを確認するための最後の手順が 1 つあります。 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>NSMicrophoneUsageDescription</key> <string>マイクの使用が必要な理由の説明</string> <key>NSSpeechRecognitionUsageDescription</key> <string>音声認識の使用が必要な理由の説明</string> ... </dict>
これについては、ReactNative が提供するドキュメントを参照してください: PermissionsAndroid
@asafron
@BrendanFDMoore
@brudny
@chitezh
@ifsnow
@jamsch
@みしの
@noitidart
@ohtangza と @hayanmind
@rudiedev6
@tdonia
@wenkesj