ascenseur

index.html

@@ -63,7 +63,14 @@ body > main {
 }
 
 #bouton_reconnaissance_vocale {
-    padding: 0.7rem;
+    padding: 0;
+    width: 3rem;
+    margin-left: -3rem;
+    border: none;
+}
+
+#bouton_envoyer {
+    padding: 1.5rem;
 }
 
 @media print {
@@ -82,7 +89,7 @@ body > main {
                 <button id="bouton_synthese_vocale" type="button" class="secondary" style="display: none;" disabled>🔈</button>
             </nav>
         </header>
-        <main class="container overflow-auto" id="conversation">
+        <main class="container" id="conversation">
             <p class="reponse">Posez-moi toutes vos questions !</p>
         </main>
         <footer class="container">
@@ -102,7 +109,7 @@ body > main {
                 </header>
                 <form>
                     <fieldset>
-                        <label>Voix disponibles :</label>
+                        <label for="select_voix">Voix disponibles :</label>
                         <select id="select_voix">
                             <option value="">Pas de synthèse vocale</option>
                         </select>
@@ -129,86 +136,6 @@ body > main {
 const footer = document.querySelector('footer');
 const langue = document.documentElement.lang;
 
-            let voix = null;
-            function charger_voix() {
-                let liste_voix = speechSynthesis.getVoices().filter(voice => voice.lang.startsWith(langue));
-                select_voix.innerHTML = aphone;
-                
-                if (!liste_voix.length) {
-                    bouton_synthese_vocale.disabled = true;
-                    speechSynthesis.addEventListener('voiceschanged', charger_voix);
-                    return;
-                }
-
-                speechSynthesis.removeEventListener('voiceschanged', charger_voix);
-                liste_voix.forEach((v, i) => {
-                    const option = document.createElement('option');
-                    option.value = i;
-                    option.innerText = v.name;
-                    select_voix.appendChild(option);
-                    if (v.voiceURI === window.localStorage.getItem('voix')) {
-                        select_voix.value = i;
-                        voix = v;
-                        option.selected = true;
-                        bouton_synthese_vocale.innerHTML = "🔊";
-                    }
-                })
-            
-                bouton_synthese_vocale.disabled = false;
-                bouton_synthese_vocale.addEventListener('click', () => {
-                    boite_synthese_vocale.showModal();
-                });
-                bouton_fermer.addEventListener('click', () => {
-                    boite_synthese_vocale.close();
-                });
-                bouton_annuler.addEventListener('click', () => {
-                    boite_synthese_vocale.close();
-                });
-                bouton_ok.addEventListener('click', () => {
-                    boite_synthese_vocale.close();
-                    if (select_voix.value) {
-                        voix = liste_voix[select_voix.value];
-                        window.localStorage.setItem('voix', voix.voiceURI);
-                        bouton_synthese_vocale.innerHTML = "🔊";
-                    } else {
-                        voix = null;
-                        window.localStorage.removeItem('voix');
-                        bouton_synthese_vocale.innerHTML = "🔈";
-                    }
-                });
-            }
-            if ('speechSynthesis' in window) {
-                bouton_synthese_vocale.style.display = 'block';
-                charger_voix();
-            }
-
-            var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-            if (SpeechRecognition) {
-                bouton_reconnaissance_vocale.addEventListener('click', () => {
-                    const reconnaissance= new SpeechRecognition();
-                    reconnaissance.lang = langue;
-                    bouton_reconnaissance_vocale_inner_HTML = bouton_reconnaissance_vocale.innerHTML
-                    bouton_reconnaissance_vocale.innerHTML = ""
-                    bouton_reconnaissance_vocale.setAttribute("aria-busy", true)
-                    reconnaissance.addEventListener('result', (event) => {
-                        const transcript = event.results[0][0].transcript;
-                        question.value = transcript;
-                        formulaire.requestSubmit()
-                    });
-                    reconnaissance.addEventListener('speechend', () => {
-                        reconnaissance.stop();
-                        bouton_reconnaissance_vocale.setAttribute("aria-busy", false)
-                        bouton_reconnaissance_vocale.innerHTML = bouton_reconnaissance_vocale_inner_HTML
-                    });
-                    reconnaissance.addEventListener('error', (event) => {
-                        bouton_reconnaissance_vocale.setAttribute("aria-busy", false)
-                        bouton_reconnaissance_vocale.innerHTML = bouton_reconnaissance_vocale_inner_HTML
-                    });
-                    reconnaissance.start();
-                });
-                bouton_reconnaissance_vocale.style.display = 'block';
-            }
-
 question.addEventListener('keydown', e => {
     if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
         e.preventDefault();
@@ -262,12 +189,15 @@ body > main {
             } else {
                 paragraphe.innerHTML += lettre;
             }
-                        conversation.scrollTop = conversation.scrollHeight;
+            paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' });
         }, t += 100 * Math.random());
     });
     setTimeout(() => {
-                    conversation.innerHTML += '<p class="reponse">Voulez-vous que je réponde à une autre question ?</p>';
+        const paragraphe = document.createElement('p');
-                    conversation.scrollTop = conversation.scrollHeight;
+        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;
@@ -275,6 +205,92 @@ body > main {
     }, t);
 })
 
+// Synthèse vocale
+let voix = null;
+function charger_voix() {
+    let liste_voix = speechSynthesis.getVoices(); // .filter(voice => voice.lang.startsWith(langue));
+    select_voix.innerHTML = aphone;
+    
+    if (!liste_voix.length) {
+        bouton_synthese_vocale.disabled = true;
+        speechSynthesis.addEventListener('voiceschanged', charger_voix);
+        return;
+    }
+
+    speechSynthesis.removeEventListener('voiceschanged', charger_voix);
+    liste_voix.forEach((v, i) => {
+        const option = document.createElement('option');
+        option.value = i;
+        option.innerText = v.name;
+        select_voix.appendChild(option);
+        if (v.voiceURI === window.localStorage.getItem('voix')) {
+            select_voix.value = i;
+            voix = v;
+            option.selected = true;
+            bouton_synthese_vocale.innerHTML = "🔊";
+        }
+    })
+
+    bouton_synthese_vocale.disabled = false;
+    bouton_synthese_vocale.addEventListener('click', () => {
+        boite_synthese_vocale.showModal();
+    });
+    bouton_fermer.addEventListener('click', () => {
+        boite_synthese_vocale.close();
+    });
+    bouton_annuler.addEventListener('click', () => {
+        boite_synthese_vocale.close();
+    });
+    bouton_ok.addEventListener('click', () => {
+        boite_synthese_vocale.close();
+        if (select_voix.value) {
+            voix = liste_voix[select_voix.value];
+            window.localStorage.setItem('voix', voix.voiceURI);
+            bouton_synthese_vocale.innerHTML = "🔊";
+        } else {
+            voix = null;
+            window.localStorage.removeItem('voix');
+            bouton_synthese_vocale.innerHTML = "🔈";
+        }
+    });
+}
+if ('speechSynthesis' in window) {
+    bouton_synthese_vocale.style.display = 'block';
+    charger_voix();
+}
+
+// Reconnaissance vocale
+var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+if (SpeechRecognition) {
+    bouton_reconnaissance_vocale.addEventListener('click', () => {
+        const reconnaissance= new SpeechRecognition();
+        reconnaissance.lang = langue;
+        reconnaissance.continuous = false;
+        reconnaissance.interimResults = false;
+        reconnaissance.maxAlternatives = 1;
+        bouton_reconnaissance_vocale_inner_HTML = bouton_reconnaissance_vocale.innerHTML
+        bouton_reconnaissance_vocale.innerHTML = ""
+        bouton_reconnaissance_vocale.setAttribute("aria-busy", true)
+
+        reconnaissance.addEventListener('result', (event) => {
+            const transcript = event.results[0][0].transcript;
+            question.value = transcript;
+            if (!bouton_envoyer.disabled) formulaire.requestSubmit()
+        });
+        reconnaissance.onspeechend = 
+        reconnaissance.onerror = 
+        reconnaissance.onnomatch = function () {
+            reconnaissance.stop();
+            bouton_reconnaissance_vocale.setAttribute("aria-busy", false)
+            bouton_reconnaissance_vocale.innerHTML = bouton_reconnaissance_vocale_inner_HTML
+        };
+        
+        reconnaissance.start();
+    });
+    bouton_reconnaissance_vocale.style.display = 'block';
+}
+
+// Adaptation au clavier virtuel du téléphone
 function onResize() {
     document.body.style.setProperty("--vph", `${window.visualViewport.height}px`);
     conversation.scrollTop = conversation.scrollHeight;
@@ -282,7 +298,6 @@ body > main {
 window.visualViewport?.addEventListener('resize', onResize);
 window.addEventListener('resize', onResize);
 onResize();
-
         </script>
     </body>