Réagir à la synthèse vocale native

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

ou

yarn add react-native-tts

---

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

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

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!