ネイティブテキストを音声に反応させる

React Native-tts の探索: React Native でのテキスト読み上げの包括的なガイド

Text-to-Speech (TTS) テクノロジーは、書かれたテキストを話し言葉に変換することで、モバイル アプリケーションとの対話方法を変革しています。 React Native アプリケーションを開発していて、TTS 機能を組み込みたい場合は、この統合を簡単に行うための人気のあるライブラリである、react-native-tts を使用します。このガイドでは、インストール、基本的な使用法、高度な機能をカバーしながら、react-native-tts の使用方法を説明します。

---

反応ネイティブ tts とは何ですか?

react-native-tts は、開発者がアプリに音声合成機能を追加できるようにする React Native の Text-to-Speech ライブラリです。 Android と iOS の両方をサポートしているため、クロスプラットフォーム開発に多用途に使用できます。 React-native-tts を使用すると、テキストを音声に変換し、ピッチやレートなどの音声パラメータを制御し、さまざまな音声イベントを処理できます。

---

インストール

react-native-tts を使い始めるには、npm または Yarn 経由でインストールする必要があります。ターミナルを開いて次を実行します:

npm install react-native-tts

または

yarn add react-native-tts

---

使用法

a) ファイル 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) 次に初期化して使用します:

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

結論

react-native-tts は、React Native アプリケーションにテキスト読み上げ機能を追加するための強力で柔軟なライブラリです。簡単なセットアップ、イベント処理、高度な機能により、自然言語対話を組み込むことでユーザー エクスペリエンスを向上させることができます。さまざまな構成を試し、TTS を最大限に活用して、魅力的でアクセスしやすいアプリケーションを作成してください。

以上がネイティブテキストを音声に反応させるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。