Évènement ne s'exécute pas tout de suite

**conan76** · 23/04/2021, 20h44

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
    })
 
});

**NoSmoking** · 25/04/2021, 09h43

Bonjour,
cela semble dû à l'asynchronisme des méthodes liées à SpeechRecognition.

Essaies de différer l'action en faisant par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var myFunction = function() {
  if (recognizing) {
    // on stopppe
    recognition.stop();
    // si autre bouton on « reclique »
    if (activeButton !== this) {
      setTimeout(() => this.click(), 100);
    }
    return;
  }
 
  activeButton = this;
  talkbloc = this.parentNode.parentNode;
  msgbloc = talkbloc.querySelector('.msg');
  interimbloc = talkbloc.querySelector('.interim');
  finalbloc = talkbloc.querySelector('.finaltalk');
  recognition.start();
};

**conan76** · 25/04/2021, 17h43

Merci beaucoup ! cela fonctionne !

j'avais aussi conclu au fait que du code asynchrone se cachais dans SpeechRecognition.
je ne savais pas s'il fallait que je mette un await lors de la demande du stop etc... mais du coup implication sur le reste, comme en C#/vb.net

étrangement j'ai à chaque clique "la demande d'autorisation du micro par le navigateur", j''espère que c'est pas dû à cela qu'il est le temps de basculer d'une zone à l'autre.

oups, j'avais mal lu aussi ton commentaire ou je pensais qu'il ne fait que attendre, mais en fait c'est tout con, tu le fait sortir par le return et se rappeler par le clic par une pause entre temps.
c'est très logique du coup car j'avais remarqué comme je le disais qu'il fallait que je sois sortie pour que le stop soit fait, et au prochain clic ça marchais.

encore merci beaucoup !
quelques adaptation à faire de moindre mesure, ne pas effacer le contenu au reclique, sauf via le bouton. et de la mise en forme.

**NoSmoking** · 26/04/2021, 11h30

étrangement j'ai à chaque clique "la demande d'autorisation du micro par le navigateur", j''espère que c'est pas dû à cela qu'il est le temps de basculer d'une zone à l'autre.

tu ne devrais avoir cette demande qu'une seule fois si tu ouvres ta page avec un protocole autre que file:///.

Évènement ne s'exécute pas tout de suite

JavaScript

Discussions similaires

Partager

Partager