Voice Narration

Text-to-speech narration using expo-speech with Spanish language support

Overview

The Voice Narration feature brings Pokédex entries to life using expo-speech for text-to-speech synthesis. The voice is configured to sound like Dexter from the Pokémon anime, with specific pitch and rate settings optimized for Spanish narration.

Implementation

The voice functionality is encapsulated in a custom React hook: useDexterVoice.

Hook Structure

import * as Speech from 'expo-speech';

export const useDexterVoice = () => {
  const hablarEntrada = (texto, nombrePokemon) => {
    const textoLimpio = texto.replace(/\f/g, ' ');
    const mensajeCompleto = `${nombrePokemon}. ${textoLimpio}`;

    const options = {
      language: 'es-MX',
      pitch: .57,
      rate: 1.2,
      voice: 'es-es-x-eea-network',
    };

    Speech.speak(mensajeCompleto, options);
  };

  const detenerVoz = () => {
    Speech.stop();
  };

  return { hablarEntrada, detenerVoz };
};

Voice Configuration

Language Settings

The voice is configured for Mexican Spanish (es-MX):

language: 'es-MX',  // Español Latino
voice: 'es-es-x-eea-network',

This provides authentic Spanish pronunciation for Pokémon names and flavor text.

Dexter Voice Parameters

The voice settings are tuned to mimic Dexter’s robotic yet analytical tone:

pitch: .57,   // Lower pitch for robotic effect
rate: 1.2,    // Slightly faster for analytical feel

• Pitch: 0.57 - Lower than default to create a deeper, more mechanical voice
• Rate: 1.2 - Slightly faster than normal speech for clarity and efficiency

Usage in Details Screen

The voice narration is triggered automatically when Pokémon details are loaded:

import { useDexterVoice } from '../../hooks/useDexterVoice';

const { hablarEntrada } = useDexterVoice();

const fetchFullData = async () => {
  // ... fetch and process data ...
  
  setPokemon(processedData);
  setLoading(false);
  
  // Play Pokémon cry first
  await playSound(processedData.cries);
  
  // Then start voice narration after a delay
  setTimeout(() => {
    hablarEntrada(description, data.name);
  }, 800);
};

Text Processing

Before narration, the flavor text is cleaned:

const textoLimpio = texto.replace(/\f/g, ' ');

This removes form feed characters (\f) that sometimes appear in PokéAPI flavor text.

Message Format

The complete narration includes the Pokémon name followed by the description:

const mensajeCompleto = `${nombrePokemon}. ${textoLimpio}`;

Example output:

“Pikachu. Cuando varios de estos Pokémon se juntan, su energía puede causar fuertes tormentas.”

Stopping Narration

The hook provides a function to stop ongoing narration:

const { detenerVoz } = useDexterVoice();

// Stop current narration
detenerVoz();

This uses Speech.stop() from expo-speech.

Timing Sequence

The narration is carefully timed with other audio elements:

1. Pokémon details are fetched from API
2. Pokémon cry audio plays immediately
3. 800ms delay
4. Dexter voice narration begins

See DetailsScreen.js:45 for the timing implementation.

Voice Quality

The es-es-x-eea-network voice provides:

• Natural Spanish pronunciation
• Network-based synthesis for higher quality
• Consistent delivery across devices

Customization Options

You can adjust the voice characteristics by modifying the options:

const options = {
  language: 'es-MX',  // Change for different Spanish variant
  pitch: .57,         // Range: 0.5 - 2.0 (lower = deeper)
  rate: 1.2,          // Range: 0.5 - 2.0 (higher = faster)
  voice: 'es-es-x-eea-network',
};

Example Variations

More robotic (lower pitch):

pitch: 0.4,
rate: 1.0,

More energetic (higher pitch, faster):

pitch: 0.8,
rate: 1.5,

expo-speech API

The hook uses two main expo-speech functions:

Speech.speak(text, options)

Plays the text with specified voice settings.

Speech.stop()

Immediately stops any ongoing speech synthesis.

See Also

• Pokédex Entries - Where voice narration is triggered
• expo-speech documentation

Implementation: useDexterVoice.js