Reagieren Sie auf nativen Text auf Sprache

React-native-tts erkunden: Ein umfassender Leitfaden zur Text-to-Speech in React Native

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.

---

Was ist React-Native-Tts?

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.

---

Installation

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

---

Verwendung

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

Abschluss

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!