Évènement ne s'exécute pas tout de suite
Bonsoir,
N'étant pas expert javascript, j'ai besoin de lumière, après avoir passer la journée dessus au travail, ce problème m'obsède, sans comprendre pourquoi le code agit ainsi. l'événement est exécuté à la fin d'une fonction.
je peux avoir plusieurs zone de saisie vocale, chacune a un "bouton" (image de micro)
mon but est de pouvoir stopper la saisie vocal sois via le même bouton, sois en cliquant sur le bouton d'une autre zone (désactivation de la saisie en cours et démarrage de la nouvelle).
Merci d'avance !
HTML (à la base se dernier est généré via Asp.Net)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
| <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="js/vocal3.js"></script>
<style>
body{
}
.pbloc{
background-color:lightgray;
padding:4px;
}
.talkbloc{
display:grid;
grid-gap:4px;
grid-template-columns:1fr;
}
.talkbloc_header{
display:grid;
grid-gap:4px;
grid-template-columns:auto 1fr;
background-color:burlywood;
}
.talkbloc_header .icoMic{
cursor:pointer;
}
.talkbloc_main{
background-color:gainsboro;
}
.talkbloc_main .iterim{
font-style:italic;
}
.talkbloc_main .finaltalk
{
width: 100%;
box-sizing: border-box;
resize: none;
}
.talkbloc_footer{
display:grid;
grid-gap:4px;
grid-template-columns:1fr 1fr;
}
.talkbloc_footer .l{
}
.talkbloc_footer .r{
}
</style>
</head>
<body>
<form method="post" action="./Default.aspx" id="form1">
<div id="p1" class="pbloc talkbloc">
<div id="pTalkHeader1" class="talkbloc_header">
<img id="mic1" class="icoMic" src="Images/micOff.png" />
<div class="msg" >informations</div>
</div>
<div id="pTalkMain1" class="talkbloc_main">
<span id="ltalk_interim1" class="interim"></span>
<textarea name="tbTalk" rows="10" cols="20" id="tbTalk" class="finaltalk">
</textarea>
</div>
<div id="pTalkFooter1" class="talkbloc_footer">
<div id="pfooterl" class="l">
<input type="submit" name="btClearTalk" value="Effacer" id="btClearTalk" />
</div>
<div id="Panel1" class="r">
<input type="submit" name="btValidationTalk" value="Valider" id="btValidationTalk" />
</div>
</div>
</div>
<hr />Autre zone<br />
<div id="Panel2" class="pbloc talkbloc">
<div id="Panel3" class="talkbloc_header">
<img id="Image1" class="icoMic" src="Images/micOff.png" />
<div class="msg" >informations</div>
</div>
<div id="Panel4" class="talkbloc_main">
<span id="Label1" class="interim"></span>
<textarea name="TextBox1" rows="10" cols="20" id="TextBox1" class="finaltalk">
</textarea>
</div>
<div id="Panel5" class="talkbloc_footer">
<div id="Panel6" class="l">
<input type="submit" name="Button1" value="Effacer" id="Button1" />
</div>
<div id="Panel7" class="r">
<input type="submit" name="Button2" value="Valider" id="Button2" />
</div>
</div>
</div>
</form>
</body>
</html> |
le code js (je suis en pur javascript), j'ai essayé de séparé en mettant une fonction "stopMic" à part pour voir, mais même résultat.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| var activeButton;
var talkbloc;
var msgbloc;
var interimbloc;
var finalbloc;
var recognition;
var recognizing = false;
var myFunction = function () {
if (recognizing && activeButton == this)
stopMic();
else if (recognizing && activeButton != this)
stopMic();
activeButton = this;
talkbloc = this.parentNode.parentNode;
msgbloc = talkbloc.querySelector('.msg');
interimbloc = talkbloc.querySelector('.interim');
finalbloc = talkbloc.querySelector('.finaltalk');
recognition.start();
};
function stopMic(){
recognition.stop();
}
window.addEventListener("DOMContentLoaded", () => {
const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
if (typeof SpeechRecognition !== "undefined") {
recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function () {
//alert('Start');
recognizing = true;
msgbloc.innerHTML = 'A votre écoute';
};
recognition.onend = function () {
//alert('End');
recognizing = false;
msgbloc.innerHTML = 'l\'écoute est arrêté';
};
recognition.onresult = event => {
let interimTranscript = '';
finalbloc.innerHTML = "";
for (const res of event.results) {
let transcript = res[0].transcript;
if (res.isFinal) {
finalbloc.innerHTML += transcript;
interimbloc.innerHTML = '';
interimTranscript = '';
}
else
interimTranscript += transcript;
}
interimbloc.innerHTML = interimTranscript;
};
recognition.onerror = function (event) {
alert('error ' + event.error);
}
}
document.querySelectorAll('.icoMic').forEach(item => {
item.addEventListener('click', myFunction, false);
})
}); |
