Text-to-Speech (Synthèse vocale)

Mini-Zoe peut parler à vos utilisateurs pour une expérience encore plus accessible et immersive.

Qu'est-ce que le Text-to-Speech ?

Le Text-to-Speech (TTS) ou synthèse vocale permet à Mini-Zoe de lire à voix haute les messages affichés. C'est une fonctionnalité essentielle pour :

• 👁️ Les utilisateurs malvoyants ou aveugles
• 🚗 Les utilisateurs en situation de conduite
• 🏃 Les utilisateurs en mouvement
• 📚 L'apprentissage multimodal

Installation

Pour utiliser le TTS, vous devez installer la dépendance react-native-tts :

npm install react-native-tts

iOS

Pour iOS, installez les pods natifs :

cd ios && pod install && cd ..

Android

Pour Android, la configuration est automatique après l'installation.

Configuration basique

Activez simplement la synthèse vocale avec la prop enableTextToSpeech :

import { MiniZoe } from '@blueshork/mini-zoe';

function App() {
  return (
    <View style={{ flex: 1 }}>
      <MiniZoe
        enabled={true}
        enableTextToSpeech={true}
      />
    </View>
  );
}

C'est tout ! Mini-Zoe parlera maintenant à chaque fois qu'un message est affiché. 🎉

Langues disponibles

Mini-Zoe supporte plusieurs langues pour la synthèse vocale :

<MiniZoe
  enableTextToSpeech={true}
  ttsLanguage="fr-FR" // Français par défaut
/>

Langues supportées

Code	Langue	Exemple
fr-FR	Français (France)	"Bonjour !"
en-US	Anglais (USA)	"Hello!"
en-GB	Anglais (UK)	"Hello!"
es-ES	Espagnol (Espagne)	"¡Hola!"
de-DE	Allemand	"Hallo!"
it-IT	Italien	"Ciao!"

Exemple multilingue :

// Application en anglais
<MiniZoe
  enableTextToSpeech={true}
  ttsLanguage="en-US"
/>

// Dans votre code
VoiceRecognitionStore.show('Welcome to the app!');

Vitesse de parole

Ajustez la vitesse de lecture avec ttsRate :

<MiniZoe
  enableTextToSpeech={true}
  ttsRate={0.5} // Plus lent
/>

Valeurs recommandées

Valeur	Vitesse	Recommandation
0.5	Lent	✅ Recommandé pour l'accessibilité
0.7	Un peu lent	Bon compromis
1.0	Normal	Vitesse standard
1.5	Rapide	Pour utilisateurs expérimentés
2.0	Très rapide	Peut être difficile à comprendre

Exemple :

// Pour une meilleure accessibilité
<MiniZoe
  enableTextToSpeech={true}
  ttsRate={0.5} // Lent et clair
/>

Tonalité de la voix

Modifiez la hauteur de la voix avec ttsPitch :

<MiniZoe
  enableTextToSpeech={true}
  ttsPitch={1.0} // Normal
/>

Valeurs recommandées

Valeur	Tonalité	Usage
0.5	Très grave	Voix masculine profonde
0.8	Grave	Voix masculine
1.0	Normal	✅ Recommandé (neutre)
1.2	Aigu	Voix féminine
2.0	Très aigu	Voix enfantine

Exemple :

<MiniZoe
  enableTextToSpeech={true}
  ttsPitch={1.0} // Tonalité neutre
/>

Configuration complète

Voici un exemple de configuration TTS optimale pour l'accessibilité :

import { MiniZoe } from '@blueshork/mini-zoe';

function App() {
  return (
    <View style={{ flex: 1 }}>
      <MiniZoe
        enabled={true}

        // Configuration TTS optimale
        enableTextToSpeech={true}
        ttsLanguage="fr-FR"
        ttsRate={0.5}      // Lent et clair
        ttsPitch={1.0}     // Tonalité neutre

        // Laisser plus de temps pour écouter
        autoHideDuration={4000}
      />
    </View>
  );
}

Exemples pratiques

Application multilingue

import React, { useState } from 'react';
import { MiniZoe } from '@blueshork/mini-zoe';

function App() {
  const [language, setLanguage] = useState('fr-FR');

  return (
    <View style={{ flex: 1 }}>
      {/* Sélecteur de langue */}
      <LanguageSelector onSelect={setLanguage} />

      {/* Mini-Zoe avec langue dynamique */}
      <MiniZoe
        enableTextToSpeech={true}
        ttsLanguage={language}
      />
    </View>
  );
}

Paramètres utilisateur

import React from 'react';
import { MiniZoe } from '@blueshork/mini-zoe';
import { useSettings } from './hooks/useSettings';

function App() {
  const { ttsEnabled, speechRate, voicePitch } = useSettings();

  return (
    <View style={{ flex: 1 }}>
      <MiniZoe
        enableTextToSpeech={ttsEnabled}
        ttsRate={speechRate}
        ttsPitch={voicePitch}
      />
    </View>
  );
}

Considérations importantes

Permissions

Sur certains appareils, l'utilisateur peut avoir besoin d'activer ou de télécharger des voix supplémentaires dans les paramètres système.

iOS : Réglages → Accessibilité → Contenu énoncé → Voix

Android : Paramètres → Accessibilité → Synthèse vocale

Performances

Le TTS peut consommer plus de batterie. Considérez :

• Permettre aux utilisateurs de désactiver le TTS
• Utiliser des messages courts
• Ne pas abuser de show() en boucle

Messages clairs

Pour une meilleure expérience TTS :

// ✅ Bon
VoiceRecognitionStore.show('Bienvenue sur votre profil');

// ❌ À éviter
VoiceRecognitionStore.show('Welcome 2 ur profile!!!');

Test du TTS

Testez toujours votre TTS sur de vrais appareils :

import { VoiceRecognitionStore } from '@blueshork/mini-zoe';

// Bouton de test
function TestTTSButton() {
  const testTTS = () => {
    VoiceRecognitionStore.show('Test de la synthèse vocale');
  };

  return <Button title="Tester le TTS" onPress={testTTS} />;
}

Désactivation dynamique

Permettez aux utilisateurs de contrôler le TTS :

import React, { useState } from 'react';
import { MiniZoe } from '@blueshork/mini-zoe';
import { Switch, Text } from 'react-native';

function App() {
  const [ttsEnabled, setTtsEnabled] = useState(true);

  return (
    <View style={{ flex: 1 }}>
      {/* Contrôle utilisateur */}
      <View>
        <Text>Activer la voix</Text>
        <Switch value={ttsEnabled} onValueChange={setTtsEnabled} />
      </View>

      {/* Mini-Zoe avec TTS contrôlable */}
      <MiniZoe
        enabled={true}
        enableTextToSpeech={ttsEnabled}
      />
    </View>
  );
}

Prochaines étapes

• Référence des props TTS - Documentation complète des props TTS
• Personnalisation - Adaptez l'apparence de Mini-Zoe
• Guide d'utilisation - Exemples d'utilisation