ไลบรารีคำพูดเป็นข้อความสำหรับ React Native
เส้นด้ายเพิ่ม @react-native-voice/voice# ornpm i @react-native-voice/voice --save
เชื่อมโยงแพ็คเกจ iOS
ติดตั้งพ็อด npx
การเชื่อมโยง
เชื่อมโยง Android ด้วยตนเอง
เชื่อมโยง iOS ด้วยตนเอง
สร้างปลั๊กอินล่วงหน้า
การใช้งาน
ตัวอย่าง
เอพีไอ
กิจกรรม
สิทธิ์
หุ่นยนต์
ไอโอเอส
ผู้ร่วมให้ข้อมูล
เชื่อมโยง NativeModule ด้วยตนเองหรือโดยอัตโนมัติ
ลิงก์ react-native @react-native-voice/voice
ใน android/setting.gradle
- รวม ':@react-native-voice_voice', ':app'project(':@react-native-voice_voice').projectDir = ไฟล์ใหม่ (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; // <------ เพิ่มสิ่งนี้!...คลาสสาธารณะ MainActivity ขยายกิจกรรมการใช้งาน ReactApplication { ...@Overrideprotected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList(new MainReactPackage(),new VoicePackage() // <------ เพิ่มสิ่งนี้!); - -
ลาก Voice.xcodeproj จากโฟลเดอร์ @react-native-voice/voice/ios ไปยังกลุ่ม Libraries บน Xcode ในโปรเจ็กต์ของคุณ การเชื่อมโยงด้วยตนเอง
คลิกที่ไฟล์โปรเจ็กต์หลักของคุณ (ไฟล์ที่แสดงถึง .xcodeproj) เลือก Build Phases แล้วลากไลบรารีแบบคงที่ lib.Voice.a จากโฟลเดอร์ Libraries/Voice.xcodeproj/Products ไปยัง Link Binary With Libraries
ไม่สามารถใช้แพ็คเกจนี้ในแอป "Expo Go" ได้เนื่องจากต้องใช้โค้ดเนทีฟที่กำหนดเอง
หลังจากติดตั้งแพ็คเกจ npm นี้ ให้เพิ่มปลั๊กอิน config ไปยังอาร์เรย์ plugins
ของ app.json
หรือ app.config.js
ของคุณ :
{ "งานแสดงสินค้า": {"ปลั๊กอิน": ["@react-native-voice/voice"] - -
จากนั้น ให้สร้างแอปของคุณใหม่ตามที่อธิบายไว้ในคำแนะนำ "การเพิ่มโค้ดเนทีฟที่กำหนดเอง"
ปลั๊กอินมีอุปกรณ์ประกอบฉากสำหรับการปรับแต่งเพิ่มเติม ทุกครั้งที่คุณเปลี่ยนอุปกรณ์ประกอบฉากหรือปลั๊กอิน คุณจะต้องสร้างแอปเนทีฟขึ้นมาใหม่ (และ prebuild
) หากไม่มีการเพิ่มคุณสมบัติพิเศษ ระบบจะใช้ค่าเริ่มต้น
speechRecognition
( string | false ): ตั้งค่าข้อความสำหรับคีย์ NSSpeechRecognitionUsageDescription
ในข้อความ Info.plist
เมื่อไม่ได้กำหนด ข้อความอนุญาตเริ่มต้นจะถูกนำมาใช้ เมื่อเป็น false
การอนุญาตจะถูกข้ามไป
microphone
( string | false ): ตั้งค่าข้อความสำหรับคีย์ NSMicrophoneUsageDescription
ใน Info.plist
เมื่อไม่ได้กำหนด ข้อความอนุญาตเริ่มต้นจะถูกนำมาใช้ เมื่อเป็น false
ระบบจะไม่เพิ่ม android.permission.RECORD_AUDIO
ลงใน AndroidManifest.xml
และการอนุญาต iOS จะถูกข้ามไป
{ "ปลั๊กอิน": [ [ "@react-native-voice/voice", {"microphonePermission": "กำหนดเอง: อนุญาตให้ $(PRODUCT_NAME) เข้าถึงไมโครโฟน",speechRecognitionPermission": "กำหนดเอง: อนุญาตให้ $(PRODUCT_NAME) จดจำคำพูดของผู้ใช้อย่างปลอดภัย" } - - -
ตัวอย่างแบบเต็มสำหรับ Android และ iOS
นำเข้าเสียงจาก '@react-native-voice/voice'; นำเข้า React, {Component} จาก 'react'; class VoiceTest ขยาย Component { ตัวสร้าง (อุปกรณ์ประกอบฉาก) {Voice.onSpeechStart = this.onSpeechStartHandler.bind (นี้); Voice.onSpeechEnd = this.onSpeechEndHandler.bind (นี้); Voice.onSpeechResults = this.onSpeechResultsHandler.bind (นี้); - onStartButtonPress(e){Voice.start('en-US'); - -
การเข้าถึง Voice API แบบคงที่
วิธีการทั้งหมด ส่ง คืน new Promise
สำหรับความเข้ากันได้ async/await
ชื่อวิธีการ | คำอธิบาย | แพลตฟอร์ม |
---|---|---|
เสียงที่มีอยู่() | ตรวจสอบว่ามีบริการรู้จำเสียงที่มีอยู่ในระบบหรือไม่ | แอนดรอยด์, ไอโอเอส |
Voice.start (สถานที่) | เริ่มฟังคำพูดสำหรับสถานที่เฉพาะ ส่งคืนค่าว่างหากไม่มีข้อผิดพลาดเกิดขึ้น | แอนดรอยด์, ไอโอเอส |
เสียงหยุด() | หยุดฟังคำพูด ส่งคืนค่าว่างหากไม่มีข้อผิดพลาดเกิดขึ้น | แอนดรอยด์, ไอโอเอส |
เสียง.ยกเลิก() | ยกเลิกการรู้จำเสียงพูด ส่งคืนค่าว่างหากไม่มีข้อผิดพลาดเกิดขึ้น | แอนดรอยด์, ไอโอเอส |
เสียงทำลาย() | ทำลายอินสแตนซ์ SpeechRecognizer ปัจจุบัน ส่งคืนค่าว่างหากไม่มีข้อผิดพลาดเกิดขึ้น | แอนดรอยด์, ไอโอเอส |
Voice.removeAllListeners() | ทำความสะอาด/ลบล้างเมธอด Voice static ที่ถูกแทนที่ | แอนดรอยด์, ไอโอเอส |
Voice.isRecognizing() | ส่งคืนหาก SpeechRecognizer รับรู้ | แอนดรอยด์, ไอโอเอส |
Voice.getSpeechRecognitionServices() | ส่งคืนรายการกลไกการรู้จำเสียงที่มีอยู่ในอุปกรณ์ (ตัวอย่าง: ['com.google.android.googlequicksearchbox'] หากมีเพียง Google เท่านั้นที่ใช้ได้) | หุ่นยนต์ |
โทรกลับที่ถูกเรียกใช้เมื่อมีการส่งเหตุการณ์ดั้งเดิม
ชื่อกิจกรรม | คำอธิบาย | เหตุการณ์ | แพลตฟอร์ม |
---|---|---|---|
Voice.onSpeechStart (กิจกรรม) | เรียกใช้เมื่อมีการเรียก .start() โดยไม่มีข้อผิดพลาด | { error: false } | แอนดรอยด์, ไอโอเอส |
Voice.onSpeechRecognized(เหตุการณ์) | เรียกใช้เมื่อมีการจดจำคำพูด | { error: false } | แอนดรอยด์, ไอโอเอส |
Voice.onSpeechEnd(กิจกรรม) | เรียกใช้เมื่อ SpeechRecognizer หยุดการจดจำ | { error: false } | แอนดรอยด์, ไอโอเอส |
Voice.onSpeechError (เหตุการณ์) | เรียกใช้เมื่อมีข้อผิดพลาดเกิดขึ้น | { error: Description of error as string } | แอนดรอยด์, ไอโอเอส |
Voice.onSpeechResults (เหตุการณ์) | เรียกใช้เมื่อ SpeechRecognizer เสร็จสิ้นการจดจำ | { value: [..., 'Speech recognized'] } | แอนดรอยด์, ไอโอเอส |
Voice.onSpeechPartialResults (เหตุการณ์) | เรียกใช้เมื่อมีการคำนวณผลลัพธ์ใดๆ | { value: [..., 'Partial speech recognized'] } | แอนดรอยด์, ไอโอเอส |
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, allowances } = await Permissions.askAsync(Permissions.AUDIO_RECORDING);if (status !== "granted") {//ไม่ได้รับอนุญาต อย่าแสดงปุ่มเริ่มการบันทึกเพราะจะทำให้เกิดปัญหาหากกด.this.setState({showRecordButton: false});} else {this.setState({showRecordButton: true});}}
หมายเหตุเกี่ยวกับ Android
แม้ว่าการอนุญาตทั้งหมดจะถูกต้องใน Android แต่ก็ยังมีสิ่งสุดท้ายที่ต้องแน่ใจว่าไลบรารีนี้ทำงานได้ดีบน Android โปรดตรวจสอบให้แน่ใจว่าอุปกรณ์นั้นมี Google Speech Recognizing Engine เช่น com.google.android.googlequicksearchbox
โดยเรียก Voice.getSpeechRecognitionServices()
เนื่องจากโทรศัพท์ Android สามารถกำหนดค่าได้ด้วยตัวเลือกมากมาย แม้ว่าอุปกรณ์จะมี googlequicksearchbox engine ก็สามารถกำหนดค่าให้ใช้บริการอื่นๆ ได้ คุณสามารถตรวจสอบว่าบริการใดที่ใช้กับแอป Voice Assistive ได้ในขั้นตอนต่อไปนี้สำหรับโทรศัพท์ Android ส่วนใหญ่:
Settings > App Management > Default App > Assistive App and Voice Input > Assistive App
ขั้นตอนข้างต้นอาจแตกต่างกันไปขึ้นอยู่กับรุ่นและผู้ผลิต Android สำหรับโทรศัพท์ Huawei อาจมีโอกาสที่อุปกรณ์ไม่สามารถติดตั้งบริการของ Google ได้
ฉันจะรับ com.google.android.googlequicksearchbox
ในอุปกรณ์ได้อย่างไร
โปรดขอให้ผู้ใช้ติดตั้ง Google Search App
จำเป็นต้องรวมสิทธิ์สำหรับ NSMicrophoneUsageDescription
และ NSSpeechRecognitionUsageDescription
ภายใน Info.plist สำหรับ iOS ดู VoiceTest
ที่รวมไว้สำหรับวิธีจัดการกับกรณีเหล่านี้
<คำบอกกล่าว> - <คีย์>คำอธิบาย NSMicrophoneUsage</key> <string>คำอธิบายว่าทำไมคุณจึงต้องใช้ไมโครโฟน</string> <คีย์>คำอธิบาย NSSpeechRecognitionUsageDescription</key> <string>คำอธิบายว่าทำไมคุณจึงต้องใช้การรู้จำคำพูด</string> - </ตามคำบอก>
โปรดดูเอกสารประกอบที่จัดทำโดย ReactNative สำหรับสิ่งนี้: PermissionsAndroid
@asafron
@BrendanFDMoore
@brudny
@chitezh
@อิฟสโนว์
@jamsch
@มิซิโน
@นอยธิดาต
@ohtangza & @hayanmind
@rudiedev6
@tdonia
@wenkesj