JPLTedCas commited on
Commit
af3f30b
1 Parent(s): 955765b

Update static/js/app.js

Browse files
Files changed (1) hide show
  1. static/js/app.js +123 -119
static/js/app.js CHANGED
@@ -11,12 +11,12 @@ var audioContext //audio context to help us record
11
 
12
  var recordButton = document.getElementById("recordButton");
13
  var stopButton = document.getElementById("stopButton");
14
- var pauseButton = document.getElementById("pauseButton");
15
 
16
  //add events to those 2 buttons
17
  recordButton.addEventListener("click", startRecording);
18
  stopButton.addEventListener("click", stopRecording);
19
- pauseButton.addEventListener("click", pauseRecording);
20
 
21
  function startRecording() {
22
  console.log("recordButton clicked");
@@ -34,7 +34,7 @@ function startRecording() {
34
 
35
  recordButton.disabled = true;
36
  stopButton.disabled = false;
37
- pauseButton.disabled = false
38
 
39
  /*
40
  We're using the standard promise based getUserMedia()
@@ -75,23 +75,23 @@ function startRecording() {
75
  //enable the record button if getUserMedia() fails
76
  recordButton.disabled = false;
77
  stopButton.disabled = true;
78
- pauseButton.disabled = true
79
  });
80
  }
81
 
82
- function pauseRecording() {
83
- console.log("pauseButton clicked rec.recording=", rec.recording);
84
- if (rec.recording) {
85
- //pause
86
- rec.stop();
87
- pauseButton.innerHTML = "Resume";
88
- } else {
89
- //resume
90
- rec.record()
91
- pauseButton.innerHTML = "Pause";
92
 
93
- }
94
- }
95
 
96
  function stopRecording() {
97
  console.log("stopButton clicked");
@@ -99,10 +99,10 @@ function stopRecording() {
99
  //disable the stop button, enable the record too allow for new recordings
100
  stopButton.disabled = true;
101
  recordButton.disabled = false;
102
- pauseButton.disabled = true;
103
 
104
  //reset button just in case the recording is stopped while paused
105
- pauseButton.innerHTML = "Pause";
106
 
107
  //tell the recorder to stop the recording
108
  rec.stop();
@@ -111,108 +111,112 @@ function stopRecording() {
111
  gumStream.getAudioTracks()[0].stop();
112
 
113
  //create the wav blob and pass it on to createDownloadLink
114
- rec.exportWAV(createDownloadLink);
115
- }
116
-
117
- function createDownloadLink(blob) {
118
-
119
- var url = URL.createObjectURL(blob);
120
- var au = document.createElement('audio');
121
- var li = document.createElement('li');
122
- var link = document.createElement('a');
123
-
124
- //name of .wav file to use during upload and download (without extendion)
125
- var filename = new Date().toISOString();
126
-
127
- //add controls to the <audio> element
128
- au.controls = true;
129
- au.src = url;
130
-
131
- //save to disk link
132
- link.href = url;
133
- link.download = filename + ".wav"; //download forces the browser to donwload the file using the filename
134
- link.innerHTML = "Save to disk";
135
-
136
- //add the new audio element to li
137
- li.appendChild(au);
138
-
139
- //add the filename to the li
140
- li.appendChild(document.createTextNode(filename + ".wav "))
141
-
142
- //add the save to disk link to li
143
- li.appendChild(link);
144
-
145
- //upload link
146
- var upload = document.createElement('a');
147
- upload.href = "#";
148
- upload.innerHTML = "Upload";
149
- upload.addEventListener("click", function (event) {
150
- var xhr = new XMLHttpRequest();
151
- xhr.onload = function (e) {
152
- if (this.readyState === 4) {
153
- console.log("Server returned: ", e.target.responseText);
154
- }
155
- };
156
-
157
- // Supongamos que "data" es una cadena de bytes en formato WAV
158
- var formData = new FormData();
159
- // Supongamos que "audioBlob" es un objeto Blob que contiene el audio WAV
160
- formData.append("audio_data", blob, "archivo.wav");
161
- xhr.open("POST", "/escuchar_trauma", true);
162
- console.log("POST")
163
- xhr.onreadystatechange = function () {
164
- if (xhr.readyState === 4 && xhr.status === 200) {
165
- // Manejar la respuesta del servidor
166
- console.log("Respuesta del servidor:", xhr.responseText);
167
- ////////////////////////////////////////////////////////
168
- // Muestra el resultado del reconocimiento en el cuadro de texto
169
- //document.getElementById("responseTextBox").value = xhr.responseText;
170
- // Buscar el contenido dentro de las etiquetas <p></p>
171
- //var parser = new DOMParser();
172
- //var responseHTML = parser.parseFromString(xhr.responseText, 'text/html');
173
- /*var paragraphContent = responseHTML.querySelector('p').textContent;*/
174
-
175
- // Muestra el resultado del reconocimiento en el cuadro de texto
176
- //document.getElementById("responseTextBox").value = paragraphContent;
177
- // Muestra el resultado del reconocimiento como texto plano
178
- //var textElement = document.getElementById("textElement"); // Reemplaza "textElement" con el ID adecuado
179
- //textElement.textContent = paragraphContent;
180
- //////////////////////////////////////////////////////////
181
- }
182
- };
183
- xhr.send(formData);
184
-
185
- //////////////////////////////////////////
186
-
187
-
188
- // 4. This will be called after the response is received
189
- xhr.onload = function () {
190
- if (xhr.status != 200) {
191
- // analyze HTTP status of the response
192
- alert(`Error ${xhr.status}: ${xhr.statusText}`);
193
- // e.g. 404: Not Found
194
- } else { // show the result
195
- $('body').html(xhr.response)
196
- }
197
- };
198
-
199
-
200
-
201
-
202
- ///////////////////////////////////////////
203
-
204
-
205
-
206
-
207
- })
208
- li.appendChild(document.createTextNode(" "))//add a space in between
209
- li.appendChild(upload)//add the upload link to li
210
-
211
- //add the li element to the ol
212
- recordingsList.appendChild(li);
213
-
 
 
 
 
214
 
215
 
216
 
 
217
 
218
- }
 
11
 
12
  var recordButton = document.getElementById("recordButton");
13
  var stopButton = document.getElementById("stopButton");
14
+ //var pauseButton = document.getElementById("pauseButton");
15
 
16
  //add events to those 2 buttons
17
  recordButton.addEventListener("click", startRecording);
18
  stopButton.addEventListener("click", stopRecording);
19
+ //pauseButton.addEventListener("click", pauseRecording);
20
 
21
  function startRecording() {
22
  console.log("recordButton clicked");
 
34
 
35
  recordButton.disabled = true;
36
  stopButton.disabled = false;
37
+ //pauseButton.disabled = false
38
 
39
  /*
40
  We're using the standard promise based getUserMedia()
 
75
  //enable the record button if getUserMedia() fails
76
  recordButton.disabled = false;
77
  stopButton.disabled = true;
78
+ //pauseButton.disabled = true
79
  });
80
  }
81
 
82
+ //function pauseRecording() {
83
+ // console.log("pauseButton clicked rec.recording=", rec.recording);
84
+ // if (rec.recording) {
85
+ // //pause
86
+ // rec.stop();
87
+ // pauseButton.innerHTML = "Resume";
88
+ // } else {
89
+ // //resume
90
+ // rec.record()
91
+ // pauseButton.innerHTML = "Pause";
92
 
93
+ // }
94
+ //}
95
 
96
  function stopRecording() {
97
  console.log("stopButton clicked");
 
99
  //disable the stop button, enable the record too allow for new recordings
100
  stopButton.disabled = true;
101
  recordButton.disabled = false;
102
+ //pauseButton.disabled = true;
103
 
104
  //reset button just in case the recording is stopped while paused
105
+ //pauseButton.innerHTML = "Pause";
106
 
107
  //tell the recorder to stop the recording
108
  rec.stop();
 
111
  gumStream.getAudioTracks()[0].stop();
112
 
113
  //create the wav blob and pass it on to createDownloadLink
114
+ //rec.exportWAV(createDownloadLink);
115
+ // Exportar los datos de audio como un Blob una vez que la grabaci�n haya finalizado
116
+ rec.exportWAV(function (blob) {
117
+ // La funci�n de devoluci�n de llamada se llama con el Blob que contiene los datos de audio en formato WAV
118
+ // Puedes utilizar este Blob como desees, por ejemplo, crear una URL para descargarlo
119
+ var url = URL.createObjectURL(blob);
120
+
121
+ // Puedes utilizar audioUrl para reproducir o descargar el archivo de audio
122
+ /////////////////////////////////////////////////////////////////////////
123
+ //var url = URL.createObjectURL(blob);
124
+ var au = document.createElement('audio');
125
+ var li = document.createElement('li');
126
+ var link = document.createElement('a');
127
+
128
+ //name of .wav file to use during upload and download (without extendion)
129
+ var filename = new Date().toISOString();
130
+
131
+ //add controls to the <audio> element
132
+ au.controls = true;
133
+ au.src = url;
134
+
135
+ //save to disk link
136
+ link.href = url;
137
+ link.download = filename + ".wav"; //download forces the browser to donwload the file using the filename
138
+ link.innerHTML = "Save to disk";
139
+
140
+ //add the new audio element to li
141
+ li.appendChild(au);
142
+
143
+ //add the filename to the li
144
+ li.appendChild(document.createTextNode(filename + ".wav "))
145
+
146
+ //add the save to disk link to li
147
+ li.appendChild(link);
148
+
149
+ //upload link
150
+ var upload = document.createElement('a');
151
+ upload.href = "#";
152
+ upload.innerHTML = "Upload";
153
+ //upload.addEventListener("click", function (event) {
154
+ var xhr = new XMLHttpRequest();
155
+ xhr.onload = function (e) {
156
+ if (this.readyState === 4) {
157
+ console.log("Server returned: ", e.target.responseText);
158
+ }
159
+ };
160
+
161
+ // Supongamos que "data" es una cadena de bytes en formato WAV
162
+ var formData = new FormData();
163
+ // Supongamos que "audioBlob" es un objeto Blob que contiene el audio WAV
164
+ formData.append("audio_data", blob, "archivo.wav");
165
+ xhr.open("POST", "/escuchar_trauma", true);
166
+ xhr.onreadystatechange = function () {
167
+ if (xhr.readyState === 4 && xhr.status === 200) {
168
+ // Manejar la respuesta del servidor
169
+ console.log("Respuesta del servidor:", xhr.responseText);
170
+ ////////////////////////////////////////////////////////
171
+ // Muestra el resultado del reconocimiento en el cuadro de texto
172
+ //document.getElementById("responseTextBox").value = xhr.responseText;
173
+ // Buscar el contenido dentro de las etiquetas <p></p>
174
+ //var parser = new DOMParser();
175
+ //var responseHTML = parser.parseFromString(xhr.responseText, 'text/html');
176
+ /*var paragraphContent = responseHTML.querySelector('p').textContent;*/
177
+
178
+ // Muestra el resultado del reconocimiento en el cuadro de texto
179
+ //document.getElementById("responseTextBox").value = paragraphContent;
180
+ // Muestra el resultado del reconocimiento como texto plano
181
+ //var textElement = document.getElementById("textElement"); // Reemplaza "textElement" con el ID adecuado
182
+ //textElement.textContent = paragraphContent;
183
+ //////////////////////////////////////////////////////////
184
+ }
185
+ };
186
+ xhr.send(formData);
187
+
188
+ //////////////////////////////////////////
189
+
190
+
191
+ // 4. This will be called after the response is received
192
+ xhr.onload = function () {
193
+ if (xhr.status != 200) {
194
+ // analyze HTTP status of the response
195
+ alert(`Error ${xhr.status}: ${xhr.statusText}`);
196
+ // e.g. 404: Not Found
197
+ } else { // show the result
198
+ $('body').html(xhr.response)
199
+ }
200
+ };
201
+
202
+
203
+
204
+
205
+ ///////////////////////////////////////////
206
+
207
+
208
+
209
+
210
+ //});
211
+ //li.appendChild(document.createTextNode(" "))//add a space in between
212
+ //li.appendChild(upload)//add the upload link to li
213
+
214
+ //add the li element to the ol
215
+ recordingsList.appendChild(li);
216
+ });
217
+
218
 
219
 
220
 
221
+ }
222