نحوه پیاده سازی صدا به متن در React Native

Summarize this content to 400 words in Persian Lang

مقدمه

در این مقاله، شما را با ادغام آن آشنا خواهیم کرد @react-native-voice/voice کتابخانه را در پروژه React Native ما فعال کنید voice-to-text عملکرد این ویژگی را می توان در سناریوهای مختلفی مانند برنامه های دیکته، فرمان های صوتی یا ویژگی های جستجو به صورت صوتی استفاده کرد.

1. نصب و راه اندازی

ابتدا باید آن را نصب کنید @react-native-voice/voice بسته بندی شما می توانید این کار را با اجرا انجام دهید:

npm install @react-native-voice/voice

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. پیکربندی اندروید

برای اندروید، باید مجوز میکروفون را در قسمت درخواست کنید AndroidManifest.xml فایل خط زیر را اضافه کنید:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. پیکربندی iOS

برای iOS، باید مجوزهای میکروفون و تشخیص گفتار را در خود اضافه کنید Info.plist فایل:

NSMicrophoneUsageDescription
Description of why you require the use of the microphone
NSSpeechRecognitionUsageDescription
Description of why you require the use of the speech recognition

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مطمئن شوید که توضیحات دقیقا توضیح می‌دهند که چرا برنامه شما به این مجوزها نیاز دارد.

4. مدیریت تشخیص صدا

در اینجا نحوه تنظیم کتابخانه در مؤلفه React Native آمده است.

الف وارد کردن صدا

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ب راه اندازی حالت

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([]);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ج. راه‌اندازی کنترل‌کننده‌های رویداد صوتی

داخل useEffect هوک، کنترل کننده های مختلف رویداد را مقداردهی اولیه کنید:

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);
};
}, []);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

د شروع و توقف تشخیص

برای شروع، توقف، لغو یا از بین بردن شناسایی، توابع زیر را تعریف کنید:

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. پیاده سازی UI

اکنون، یک رابط کاربری ساده برای تعامل با سیستم تشخیص صدا ایجاد کنید:

Welcome to React Native Voice!
Press the button and start speaking.
{`Started: ${started}`}
{`Recognized: ${recognized}`}
{`Pitch: ${pitch}`}
{`Error: ${error}`}
Results
{results.map((result, index) => (
{result}
))}
Partial Results
{partialResults.map((result, index) => (
{result}
))}
{`End: ${end}`}

Start

Stop Recognizing

Cancel

Destroy

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. یک ظاهر طراحی شده

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. یادداشت ها

تشخیص صدا ممکن است در شبیه سازهای اندروید کار نکند. تست بر روی یک دستگاه واقعی توصیه می شود.
در iOS، اگر مجوزهای لازم به درستی به آن اضافه نشود، خرابی ممکن است رخ دهد Info.plist.

نتیجه گیری

با دنبال کردن مراحل این راهنما، می‌توانید با استفاده از کتابخانه @react-native-voice/voice، عملکرد صدا به متن را به سرعت در برنامه React Native خود ادغام کنید. چه در حال توسعه رابط های هندزفری باشید و چه به سادگی تعامل کاربر را افزایش دهید، این ابزار می تواند افزودنی قدرتمند برای برنامه شما باشد.

npm install @react-native-voice/voice

NSMicrophoneUsageDescription
Description of why you require the use of the microphone
NSSpeechRecognitionUsageDescription
Description of why you require the use of the speech recognition

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

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([]);

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);
  };
}, []);

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("");
};

  Welcome to React Native Voice!
  Press the button and start speaking.
  {`Started: ${started}`}
  {`Recognized: ${recognized}`}
  {`Pitch: ${pitch}`}
  {`Error: ${error}`}
  Results
  {results.map((result, index) => (
    {result}
  ))}
  Partial Results
  {partialResults.map((result, index) => (
    {result}
  ))}
  {`End: ${end}`}

  
    Start
  
  
    Stop Recognizing
  
  
    Cancel
  
  
    Destroy
  

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,
  },
});