将本机文本反应为语音

探索react-native-tts：React Native 中文本转语音的综合指南

文本转语音 (TTS) 技术通过将书面文本转换为口语单词，正在改变我们与移动应用程序交互的方式。如果您正在开发 React Native 应用程序并希望合并 TTS 功能，react-native-tts 是一个流行的库，可以使这种集成变得简单。在本指南中，我们将探索如何使用react-native-tts，涵盖安装、基本用法和高级功能。

---

什么是react-native-tts？

react-native-tts 是 React Native 的文本转语音库，允许开发人员向他们的应用程序添加语音合成功能。它同时支持 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中文网其他相关文章！