voix_selectionnee

index.html

@@ -63,17 +63,12 @@ body > main {
     content: "😸 ";
 }
 
-/*#question {
-    padding-right: 2rem;
-}*/
-
 #bouton_reconnaissance_vocale {
     position: absolute;
     right: 0;
     width: 2rem;
     height: 100%;
     padding-left: 0;
-    padding-right: 0.5rem;
     border: none;
     z-index: 10;
 }
@@ -122,7 +117,7 @@ body > main {
                     <fieldset>
                         <label for="select_voix">Voix disponibles :</label>
                         <select id="select_voix">
-                            <option value="">Pas de synthèse vocale</option>
+                            <option value="" selected>Pas de synthèse vocale</option>
                         </select>
                     </fieldset>
                 </form>
@@ -146,6 +141,8 @@ const bouton_annuler = document.getElementById('bouton_annuler');
 const bouton_ok = document.getElementById('bouton_ok');
 const footer = document.querySelector('footer');
 const langue = document.documentElement.lang;
+
+let voix_selectionnee = null;
 let utterance = null;
 
 question.onkeydown = function(e) {
@@ -187,7 +184,7 @@ formulaire.addEventListener('submit', async (e) => {
     const reponse = await requete.text();
     paragraphe.setAttribute('aria-busy', 'false');
 
-    if (utterance?.voice) {
+    if (voix_selectionnee) {
         utterance.text = reponse;
         speechSynthesis.speak(utterance);
     }
@@ -232,27 +229,19 @@ function charger_voix() {
 
     speechSynthesis.removeEventListener('voiceschanged', charger_voix);
     
-    utterance = new SpeechSynthesisUtterance();
-    utterance.lang = langue;
-    utterance.rate = 1;
-    
     liste_voix.forEach((voix, i) => {
         const option = document.createElement('option');
         option.value = i;
-        option.textContent = `${voix.name} (${voix.lang})`;
+        option.textContent = voix.name;
         select_voix.appendChild(option);
-        if (voix.voiceURI === window.localStorage.getItem('voix')) {
+        if (voix.voiceURI === voix_selectionnee) {
+            option.selected = true;
             select_voix.value = i;
             utterance.voice = voix;
-            option.selected = true;
             bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-up-fill"></i>`;
         }
     })
 
-    bouton_synthese_vocale.disabled = false;
-    bouton_synthese_vocale.onclick = function() {
-        boite_synthese_vocale.showModal();
-    };
     bouton_fermer.onclick = bouton_annuler.onclick = function() {
         boite_synthese_vocale.close();
     };
@@ -261,18 +250,30 @@ function charger_voix() {
         if (select_voix.value) {
             let voix = liste_voix[select_voix.value];
             utterance.voice = voix;
-            window.localStorage.setItem('voix', voix.voiceURI);
+            voix_selectionnee = voix.voiceURI;
+            window.localStorage.setItem('voiceURI', voix.voiceURI);
             bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-up-fill"></i>`;
         } else {
-            utterance.voice = null;
-            window.localStorage.removeItem('voix');
+            voix_selectionnee = null;
+            window.localStorage.removeItem('voiceURI');
             bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-off-fill"></i>`;
         }
     };
+    bouton_synthese_vocale.onclick = function() {
+        boite_synthese_vocale.showModal();
+    };
+    bouton_synthese_vocale.disabled = false;
 }
+
 if ('speechSynthesis' in window) {
-    bouton_synthese_vocale.style.display = 'block';
+    voix_selectionnee = window.localStorage.getItem('voiceURI');
+
+    utterance = new SpeechSynthesisUtterance();
+    utterance.lang = langue;
+    utterance.rate = 1;
+
     charger_voix();
+    bouton_synthese_vocale.style.display = 'block';
 }
 
 // Reconnaissance vocale