Guide complet de l'API Text-to-Speech en JavaScript

Introduction à l'API Speech Synthesis

L'API Speech Synthesis fait partie de l'API Web Speech et est supportée par la plupart des navigateurs modernes (Chrome, Firefox, Safari, Edge). Elle permet de contrôler la synthèse vocale avec une grande précision, incluant le choix de la voix, la vitesse, le ton et le volume.

Vérification de la compatibilité

Avant d'utiliser l'API, il est important de vérifier que le navigateur la supporte :

if ('speechSynthesis' in window) {
    console.log('La synthèse vocale est supportée !');
} else {
    console.log('Désolé, votre navigateur ne supporte pas la synthèse vocale.');
}

Utilisation basique

Voici comment créer une fonction simple pour faire parler le navigateur :

function parler(texte) {
    // Créer une nouvelle instance de SpeechSynthesisUtterance
    const utterance = new SpeechSynthesisUtterance(texte);
    
    // Lancer la synthèse vocale
    window.speechSynthesis.speak(utterance);
}

// Utilisation
parler('Bonjour, bienvenue dans le monde de la synthèse vocale !');

Paramètres de configuration

L'objet SpeechSynthesisUtterance possède plusieurs propriétés pour personnaliser la voix :

const utterance = new SpeechSynthesisUtterance('Texte à prononcer');

// Langue
utterance.lang = 'fr-FR';

// Vitesse (0.1 à 10, par défaut 1)
utterance.rate = 1;

// Ton/hauteur (0 à 2, par défaut 1)
utterance.pitch = 1;

// Volume (0 à 1, par défaut 1)
utterance.volume = 1;

Sélection de la voix

Pour obtenir la liste des voix disponibles et en sélectionner une :

function obtenirVoix() {
    return new Promise((resolve) => {
        let voix = speechSynthesis.getVoices();
        
        if (voix.length) {
            resolve(voix);
            return;
        }
        
        // Les voix peuvent ne pas être chargées immédiatement
        speechSynthesis.onvoiceschanged = () => {
            voix = speechSynthesis.getVoices();
            resolve(voix);
        };
    });
}

// Utilisation
obtenirVoix().then(voix => {
    console.log('Voix disponibles :', voix);
    
    // Filtrer les voix françaises
    const voixFrancaises = voix.filter(v => v.lang.startsWith('fr'));
    console.log('Voix françaises :', voixFrancaises);
    
    // Sélectionner une voix
    const utterance = new SpeechSynthesisUtterance('Bonjour');
    utterance.voice = voixFrancaises[0];
    speechSynthesis.speak(utterance);
});

Événements

L'API fournit plusieurs événements pour suivre l'état de la synthèse vocale :

const utterance = new SpeechSynthesisUtterance('Un texte assez long pour tester les événements');

utterance.onstart = () => {
    console.log('La lecture a commencé');
};

utterance.onend = () => {
    console.log('La lecture est terminée');
};

utterance.onpause = () => {
    console.log('La lecture est en pause');
};

utterance.onresume = () => {
    console.log('La lecture a repris');
};

utterance.onerror = (event) => {
    console.error('Erreur:', event.error);
};

utterance.onboundary = (event) => {
    console.log('Frontière de mot atteinte');
};

speechSynthesis.speak(utterance);

Contrôles de lecture

Vous pouvez contrôler la lecture avec ces méthodes :

// Mettre en pause
speechSynthesis.pause();

// Reprendre
speechSynthesis.resume();

// Arrêter complètement
speechSynthesis.cancel();

// Vérifier si en cours de lecture
const enLecture = speechSynthesis.speaking;
const enPause = speechSynthesis.paused;

Exemple complet : Lecteur de texte

// Code complet de la démo
let voixDisponibles = [];

// Charger les voix
function chargerVoix() {
    voixDisponibles = speechSynthesis.getVoices();
    const select = document.getElementById('voiceSelect');
    select.innerHTML = '';
    
    voixDisponibles.forEach((voix, index) => {
        const option = document.createElement('option');
        option.value = index;
        option.textContent = `${voix.name} (${voix.lang})`;
        if (voix.lang.startsWith('fr')) {
            option.selected = true;
        }
        select.appendChild(option);
    });
}

// Initialisation
if (speechSynthesis.onvoiceschanged !== undefined) {
    speechSynthesis.onvoiceschanged = chargerVoix;
}
chargerVoix();

function lireTexte() {
    const texte = document.getElementById('demoText').value;
    const utterance = new SpeechSynthesisUtterance(texte);
    
    // Récupérer les paramètres
    utterance.rate = parseFloat(document.getElementById('rate').value);
    utterance.pitch = parseFloat(document.getElementById('pitch').value);
    utterance.volume = parseFloat(document.getElementById('volume').value);
    
    // Sélectionner la voix
    const voixIndex = document.getElementById('voiceSelect').value;
    utterance.voice = voixDisponibles[voixIndex];
    
    // Lancer la lecture
    speechSynthesis.speak(utterance);
}

function pauserLecture() {
    speechSynthesis.pause();
}

function reprendreLecture() {
    speechSynthesis.resume();
}

function arreterLecture() {
    speechSynthesis.cancel();
}

Cas d'usage pratiques

1. Accessibilité

Créer des applications accessibles pour les personnes malvoyantes en ajoutant une lecture audio du contenu.

2. Apprentissage des langues

Développer des applications éducatives où les utilisateurs peuvent entendre la prononciation correcte des mots.

3. Notifications vocales

Annoncer des alertes ou des notifications importantes de manière audible.

4. Livres audio

Transformer des articles ou des documents en format audio pour une consommation en déplacement.

Limitations et considérations

Bien que l'API soit puissante, elle présente quelques limitations :

La qualité et le nombre de voix varient selon le système d'exploitation et le navigateur. Les voix peuvent sonner robotiques sur certains systèmes. La longueur du texte peut être limitée sur certains navigateurs. L'API nécessite une connexion internet sur certains appareils pour certaines voix.

Plus de tutoriels JavaScript

Jeu de type Idle en environ 200 lignes

Visualisation du tri à bulles en 41 lignes