將本機文字反應為語音-js教程-PHP中文網

將本機文字反應為語音

WBOY

發布： 2024-08-31 06:31:36

原創

398 人瀏覽過

React Native Text To Speech

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

登入後複製