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