Day 5: Converting Text to Speech for Feedback #TextToSpeech #VoiceAppFeedback

Text-to-speech (TTS) enhances your voice-controlled app by providing spoken feedback to user commands. On Day 5, we’ll implement TTS functionality to respond to voice input, creating a conversational experience.

Table of Contents

1. Why Add Text-to-Speech?

Improves Accessibility: Offers audible feedback for users with visual impairments.
Enhances User Experience: Creates a conversational and engaging interface.
Increases Usability: Confirms that commands are recognized and executed correctly.

2. Using Expo Speech API for TTS

The Expo Speech API provides an easy way to integrate TTS in React Native projects.

Step 1: Install Expo Speech API

If you’re using an Expo project, the Speech API is preinstalled. Otherwise, install it:

expo install expo-speech

3. Implementing TTS Functionality

Step 1: Basic TTS Example

Add a simple button to trigger TTS:

import React from 'react';
import { Button, View } from 'react-native';
import * as Speech from 'expo-speech';

export default function App() {
    const speak = () => {
        Speech.speak("Hello! How can I assist you today?");
    };

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Button title="Speak" onPress={speak} />
        </View>
    );
}

Step 2: Combine Voice Recognition and TTS

Integrate TTS with the voice recognition example from Day 4. Add spoken feedback for each recognized command:

import React, { useState } from 'react';
import { Button, View, Text, StyleSheet, Platform, PermissionsAndroid } from 'react-native';
import Voice from '@react-native-voice/voice';
import * as Speech from 'expo-speech';

export default function App() {
    const [recognizedText, setRecognizedText] = useState("");
    const [isListening, setIsListening] = useState(false);

    const commands = {
        "open settings": () => {
            console.log("Navigating to Settings...");
            Speech.speak("Opening settings.");
        },
        "show weather": () => {
            console.log("Fetching Weather Data...");
            Speech.speak("Here is the weather information.");
        },
        "play music": () => {
            console.log("Playing Music...");
            Speech.speak("Playing your favorite music.");
        },
    };

    const handleCommand = (text) => {
        const command = Object.keys(commands).find((cmd) =>
            text.toLowerCase().includes(cmd)
        );
        if (command) {
            commands[command]();
        } else {
            Speech.speak("Sorry, I did not understand that command.");
        }
    };

    const startListening = async () => {
        if (Platform.OS === 'android') {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
                {
                    title: "Microphone Permission",
                    message: "This app requires access to your microphone for voice commands.",
                }
            );
            if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
                return;
            }
        }

        try {
            setIsListening(true);
            Voice.start("en-US");
        } catch (error) {
            console.error("Error starting voice recognition:", error);
        }
    };

    const stopListening = () => {
        setIsListening(false);
        Voice.stop();
    };

    Voice.onSpeechResults = (event) => {
        const text = event.value[0];
        setRecognizedText(text);
        handleCommand(text);
        setIsListening(false);
    };

    return (
        <View style={styles.container}>
            <Text style={styles.instructions}>
                {isListening ? "Listening..." : "Press the button and speak a command"}
            </Text>
            <Button
                title={isListening ? "Stop Listening" : "Start Listening"}
                onPress={isListening ? stopListening : startListening}
            />
            <Text style={styles.resultText}>Recognized Text: {recognizedText}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, justifyContent: "center", alignItems: "center" },
    instructions: { fontSize: 18, marginBottom: 20 },
    resultText: { fontSize: 20, marginTop: 20 },
});

4. Advanced TTS Features

Adjusting Voice Settings

Control the pitch, rate, and language of the spoken voice:

Speech.speak("I am speaking with a different voice.", {
    pitch: 1.2, // Higher pitch
    rate: 0.8, // Slower speech
    language: "en-GB", // British English
});

Stopping Speech

Stop TTS if necessary:

Speech.stop();

5. Testing TTS Functionality

Step 1: Start the App

Run the development server:

expo start

Step 2: Test Command Feedback

Speak commands like “Open settings” or “Show weather.”
Verify that spoken feedback matches the executed action.

6. Key Considerations

Language Support: Verify TTS language compatibility for your app’s target audience.
Background Noise: Test TTS in environments with varying noise levels.
Fallback Options: Provide text feedback if audio output fails or is disabled.

7. Key Concepts Covered

Basic text-to-speech functionality.
Integrating TTS with voice recognition.
Customizing voice pitch, rate, and language.

Next Steps

On Day 6, we’ll add voice-based navigation between app screens, enhancing app interactivity.

References and Links:

SEO Keywords: React Native text-to-speech, TTS in Expo apps, Expo Speech API tutorial, voice feedback in mobile apps, combining voice recognition and TTS.

Post Views: 89