Comment charger la la voix utilisée par l'API de synthèse vocale (Speech Synthesis API)

05 novembre 2024 HTML5, JAVASCRIPT & JQUERY
Astuces Audio HTML5 script

Lecture d'un paragraphe avec l'API de synthèse vocale (Speech Synthesis API)

Il est tout à fait possible d'intégrer un lecteur audio natif  (Speech Synthesis API) qui va lire votre contenu dans une balise avec id précise.

EXEMPLE DE TEXTE A LIRE EN AUDIO

La sottise, l’erreur, le péché, la lésine,Occupent nos esprits et travaillent nos corps, Et nous alimentons nos aimables remords, Comme les mendiants nourrissent leur vermine.

Nos péchés sont têtus, nos repentirs sont lâches ; Nous nous faisons payer grassement nos aveux, Et nous rentrons gaiement dans le chemin bourbeux, Croyant par de vils pleurs laver toutes nos taches.

Sur l’oreiller du mal c’est Satan Trismégiste Qui berce longuement notre esprit enchanté, Et le riche métal de notre volonté Est tout vaporisé par ce savant chimiste.

C’est le Diable qui tient les fils qui nous remuent ! Aux objets répugnants nous trouvons des appas ; Chaque jour vers l’Enfer nous descendons d’un pas, Sans horreur, à travers des ténèbres qui puent. extrait : des fleurs du mal : Baudelaire

Lire le texte Choisir une voix :

EXPLICATION DU SCRIPT :

Liste des voix :

• On utilise la méthode speechSynthesis.getVoices() pour obtenir toutes les voix disponibles.
• Les voix sont filtrées pour ne garder que celles qui parlent français.

Sélection de la voix :

• Une liste déroulante (<select>) est ajoutée pour permettre à l'utilisateur de choisir une voix.
• Lorsqu'une voix est sélectionnée, elle est appliquée à l'instance utterance.

Événement onvoiceschanged :

• Lorsque les voix sont chargées, on appelle populateVoiceList() pour remplir la liste déroulante.

Utilisation

• Lorsque vous ouvrez la page, les voix disponibles sont chargées dans le menu déroulant.
• Sélectionnez une voix puis cliquez sur le bouton pour lire le texte. Si le texte est déjà en cours de lecture, le bouton l'arrêtera et le texte du bouton changera en conséquence.

CODE A UTILISER :

pour la partie HTML

<p id="text-to-read">Ceci est un exemple de texte qui sera lu à haute voix.</p> <button id="read-button">Lire le texte</button>

<label for="voice-select">Choisir une voix :</label> <select id="voice-select"></select>

pour la partie JavaScript

 <script>
        const readButton = document.getElementById('read-button');
        const voiceSelect = document.getElementById('voice-select');
        let utterance;
        let voices = [];

        function populateVoiceList() {
            voices = speechSynthesis.getVoices();
            // Filtrer pour obtenir uniquement les voix en français
            const frenchVoices = voices.filter(voice => voice.lang.startsWith('fr'));
            
            // Ajouter chaque voix à la liste déroulante
            frenchVoices.forEach(voice => {
                const option = document.createElement('option');
                option.value = voice.name;
                option.textContent = `${voice.name} (${voice.lang})`;
                voiceSelect.appendChild(option);
            });
        }

        // Remplir la liste des voix disponibles
        speechSynthesis.onvoiceschanged = populateVoiceList;

        readButton.addEventListener('click', () => {
            if (window.speechSynthesis.speaking) {
                // Si le texte est déjà en cours de lecture, on arrête la lecture
                window.speechSynthesis.cancel();
                readButton.textContent = 'Lire le texte'; // Remettre le texte du bouton
            } else {
                // Si le texte n'est pas en cours de lecture, on commence à le lire
                const text = document.getElementById('text-to-read').textContent;
                utterance = new SpeechSynthesisUtterance(text);

                // Sélectionner la voix choisie dans la liste
                const selectedVoiceName = voiceSelect.value;
                const selectedVoice = voices.find(voice => voice.name === selectedVoiceName);
                if (selectedVoice) {
                    utterance.voice = selectedVoice;
                }

                // Optionnel : modifier la vitesse, le volume, etc.
                utterance.rate = 1; // Vitesse de lecture
                utterance.pitch = 1; // Tonalité de la voix
                utterance.volume = 1; // Volume (0 à 1)

                // Mettre à jour le texte du bouton
                readButton.textContent = 'Stopper la lecture';

                // Lancer la lecture
                window.speechSynthesis.speak(utterance);

                // Écouter l'événement d'arrêt de la lecture pour remettre à jour le bouton
                utterance.onend = () => {
                    readButton.textContent = 'Lire le texte'; // Remettre le texte du bouton
                };
            }
        });
    </script>