Hướng dẫn 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ích hợp thư viện @react-native-voice/voice vào dự án React Native để 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 có thể được ứng dụng trong nhiều trường hợp khác nhau, chẳng hạn như ứng dụng đọc chính tả, lệnh thoại hoặc tính năng tìm kiếm bằng giọng nói.

Bạn có thể xem thêm: React native là gì? Tại sao sử dụng React Native

1. Cài đặt

Trước tiên, bạn cần cài đặt gói @react-native-voice/voice. Bạn có thể thực hiện bằng cách chạy:

npm install @react-native-voice/voice

2. Cấu hình Android

Đối với Android, bạn cần yêu cầu quyền micrô trong tệp AndroidManifest.xml. Thêm dòng sau:

<uses-permission android:name="android.permission.RECORD_AUDIO" />

3. Cấu hình iOS

Đối với iOS, bạn cần thêm quyền nhận dạng giọng nói và micrô vào tệp Info.plist của mình:

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

Hãy đảm bảo phần mô tả giải thích chính xác lý do tại sao ứng dụng của bạn cần những quyền này.

4. Xử lý nhận dạng giọng nói

Sau đâ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 giọng nói

import Voice, {
  SpeechRecognizedEvent,
  SpeechResultsEvent,
  SpeechErrorEvent,
} from "@react-native-voice/voice";

b. Thiết lập State

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 Trình xử lý sự kiện giọng nói

Bên trong hook useEffect, khởi tạo các trình xử lý sự kiện khác nhau:

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 hủy nhận dạng, hãy xác định các hàm sau:

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 UI

Bây giờ, 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:

<View style={styles.container}>
  <Text style={styles.welcome}>Welcome to React Native Voice!</Text>
  <Text style={styles.instructions}>Press the button and start speaking.</Text>
  <Text style={styles.stat}>{`Started: ${started}`}</Text>
  <Text style={styles.stat}>{`Recognized: ${recognized}`}</Text>
  <Text style={styles.stat}>{`Pitch: ${pitch}`}</Text>
  <Text style={styles.stat}>{`Error: ${error}`}</Text>
  <Text style={styles.stat}>Results</Text>
  {results.map((result, index) => (
    <Text key={`result-${index}`} style={styles.stat}>{result}</Text>
  ))}
  <Text style={styles.stat}>Partial Results</Text>
  {partialResults.map((result, index) => (
    <Text key={`partial-result-${index}`} style={styles.stat}>{result}</Text>
  ))}
  <Text style={styles.stat}>{`End: ${end}`}</Text>

  <TouchableHighlight onPress={startRecognizing}>
    <Text style={styles.action}>Start</Text>
  </TouchableHighlight>
  <TouchableHighlight onPress={stopRecognizing}>
    <Text style={styles.action}>Stop Recognizing</Text>
  </TouchableHighlight>
  <TouchableHighlight onPress={cancelRecognizing}>
    <Text style={styles.action}>Cancel</Text>
  </TouchableHighlight>
  <TouchableHighlight onPress={destroyRecognizer}>
    <Text style={styles.action}>Destroy</Text>
  </TouchableHighlight>
</View>

6. Style

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ú

• Nhận dạng giọng nói có thể không hoạt động trên trình giả lập Android; nên thử nghiệm trên thiết bị thực.
• Trên iOS, sự cố có thể xảy ra nếu các quyền cần thiết không được thêm đúng cách vào Info.plist.

Phần 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ể nhanh chóng tích hợp chức năng chuyển giọng nói thành văn bản vào ứng dụng React Native của mình bằng thư viện @react-native-voice/voice. Cho dù bạn đang phát triển giao diện rảnh tay hay chỉ đơn giản là tăng cường tương tác của người dùng, công cụ này có thể là một bổ sung mạnh mẽ cho ứng dụng của bạn.