Die Text-to-Speech-Technologie (TTS) verändert die Art und Weise, wie wir mit mobilen Anwendungen interagieren, indem sie geschriebenen Text in gesprochene Wörter umwandelt. Wenn Sie eine React Native-Anwendung entwickeln und TTS-Funktionalität integrieren möchten, ist „react-native-tts“ eine beliebte Bibliothek, die diese Integration unkompliziert macht. In diesem Leitfaden erfahren Sie, wie Sie React-Native-Tts verwenden, und behandeln dabei die Installation, die grundlegende Verwendung und erweiterte Funktionen.
react-native-tts ist eine Text-to-Speech-Bibliothek für React Native, die es Entwicklern ermöglicht, ihren Apps Sprachsynthesefunktionen hinzuzufügen. Es unterstützt sowohl Android als auch iOS und ist somit eine vielseitige Wahl für die plattformübergreifende Entwicklung. Mit „react-native-tts“ können Sie Text in Sprache umwandeln, Sprachparameter wie Tonhöhe und Geschwindigkeit steuern und verschiedene Sprachereignisse verarbeiten.
Um mit React-Native-Tts zu beginnen, müssen Sie es über npm oder Yarn installieren. Öffnen Sie Ihr Terminal und führen Sie Folgendes aus:
npm install react-native-tts
oder
yarn add react-native-tts
a) Erstellen Sie eine Datei 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) Jetzt initialisieren und verwenden:
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 ist eine leistungsstarke und flexible Bibliothek zum Hinzufügen von Text-to-Speech-Funktionalität zu Ihren React Native-Anwendungen. Mit der einfachen Einrichtung, der Ereignisverarbeitung und den erweiterten Funktionen können Sie das Benutzererlebnis durch die Integration natürlicher Sprachinteraktionen verbessern. Experimentieren Sie mit verschiedenen Konfigurationen und nutzen Sie TTS optimal, um ansprechende und zugängliche Anwendungen zu erstellen.
Das obige ist der detaillierte Inhalt vonReagieren Sie auf nativen Text auf Sprache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!