voix_selectionnee
This commit is contained in:
45
index.html
45
index.html
@@ -63,17 +63,12 @@ body > main {
|
|||||||
content: "😸 ";
|
content: "😸 ";
|
||||||
}
|
}
|
||||||
|
|
||||||
/*#question {
|
|
||||||
padding-right: 2rem;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
#bouton_reconnaissance_vocale {
|
#bouton_reconnaissance_vocale {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0.5rem;
|
|
||||||
border: none;
|
border: none;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
@@ -122,7 +117,7 @@ body > main {
|
|||||||
<fieldset>
|
<fieldset>
|
||||||
<label for="select_voix">Voix disponibles :</label>
|
<label for="select_voix">Voix disponibles :</label>
|
||||||
<select id="select_voix">
|
<select id="select_voix">
|
||||||
<option value="">Pas de synthèse vocale</option>
|
<option value="" selected>Pas de synthèse vocale</option>
|
||||||
</select>
|
</select>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
@@ -146,6 +141,8 @@ const bouton_annuler = document.getElementById('bouton_annuler');
|
|||||||
const bouton_ok = document.getElementById('bouton_ok');
|
const bouton_ok = document.getElementById('bouton_ok');
|
||||||
const footer = document.querySelector('footer');
|
const footer = document.querySelector('footer');
|
||||||
const langue = document.documentElement.lang;
|
const langue = document.documentElement.lang;
|
||||||
|
|
||||||
|
let voix_selectionnee = null;
|
||||||
let utterance = null;
|
let utterance = null;
|
||||||
|
|
||||||
question.onkeydown = function(e) {
|
question.onkeydown = function(e) {
|
||||||
@@ -187,7 +184,7 @@ formulaire.addEventListener('submit', async (e) => {
|
|||||||
const reponse = await requete.text();
|
const reponse = await requete.text();
|
||||||
paragraphe.setAttribute('aria-busy', 'false');
|
paragraphe.setAttribute('aria-busy', 'false');
|
||||||
|
|
||||||
if (utterance?.voice) {
|
if (voix_selectionnee) {
|
||||||
utterance.text = reponse;
|
utterance.text = reponse;
|
||||||
speechSynthesis.speak(utterance);
|
speechSynthesis.speak(utterance);
|
||||||
}
|
}
|
||||||
@@ -232,27 +229,19 @@ function charger_voix() {
|
|||||||
|
|
||||||
speechSynthesis.removeEventListener('voiceschanged', charger_voix);
|
speechSynthesis.removeEventListener('voiceschanged', charger_voix);
|
||||||
|
|
||||||
utterance = new SpeechSynthesisUtterance();
|
|
||||||
utterance.lang = langue;
|
|
||||||
utterance.rate = 1;
|
|
||||||
|
|
||||||
liste_voix.forEach((voix, i) => {
|
liste_voix.forEach((voix, i) => {
|
||||||
const option = document.createElement('option');
|
const option = document.createElement('option');
|
||||||
option.value = i;
|
option.value = i;
|
||||||
option.textContent = `${voix.name} (${voix.lang})`;
|
option.textContent = voix.name;
|
||||||
select_voix.appendChild(option);
|
select_voix.appendChild(option);
|
||||||
if (voix.voiceURI === window.localStorage.getItem('voix')) {
|
if (voix.voiceURI === voix_selectionnee) {
|
||||||
|
option.selected = true;
|
||||||
select_voix.value = i;
|
select_voix.value = i;
|
||||||
utterance.voice = voix;
|
utterance.voice = voix;
|
||||||
option.selected = true;
|
|
||||||
bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-up-fill"></i>`;
|
bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-up-fill"></i>`;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
bouton_synthese_vocale.disabled = false;
|
|
||||||
bouton_synthese_vocale.onclick = function() {
|
|
||||||
boite_synthese_vocale.showModal();
|
|
||||||
};
|
|
||||||
bouton_fermer.onclick = bouton_annuler.onclick = function() {
|
bouton_fermer.onclick = bouton_annuler.onclick = function() {
|
||||||
boite_synthese_vocale.close();
|
boite_synthese_vocale.close();
|
||||||
};
|
};
|
||||||
@@ -261,18 +250,30 @@ function charger_voix() {
|
|||||||
if (select_voix.value) {
|
if (select_voix.value) {
|
||||||
let voix = liste_voix[select_voix.value];
|
let voix = liste_voix[select_voix.value];
|
||||||
utterance.voice = voix;
|
utterance.voice = voix;
|
||||||
window.localStorage.setItem('voix', voix.voiceURI);
|
voix_selectionnee = voix.voiceURI;
|
||||||
|
window.localStorage.setItem('voiceURI', voix.voiceURI);
|
||||||
bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-up-fill"></i>`;
|
bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-up-fill"></i>`;
|
||||||
} else {
|
} else {
|
||||||
utterance.voice = null;
|
voix_selectionnee = null;
|
||||||
window.localStorage.removeItem('voix');
|
window.localStorage.removeItem('voiceURI');
|
||||||
bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-off-fill"></i>`;
|
bouton_synthese_vocale.innerHTML = `<i class="bi bi-volume-off-fill"></i>`;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
bouton_synthese_vocale.onclick = function() {
|
||||||
|
boite_synthese_vocale.showModal();
|
||||||
|
};
|
||||||
|
bouton_synthese_vocale.disabled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ('speechSynthesis' in window) {
|
if ('speechSynthesis' in window) {
|
||||||
bouton_synthese_vocale.style.display = 'block';
|
voix_selectionnee = window.localStorage.getItem('voiceURI');
|
||||||
|
|
||||||
|
utterance = new SpeechSynthesisUtterance();
|
||||||
|
utterance.lang = langue;
|
||||||
|
utterance.rate = 1;
|
||||||
|
|
||||||
charger_voix();
|
charger_voix();
|
||||||
|
bouton_synthese_vocale.style.display = 'block';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reconnaissance vocale
|
// Reconnaissance vocale
|
||||||
|
|||||||
Reference in New Issue
Block a user