1 seule occurence d'utterance

index.html

@@ -150,6 +150,7 @@ const bouton_ok = document.getElementById('bouton_ok');
 const footer = document.querySelector('footer');
 const langue = document.documentElement.lang;
 let voix = null;
+let utterance = null;
 
 question.onkeydown = function(e) {
     if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
@@ -160,7 +161,7 @@ question.onkeydown = function(e) {
 
 question.onfocus = function() {
     window.onresize;
-    question.scrollIntoView({ block: 'end', behavior: 'auto' });
+    question.scrollIntoView({ block: 'start', behavior: 'auto' });
 };
 
 formulaire.addEventListener('submit', async (e) => {
@@ -190,13 +191,11 @@ formulaire.addEventListener('submit', async (e) => {
     const reponse = await requete.text();
     paragraphe.setAttribute('aria-busy', 'false');
 
-    if (voix) {
-        const utterance = new SpeechSynthesisUtterance(reponse);
-        utterance.lang = langue;
-        utterance.voice = voix;
-        utterance.rate = 1;
+    if (utterance?.voice) {
+        utterance.text = reponse;
         speechSynthesis.speak(utterance);
     }
+
     let t = 0;
     Array.from(reponse).forEach((lettre, i) => {
         setTimeout(() => {
@@ -205,7 +204,7 @@ formulaire.addEventListener('submit', async (e) => {
             } else {
                 paragraphe.innerHTML += lettre;
             }
-            paragraphe.scrollIntoView({ block: 'end', behavior: 'auto' });
+            paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' });
         }, t += 100 * Math.random());
     });
     setTimeout(() => {
@@ -213,6 +212,7 @@ formulaire.addEventListener('submit', async (e) => {
         paragraphe.classList.add('reponse');
         paragraphe.innerHTML = 'Voulez-vous que je réponde à une autre question ?';
         conversation.appendChild(paragraphe);
+        paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' });
         bouton_envoyer.disabled = false;
         bouton_envoyer.setAttribute("aria-busy", false);
         bouton_envoyer.innerHTML = bouton_envoyer_innerHTML;
@@ -235,14 +235,18 @@ function charger_voix() {
     }
 
     speechSynthesis.removeEventListener('voiceschanged', charger_voix);
-    liste_voix.forEach((v, i) => {
+    utterance = new SpeechSynthesisUtterance();
+    utterance.lang = langue;
+    utterance.rate = 1;
+    speechSynthesis.speak(utterance);
+    liste_voix.forEach((voix, i) => {
         const option = document.createElement('option');
         option.value = i;
-        option.textContent = `${v.name} (${v.lang})`;
+        option.textContent = `${voix.name} (${voix.lang})`;
         select_voix.appendChild(option);
-        if (v.voiceURI === window.localStorage.getItem('voix')) {
+        if (voix.voiceURI === window.localStorage.getItem('voix')) {
             select_voix.value = i;
-            voix = v;
+            utterance.voice = voix;
             option.selected = true;
             bouton_synthese_vocale.innerHTML = "🔊";
         }
@@ -258,11 +262,12 @@ function charger_voix() {
     bouton_ok.onclick = function() {
         boite_synthese_vocale.close();
         if (select_voix.value) {
-            voix = liste_voix[select_voix.value];
+            let voix = liste_voix[select_voix.value];
+            utterance.voice = voix;
             window.localStorage.setItem('voix', voix.voiceURI);
             bouton_synthese_vocale.innerHTML = "🔊";
         } else {
-            voix = null;
+            utterance.voice = null;
             window.localStorage.removeItem('voix');
             bouton_synthese_vocale.innerHTML = "🔈";
         }