reconnaissance vocale
This commit is contained in:
File diff suppressed because it is too large
Load Diff
55
index.html
55
index.html
@@ -62,9 +62,13 @@ body > main {
|
|||||||
content: "😸 ";
|
content: "😸 ";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#bouton_reconnaissance_vocale {
|
||||||
|
padding: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
#bouton_synthese_vocale,
|
#bouton_synthese_vocale,
|
||||||
#formulaire{
|
#formulaire {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user