La technologie Text-to-Speech (TTS) transforme la façon dont nous interagissons avec les applications mobiles en convertissant le texte écrit en mots parlés. Si vous développez une application React Native et souhaitez intégrer la fonctionnalité TTS, réagissez-native-tts est une bibliothèque populaire qui simplifie cette intégration. Dans ce guide, nous explorerons comment utiliser React-native-tts, couvrant l'installation, l'utilisation de base et les fonctionnalités avancées.
react-native-tts est une bibliothèque de synthèse vocale pour React Native qui permet aux développeurs d'ajouter des fonctionnalités de synthèse vocale à leurs applications. Il prend en charge Android et iOS, ce qui en fait un choix polyvalent pour le développement multiplateforme. Avec React-native-tts, vous pouvez convertir du texte en parole, contrôler les paramètres de parole tels que la hauteur et la fréquence et gérer divers événements vocaux.
Pour démarrer avec React-native-tts, vous devrez l'installer via npm ou Yarn. Ouvrez votre terminal et exécutez :
npm install react-native-tts
ou
yarn add react-native-tts
a) Créer un fichier ttsListeners.jsx :
import Tts from 'react-native-tts'; // Function to initialize Text-to-Speech (TTS) settings and listeners export const initializeTtsListeners = async () => { // Check the initialization status of the TTS engine Tts.getInitStatus().then( (e) => { console.log('ALL OK TTS ✅'); // TTS is initialized successfully }, (err) => { // If there is no TTS engine installed, request to install one if (err.code === 'no_engine') { console.log('NO ENGINE TTS ✅'); Tts.requestInstallEngine(); } } ); // The following commented-out code can be used to list available voices and set a default voice // const voices = await Tts.voices() // console.log(voices) // Tts.setDefaultVoice('com.apple.speech.synthesis.voice.Albert') // Set the default speaking rate. Lower values are slower, and higher values are faster Tts.setDefaultRate(0.3, true); // Ignore the silent switch on the device, allowing TTS to play even if the device is set to silent Tts.setIgnoreSilentSwitch('ignore'); // Set the default pitch. Lower values result in a lower pitch, and higher values in a higher pitch Tts.setDefaultPitch(0.7); // Set up listeners for various TTS events // Listener for when TTS starts speaking Tts.addEventListener('tts-start', (event) => { console.log('TTS Started: ', event); }); // Listener for TTS progress (triggered repeatedly while speaking) Tts.addEventListener('tts-progress', (event) => { // console.log('TTS progress: ', event) // Uncomment to log progress events }); // Listener for when TTS finishes speaking Tts.addEventListener('tts-finish', (event) => { console.log('TTS finished: ', event); }); // Listener for when TTS is canceled Tts.addEventListener('tts-cancel', (event) => { console.log('TTS Cancel: ', event); }); }; // Function to play a message using TTS export const playTTS = async (message) => { // Ensure TTS is initialized before speaking Tts.getInitStatus().then( (e) => { console.log('ALL OK TTS ✅'); // TTS is initialized successfully }, (err) => { // If there is no TTS engine installed, request to install one if (err.code === 'no_engine') { console.log('NO ENGINE TTS ✅'); Tts.requestInstallEngine(); } } ); // Use TTS to speak the provided message Tts.speak(message); };
b) Maintenant, initialisez-le et utilisez-le :
App.jsx
import { StyleSheet, Text, View } from 'react-native'; import React from 'react'; import { initializeTtsListeners } from './utils/ttsListners'; const App = () => { useEffect(() => { initializeTtsListeners(); setTimeout(() => { playTTS('Hello World! This is text to speech implementation, Keep Coding!!!.'); // or Tts.speak(message) }, 1000); }, []); return ( <View> <Text>App</Text> </View> ); }; export default App; const styles = StyleSheet.create({});
react-native-tts est une bibliothèque puissante et flexible pour ajouter des fonctionnalités de synthèse vocale à vos applications React Native. Grâce à sa configuration simple, sa gestion des événements et ses fonctionnalités avancées, vous pouvez améliorer l'expérience utilisateur en intégrant des interactions en langage naturel. Expérimentez avec différentes configurations et tirez le meilleur parti de TTS pour créer des applications attrayantes et accessibles.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!