Heim > Web-Frontend > js-Tutorial > Hauptteil

Reagieren Sie auf nativen Text auf Sprache

WBOY
Freigeben: 2024-08-31 06:31:36
Original
398 Leute haben es durchsucht

React Native Text To Speech

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
Nach dem Login kopieren

oder

yarn add react-native-tts
Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!