Hướng Dẫn Chi Tiết Tích Hợp Chức Năng Nhận Dạng Giọng Nói Vào Ứng Dụng React Native
Bài viết này sẽ hướng dẫn bạn từng bước để tích hợp thư viện @react-native-voice/voice vào dự án React Native, giúp kích hoạt chức năng chuyển đổi giọng nói thành văn bản. Tính năng này rất hữu ích cho nhiều ứng dụng, ví dụ như ứng dụng hỗ trợ đọc chính tả, nhận lệnh thoại, hoặc tính năng tìm kiếm bằng giọng nói.
Bạn có thể tìm hiểu thêm về React Native qua các bài viết khác để có cái nhìn tổng quan về công nghệ này.
1. Cài Đặt Thư Viện
Để bắt đầu, trước tiên bạn cần cài đặt gói @react-native-voice/voice. Chạy lệnh sau trong terminal:
bash
npm install @react-native-voice/voice2. Cấu Hình Cho Android
Đối với hệ điều hành Android, bạn cần yêu cầu các quyền truy cập microphone trong tệp AndroidManifest.xml. Thêm đoạn mã sau vào tệp:
xml
<uses-permission android:name="android.permission.RECORD_AUDIO" />3. Cấu Hình Cho iOS
Đối với hệ điều hành iOS, bạn cần thêm quyền nhận dạng giọng nói và quyền sử dụng microphone vào tệp Info.plist của ứng dụng:
xml
<key>NSMicrophoneUsageDescription</key>
<string>Mô tả lý do bạn cần sử dụng microphone</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>Mô tả lý do bạn cần chức năng nhận dạng giọng nói</string>Hãy chắc chắn rằng phần mô tả thể hiện rõ ràng lý do tại sao ứng dụng của bạn cần những quyền này.
4. Thiết Lập Nhận Dạng Giọng Nói
Dưới đây là cách bạn có thể thiết lập thư viện trong thành phần React Native của mình:
a. Nhập Thư Viện Giọng Nói
javascript
import Voice, {
SpeechRecognizedEvent,
SpeechResultsEvent,
SpeechErrorEvent,
} from "@react-native-voice/voice";b. Định Nghĩa State
javascript
const [recognized, setRecognized] = useState("");
const [pitch, setPitch] = useState("");
const [error, setError] = useState("");
const [end, setEnd] = useState("");
const [started, setStarted] = useState("");
const [results, setResults] = useState([]);
const [partialResults, setPartialResults] = useState([]);c. Khởi Tạo Sự Kiện Nhận Dạng Giọng Nói
Trong hook useEffect, bạn hãy khởi tạo các trình xử lý sự kiện như sau:
javascript
useEffect(() => {
Voice.onSpeechStart = (e) => {
console.log("onSpeechStart: ", e);
setStarted("√");
};
Voice.onSpeechRecognized = (e) => {
console.log("onSpeechRecognized: ", e);
setRecognized("√");
};
Voice.onSpeechEnd = (e) => {
console.log("onSpeechEnd: ", e);
setEnd("√");
};
Voice.onSpeechError = (e) => {
console.log("onSpeechError: ", e);
setError(JSON.stringify(e.error));
};
Voice.onSpeechResults = (e) => {
console.log("onSpeechResults: ", e);
setResults(e.value);
};
Voice.onSpeechPartialResults = (e) => {
console.log("onSpeechPartialResults: ", e);
setPartialResults(e.value);
};
Voice.onSpeechVolumeChanged = (e) => {
console.log("onSpeechVolumeChanged: ", e);
setPitch(e.value);
};
return () => {
Voice.destroy().then(Voice.removeAllListeners);
};
}, []);d. Bắt Đầu và Dừng Nhận Dạng
Để bắt đầu, dừng, hủy, hoặc kết thúc nhận dạng giọng nói, hãy định nghĩa các hàm:
javascript
const startRecognizing = async () => {
try {
await Voice.start("en-US");
} catch (e) {
console.error(e);
}
};
const stopRecognizing = async () => {
try {
await Voice.stop();
} catch (e) {
console.error(e);
}
};
const cancelRecognizing = async () => {
try {
await Voice.cancel();
} catch (e) {
console.error(e);
}
};
const destroyRecognizer = async () => {
try {
await Voice.destroy();
} catch (e) {
console.error(e);
}
resetStates();
};
const resetStates = () => {
setRecognized("");
setPitch("");
setError("");
setStarted("");
setResults([]);
setPartialResults([]);
setEnd("");
};5. Triển Khai Giao Diện Người Dùng
Hãy tạo một giao diện người dùng đơn giản để tương tác với hệ thống nhận dạng giọng nói:
javascript
<View style={styles.container}>
<Text style={styles.welcome}>Chào mừng đến với React Native Voice!</Text>
<Text style={styles.instructions}>Nhấn nút và bắt đầu nói.</Text>
<Text style={styles.stat}>{`Bắt đầu: ${started}`}</Text>
<Text style={styles.stat}>{`Nhận dạng: ${recognized}`}</Text>
<Text style={styles.stat}>{`Pitch: ${pitch}`}</Text>
<Text style={styles.stat}>{`Lỗi: ${error}`}</Text>
<Text style={styles.stat}>Kết quả</Text>
{results.map((result, index) => (
<Text key={`result-${index}`} style={styles.stat}>{result}</Text>
))}
<Text style={styles.stat}>Kết quả tạm thời</Text>
{partialResults.map((result, index) => (
<Text key={`partial-result-${index}`} style={styles.stat}>{result}</Text>
))}
<Text style={styles.stat}>{`Kết thúc: ${end}`}</Text>
<TouchableHighlight onPress={startRecognizing}>
<Text style={styles.action}>Bắt đầu</Text>
</TouchableHighlight>
<TouchableHighlight onPress={stopRecognizing}>
<Text style={styles.action}>Dừng Nhận Dạng</Text>
</TouchableHighlight>
<TouchableHighlight onPress={cancelRecognizing}>
<Text style={styles.action}>Hủy</Text>
</TouchableHighlight>
<TouchableHighlight onPress={destroyRecognizer}>
<Text style={styles.action}>Hủy Bỏ</Text>
</TouchableHighlight>
</View>6. Định Dạng Giao Diện
javascript
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF",
marginTop: 33,
},
welcome: {
fontSize: 20,
textAlign: "center",
margin: 10,
},
action: {
textAlign: "center",
color: "#0000FF",
marginVertical: 5,
fontWeight: "bold",
},
instructions: {
textAlign: "center",
color: "#333333",
marginBottom: 5,
},
stat: {
textAlign: "center",
color: "#B0171F",
marginBottom: 1,
},
});7. Ghi Chú Khi Sử Dụng
- Lưu ý rằng chức năng nhận dạng giọng nói có thể không hoạt động trên trình giả lập Android; hãy thử nghiệm trên thiết bị thực.
- Trên iOS, nếu các quyền cần thiết không được thêm đúng cách vào
Info.plist, có thể xảy ra lỗi.
Kết Luận
Bằng cách làm theo các bước trong hướng dẫn này, bạn có thể dễ dàng tích hợp chức năng chuyển đổi giọng nói thành văn bản vào ứng dụng React Native của mình với thư viện @react-native-voice/voice. Cho dù bạn đang phát triển một giao diện giúp người dùng tương tác dễ hơn hay chỉ đơn giản là mở rộng khả năng tương tác của ứng dụng, công cụ này sẽ là một bổ sung mạnh mẽ.
source: viblo
