React Native Text To Speech

Meneroka react-native-tts: Panduan Komprehensif untuk Text-to-Speech dalam React Native

Teknologi Text-to-Speech (TTS) sedang mengubah cara kami berinteraksi dengan aplikasi mudah alih dengan menukar teks bertulis kepada perkataan yang dituturkan. Jika anda sedang membangunkan aplikasi React Native dan ingin menggabungkan fungsi TTS, react-native-tts ialah perpustakaan popular yang menjadikan penyepaduan ini mudah. Dalam panduan ini, kami akan meneroka cara menggunakan react-native-tts, meliputi pemasangan, penggunaan asas dan ciri lanjutan.

---

Apakah react-native-tts?

react-native-tts ialah perpustakaan Text-to-Speech untuk React Native yang membenarkan pembangun menambah keupayaan sintesis pertuturan pada apl mereka. Ia menyokong kedua-dua Android dan iOS, menjadikannya pilihan serba boleh untuk pembangunan merentas platform. Dengan react-native-tts, anda boleh menukar teks kepada pertuturan, mengawal parameter pertuturan seperti pic dan kadar serta mengendalikan pelbagai acara pertuturan.

---

Pemasangan

Untuk bermula dengan react-native-tts, anda perlu memasangnya melalui npm atau benang. Buka terminal anda dan jalankan:

npm install react-native-tts

atau

yarn add react-native-tts

---

Penggunaan

a) Cipta fail 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) Sekarang mulakan dan gunakannya:

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

Kesimpulan

react-native-tts ialah perpustakaan yang berkuasa dan fleksibel untuk menambahkan fungsi teks-ke-ucapan pada aplikasi React Native anda. Dengan persediaan mudah, pengendalian acara dan ciri lanjutannya, anda boleh meningkatkan pengalaman pengguna dengan menggabungkan interaksi bahasa semula jadi. Eksperimen dengan konfigurasi yang berbeza dan gunakan sepenuhnya TTS untuk mencipta aplikasi yang menarik dan boleh diakses.

Atas ialah kandungan terperinci React Native Text To Speech. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!