adrien/ChatBeta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initialisation asynchrone de la synthèse vaocale

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-01-18 14:50:37 +01:00
parent e2f57ebb65
commit 9782288596
1 changed files with 56 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
index.html
View File

@@ -14,7 +14,7 @@
<meta property="og:locale" content="fr_FR" />
<style>
body {
--vph: "100dvh";
--vph: "100vh";
display: flex;
flex-direction: column;
min-height: var(--vph);
@@ -68,7 +68,7 @@ body > main {
<header>
<nav class="container">
<h1>Chat<small><em>βeta</em><span style="color: #9B2318">*</span></small></h1>
<button id="bouton_synthese_vocale" type="button" class="outline" style="display: none;">🕨</button>
<button id="bouton_synthese_vocale" type="button" class="secondary style="display: none;">🕨</button>
</nav>
</header>
<main class="container overflow-auto" id="conversation">
@@ -77,7 +77,7 @@ body > main {
<footer class="container">
<form id="formulaire" action="question.php" method="post" role="group">
<textarea id="question" name="question" placeholder="Ma question" required></textarea>
<button type="submit">Envoyer</button>
<button id="bouton_envoyer" type="submit">Envoyer</button>
</form>
</footer>
<dialog id="boite_synthese_vocale">
@@ -85,7 +85,7 @@ body > main {
<header>
<button id="bouton_fermer" aria-label="Close" rel="prev"></button>
<p>
<strong>🕨 Synthèse vocale</strong>
<strong>🕪 Synthèse vocale</strong>
</p>
</header>
<form>
@@ -104,54 +104,68 @@ body > main {
</dialog>
<script>
const formulaire = document.getElementById('formulaire');
const bouton = document.querySelector('button[type="submit"]');
const bouton_envoyer = document.getElementById('bouton_envoyer');
const conversation = document.getElementById('conversation');
const question = document.getElementById('question');
const bouton_synthese_vocale = document.getElementById('bouton_synthese_vocale');
const boite_synthese_vocale = document.getElementById('boite_synthese_vocale');
const select_voix = document.getElementById('select_voix');
const aphone = select_voix.innerHTML;
const bouton_fermer = document.getElementById('bouton_fermer');
const bouton_annuler = document.getElementById('bouton_annuler');
const bouton_ok = document.getElementById('bouton_ok');
const footer = document.querySelector('footer');
const langue = "fr-FR";
const langue = document.documentElement.lang;
let voix = null;
if ('speechSynthesis' in window) {
let liste_voix = speechSynthesis.getVoices().filter(voice => voice.lang === langue);
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;
speechSynthesis.onvoiceschanged = function() {
let liste_voix = speechSynthesis.getVoices().filter(voice => voice.lang.startsWith(langue));
select_voix.innerHTML = aphone;
if (!liste_voix.length) {
bouton_synthese_vocale.style.display = 'none';
return;
}
})
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.style.display = 'block';
bouton_synthese_vocale.addEventListener('click', () => {
boite_synthese_vocale.showModal();
});
bouton_synthese_vocale.style.display = 'block';
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 = "🕨";
}
});
}
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);
} else {
voix = null;
window.localStorage.removeItem('voix');
}
});
speechSynthesis.onvoiceschanged()
}
question.addEventListener('keydown', e => {
@@ -167,10 +181,10 @@ body > main {
formulaire.addEventListener('submit', async (e) => {
e.preventDefault();
if (bouton.disabled == true) return;
if (bouton_envoyer.disabled == true) return;
bouton.disabled = true;
bouton.setAttribute("aria-busy", true)
bouton_envoyer.disabled = true;
bouton_envoyer.setAttribute("aria-busy", true)
const formulaireData = new FormData(formulaire);
const citation = document.createElement('article');
citation.innerText = formulaireData.get('question');
@@ -211,8 +225,8 @@ body > main {
setTimeout(() => {
conversation.innerHTML += '<p class="reponse">Voulez-vous que je réponde à une autre question ?</p>';
conversation.scrollTop = conversation.scrollHeight;
bouton.disabled = false;
bouton.setAttribute("aria-busy", false);
bouton_envoyer.disabled = false;
bouton_envoyer.setAttribute("aria-busy", false);
question.focus()
}, t);
})