diff --git a/index.html b/index.html
index c2b5735..4ddfab2 100644
--- a/index.html
+++ b/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) => {
@@ -189,14 +190,12 @@ formulaire.addEventListener('submit', async (e) => {
paragraphe.setAttribute('aria-busy', 'true');
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 = "🔈";
}