Maison > interface Web > js tutoriel > le corps du texte

Réagir à la synthèse vocale native

WBOY
Libérer: 2024-08-31 06:31:36
original
397 Les gens l'ont consulté

React Native Text To Speech

Explorer React-native-tts : un guide complet de la synthèse vocale dans React Native

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.


Qu'est-ce que React-Native-TTS ?

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.


Installation

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
Copier après la connexion

ou

yarn add react-native-tts
Copier après la connexion

Usage

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

Copier après la connexion

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

Copier après la connexion

Conclusion

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!