SpeechSynthesizer Module

Note

On iOS and tvOS, using the speech synthesizer to speak text may create an overlap of voices if screen reading (VoiceOver) is enabled on your iOS or tvOS device. If you would like to set text-to-speech features for iOS or tvOS, consult our Accessibility documentation.

Use the SpeechSynthesizer module to get the supported target platform to speak. The module supports the following function: speak().

speak()

Speaks the given utterance. Resolves immediately once the utterance has been spoken on all supported platforms. Rejects on unsupported platforms or if an error has occurred. Supported on iOS, tvOS, Tizen, UWP, and Android (including Amazon Fire TV devices).

Definition

static speak(utterance: string): Promise<void>

Parameter Type and Description

The speak function has one string type parameter that holds the text to be spoken by the target platform.

Example

import {
  SpeechSynthesizer
} from '@youi/react-native-youi';
import React, { Component } from 'react';
import {
  AppRegistry,
  Button,
  StyleSheet,
  Text,
  View
} from 'react-native';

function speak(utterance) {
  SpeechSynthesizer.speak(utterance).then(() => {
    console.log(`Finished speaking "${utterance}"`);
  }).catch((error) => {  
    console.log(`Failed to speak "${utterance}" — ${error}`);
  });
}

const Utterances = ({utterances}) => (
  <View>
    {utterances.map((utterance, index) => <Button key={index} title={utterance} onPress={() => speak(utterance)}/>)}
  </View>
)

export default class TestSpeechSynthesizer extends Component {

  render() {
    return (
      <View style={styles.mainContainer}>
        <Utterances utterances={[
          "A long time ago in a galaxy far, far away…",
          "Help me, Obi-Wan Kenobi. You’re my only hope.",
          "The force is strong with this one.",
          "Judge me by my size, do you?",
          "Do. Or do not. There is no try."
        ]} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#d0d0d0'  
  }
});

AppRegistry.registerComponent('TestCaseApp', () => TestSpeechSynthesizer);