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

reconnaissance vocale

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-01-19 14:59:28 +01:00
parent f0d735e220
commit 4821285a00
2 changed files with 134 additions and 1204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
index.html
View File

@@ -62,9 +62,13 @@ body > main {
content: "😸 ";
}
#bouton_reconnaissance_vocale {
padding: 0.7rem;
}
@media print {
#bouton_synthese_vocale,
#formulaire{
#formulaire {
display: none !important;
}
}
@@ -75,7 +79,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="secondary style="display: none;">🕨</button>
<button id="bouton_synthese_vocale" type="button" class="secondary" style="display: none;" disabled>🔈</button>
</nav>
</header>
<main class="container overflow-auto" id="conversation">
@@ -84,6 +88,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 id="bouton_reconnaissance_vocale" type="button" class="outline secondary" style="display: none;">🎙️</button>
<button id="bouton_envoyer" type="submit">?</button>
</form>
</footer>
@@ -92,12 +97,12 @@ 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>
<fieldset>
<label>Voix disponibles</label>
<label>Voix disponibles :</label>
<select id="select_voix">
<option value="">Pas de synthèse vocale</option>
</select>
@@ -130,7 +135,7 @@ body > main {
select_voix.innerHTML = aphone;
if (!liste_voix.length) {
bouton_synthese_vocale.style.display = 'none';
bouton_synthese_vocale.disabled = true;
speechSynthesis.addEventListener('voiceschanged', charger_voix);
return;
}
@@ -145,11 +150,11 @@ body > main {
select_voix.value = i;
voix = v;
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', () => {
boite_synthese_vocale.showModal();
});
@@ -164,15 +169,45 @@ body > main {
if (select_voix.value) {
voix = liste_voix[select_voix.value];
window.localStorage.setItem('voix', voix.voiceURI);
bouton_synthese_vocale.innerHTML = "🕪";
bouton_synthese_vocale.innerHTML = "🔊";
} else {
voix = null;
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 => {
if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {