reconnaissance vocale

This commit is contained in:
2026-01-19 14:59:28 +01:00
parent f0d735e220
commit 4821285a00
2 changed files with 134 additions and 1204 deletions

File diff suppressed because it is too large Load Diff

View File

@@ -62,6 +62,10 @@ body > main {
content: "😸 "; content: "😸 ";
} }
#bouton_reconnaissance_vocale {
padding: 0.7rem;
}
@media print { @media print {
#bouton_synthese_vocale, #bouton_synthese_vocale,
#formulaire { #formulaire {
@@ -75,7 +79,7 @@ body > main {
<header> <header>
<nav class="container"> <nav class="container">
<h1>Chat<small><em>βeta</em><span style="color: #9B2318">*</span></small></h1> <h1>Chat<small><em>βeta</em><span style="color: #9B2318">*</span></small></h1>
<button id="bouton_synthese_vocale" type="button" class="secondary style="display: none;">🕨</button> <button id="bouton_synthese_vocale" type="button" class="secondary" style="display: none;" disabled>🔈</button>
</nav> </nav>
</header> </header>
<main class="container overflow-auto" id="conversation"> <main class="container overflow-auto" id="conversation">
@@ -84,6 +88,7 @@ body > main {
<footer class="container"> <footer class="container">
<form id="formulaire" action="question.php" method="post" role="group"> <form id="formulaire" action="question.php" method="post" role="group">
<textarea id="question" name="question" placeholder="Ma question" required></textarea> <textarea id="question" name="question" placeholder="Ma question" required></textarea>
<button id="bouton_reconnaissance_vocale" type="button" class="outline secondary" style="display: none;">🎙️</button>
<button id="bouton_envoyer" type="submit">?</button> <button id="bouton_envoyer" type="submit">?</button>
</form> </form>
</footer> </footer>
@@ -92,12 +97,12 @@ body > main {
<header> <header>
<button id="bouton_fermer" aria-label="Close" rel="prev"></button> <button id="bouton_fermer" aria-label="Close" rel="prev"></button>
<p> <p>
<strong>🕪 Synthèse vocale</strong> <strong>🔊 Synthèse vocale</strong>
</p> </p>
</header> </header>
<form> <form>
<fieldset> <fieldset>
<label>Voix disponibles</label> <label>Voix disponibles :</label>
<select id="select_voix"> <select id="select_voix">
<option value="">Pas de synthèse vocale</option> <option value="">Pas de synthèse vocale</option>
</select> </select>
@@ -130,7 +135,7 @@ body > main {
select_voix.innerHTML = aphone; select_voix.innerHTML = aphone;
if (!liste_voix.length) { if (!liste_voix.length) {
bouton_synthese_vocale.style.display = 'none'; bouton_synthese_vocale.disabled = true;
speechSynthesis.addEventListener('voiceschanged', charger_voix); speechSynthesis.addEventListener('voiceschanged', charger_voix);
return; return;
} }
@@ -145,11 +150,11 @@ body > main {
select_voix.value = i; select_voix.value = i;
voix = v; voix = v;
option.selected = true; option.selected = true;
bouton_synthese_vocale.innerHTML = "🕪"; bouton_synthese_vocale.innerHTML = "🔊";
} }
}) })
bouton_synthese_vocale.style.display = 'block'; bouton_synthese_vocale.disabled = false;
bouton_synthese_vocale.addEventListener('click', () => { bouton_synthese_vocale.addEventListener('click', () => {
boite_synthese_vocale.showModal(); boite_synthese_vocale.showModal();
}); });
@@ -164,15 +169,45 @@ body > main {
if (select_voix.value) { if (select_voix.value) {
voix = liste_voix[select_voix.value]; voix = liste_voix[select_voix.value];
window.localStorage.setItem('voix', voix.voiceURI); window.localStorage.setItem('voix', voix.voiceURI);
bouton_synthese_vocale.innerHTML = "🕪"; bouton_synthese_vocale.innerHTML = "🔊";
} else { } else {
voix = null; voix = null;
window.localStorage.removeItem('voix'); window.localStorage.removeItem('voix');
bouton_synthese_vocale.innerHTML = "🕨"; bouton_synthese_vocale.innerHTML = "🔈";
} }
}); });
} }
if ('speechSynthesis' in window) charger_voix(); 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 => { question.addEventListener('keydown', e => {
if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) { if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {