�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

Vue hybride

Discussions similaires

Partager

Partager