Update static/js/app.js

static/js/app.js

@@ -11,12 +11,12 @@ var audioContext //audio context to help us record
 
 var recordButton = document.getElementById("recordButton");
 var stopButton = document.getElementById("stopButton");
-var pauseButton = document.getElementById("pauseButton");
+//var pauseButton = document.getElementById("pauseButton");
 
 //add events to those 2 buttons
 recordButton.addEventListener("click", startRecording);
 stopButton.addEventListener("click", stopRecording);
-pauseButton.addEventListener("click", pauseRecording);
+//pauseButton.addEventListener("click", pauseRecording);
 
 function startRecording() {
     console.log("recordButton clicked");
@@ -34,7 +34,7 @@ function startRecording() {
 
     recordButton.disabled = true;
     stopButton.disabled = false;
-    pauseButton.disabled = false
+    //pauseButton.disabled = false
 
     /*
         We're using the standard promise based getUserMedia() 
@@ -75,23 +75,23 @@ function startRecording() {
         //enable the record button if getUserMedia() fails
         recordButton.disabled = false;
         stopButton.disabled = true;
-        pauseButton.disabled = true
+        //pauseButton.disabled = true
     });
 }
 
-function pauseRecording() {
-    console.log("pauseButton clicked rec.recording=", rec.recording);
-    if (rec.recording) {
-        //pause
-        rec.stop();
-        pauseButton.innerHTML = "Resume";
-    } else {
-        //resume
-        rec.record()
-        pauseButton.innerHTML = "Pause";
+//function pauseRecording() {
+//    console.log("pauseButton clicked rec.recording=", rec.recording);
+//    if (rec.recording) {
+//        //pause
+//        rec.stop();
+//        pauseButton.innerHTML = "Resume";
+//    } else {
+//        //resume
+//        rec.record()
+//        pauseButton.innerHTML = "Pause";
 
-    }
-}
+//    }
+//}
 
 function stopRecording() {
     console.log("stopButton clicked");
@@ -99,10 +99,10 @@ function stopRecording() {
     //disable the stop button, enable the record too allow for new recordings
     stopButton.disabled = true;
     recordButton.disabled = false;
-    pauseButton.disabled = true;
+    //pauseButton.disabled = true;
 
     //reset button just in case the recording is stopped while paused
-    pauseButton.innerHTML = "Pause";
+    //pauseButton.innerHTML = "Pause";
 
     //tell the recorder to stop the recording
     rec.stop();
@@ -111,108 +111,112 @@ function stopRecording() {
     gumStream.getAudioTracks()[0].stop();
 
     //create the wav blob and pass it on to createDownloadLink
-    rec.exportWAV(createDownloadLink);
-}
-
-function createDownloadLink(blob) {
-
-    var url = URL.createObjectURL(blob);
-    var au = document.createElement('audio');
-    var li = document.createElement('li');
-    var link = document.createElement('a');
-
-    //name of .wav file to use during upload and download (without extendion)
-    var filename = new Date().toISOString();
-
-    //add controls to the <audio> element
-    au.controls = true;
-    au.src = url;
-
-    //save to disk link
-    link.href = url;
-    link.download = filename + ".wav"; //download forces the browser to donwload the file using the  filename
-    link.innerHTML = "Save to disk";
-
-    //add the new audio element to li
-    li.appendChild(au);
-
-    //add the filename to the li
-    li.appendChild(document.createTextNode(filename + ".wav "))
-
-    //add the save to disk link to li
-    li.appendChild(link);
-
-    //upload link
-    var upload = document.createElement('a');
-    upload.href = "#";
-    upload.innerHTML = "Upload";
-    upload.addEventListener("click", function (event) {
-        var xhr = new XMLHttpRequest();
-        xhr.onload = function (e) {
-            if (this.readyState === 4) {
-                console.log("Server returned: ", e.target.responseText);
-            }
-        };
-
-        // Supongamos que "data" es una cadena de bytes en formato WAV
-        var formData = new FormData();
-        // Supongamos que "audioBlob" es un objeto Blob que contiene el audio WAV
-        formData.append("audio_data", blob, "archivo.wav");
-        xhr.open("POST", "/escuchar_trauma", true);
-        console.log("POST")
-        xhr.onreadystatechange = function () {
-            if (xhr.readyState === 4 && xhr.status === 200) {
-                // Manejar la respuesta del servidor
-                console.log("Respuesta del servidor:", xhr.responseText);
-                ////////////////////////////////////////////////////////
-                // Muestra el resultado del reconocimiento en el cuadro de texto
-                //document.getElementById("responseTextBox").value = xhr.responseText;
-                // Buscar el contenido dentro de las etiquetas <p></p>
-                //var parser = new DOMParser();
-                //var responseHTML = parser.parseFromString(xhr.responseText, 'text/html');
-                /*var paragraphContent = responseHTML.querySelector('p').textContent;*/
-
-                // Muestra el resultado del reconocimiento en el cuadro de texto
-                //document.getElementById("responseTextBox").value = paragraphContent;
-                // Muestra el resultado del reconocimiento como texto plano
-                //var textElement = document.getElementById("textElement"); // Reemplaza "textElement" con el ID adecuado
-                //textElement.textContent = paragraphContent;
-                //////////////////////////////////////////////////////////
-            }
-        };
-        xhr.send(formData);
-
-        //////////////////////////////////////////
-       
-
-        // 4. This will be called after the response is received
-        xhr.onload = function () {
-            if (xhr.status != 200) {
-                // analyze HTTP status of the response
-                alert(`Error ${xhr.status}: ${xhr.statusText}`);
-                // e.g. 404: Not Found
-            } else { // show the result
-                $('body').html(xhr.response)
-            }
-        };
-
-
-
-
-        ///////////////////////////////////////////
-
-
-
-
-    })
-    li.appendChild(document.createTextNode(" "))//add a space in between
-    li.appendChild(upload)//add the upload link to li
-
-    //add the li element to the ol
-    recordingsList.appendChild(li);
-
+    //rec.exportWAV(createDownloadLink);
+    // Exportar los datos de audio como un Blob una vez que la grabaci�n haya finalizado
+    rec.exportWAV(function (blob) {
+        // La funci�n de devoluci�n de llamada se llama con el Blob que contiene los datos de audio en formato WAV
+        // Puedes utilizar este Blob como desees, por ejemplo, crear una URL para descargarlo
+        var url = URL.createObjectURL(blob);
+
+        // Puedes utilizar audioUrl para reproducir o descargar el archivo de audio
+        /////////////////////////////////////////////////////////////////////////
+        //var url = URL.createObjectURL(blob);
+        var au = document.createElement('audio');
+        var li = document.createElement('li');
+        var link = document.createElement('a');
+
+        //name of .wav file to use during upload and download (without extendion)
+        var filename = new Date().toISOString();
+
+        //add controls to the <audio> element
+        au.controls = true;
+        au.src = url;
+
+        //save to disk link
+        link.href = url;
+        link.download = filename + ".wav"; //download forces the browser to donwload the file using the  filename
+        link.innerHTML = "Save to disk";
+
+        //add the new audio element to li
+        li.appendChild(au);
+
+        //add the filename to the li
+        li.appendChild(document.createTextNode(filename + ".wav "))
+
+        //add the save to disk link to li
+        li.appendChild(link);
+
+        //upload link
+        var upload = document.createElement('a');
+        upload.href = "#";
+        upload.innerHTML = "Upload";
+        //upload.addEventListener("click", function (event) {
+            var xhr = new XMLHttpRequest();
+            xhr.onload = function (e) {
+                if (this.readyState === 4) {
+                    console.log("Server returned: ", e.target.responseText);
+                }
+            };
+
+            // Supongamos que "data" es una cadena de bytes en formato WAV
+            var formData = new FormData();
+            // Supongamos que "audioBlob" es un objeto Blob que contiene el audio WAV
+            formData.append("audio_data", blob, "archivo.wav");
+            xhr.open("POST", "/escuchar_trauma", true);
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4 && xhr.status === 200) {
+                    // Manejar la respuesta del servidor
+                    console.log("Respuesta del servidor:", xhr.responseText);
+                    ////////////////////////////////////////////////////////
+                    // Muestra el resultado del reconocimiento en el cuadro de texto
+                    //document.getElementById("responseTextBox").value = xhr.responseText;
+                    // Buscar el contenido dentro de las etiquetas <p></p>
+                    //var parser = new DOMParser();
+                    //var responseHTML = parser.parseFromString(xhr.responseText, 'text/html');
+                    /*var paragraphContent = responseHTML.querySelector('p').textContent;*/
+
+                    // Muestra el resultado del reconocimiento en el cuadro de texto
+                    //document.getElementById("responseTextBox").value = paragraphContent;
+                    // Muestra el resultado del reconocimiento como texto plano
+                    //var textElement = document.getElementById("textElement"); // Reemplaza "textElement" con el ID adecuado
+                    //textElement.textContent = paragraphContent;
+                    //////////////////////////////////////////////////////////
+                }
+            };
+            xhr.send(formData);
+
+            //////////////////////////////////////////
+
+
+            // 4. This will be called after the response is received
+            xhr.onload = function () {
+                if (xhr.status != 200) {
+                    // analyze HTTP status of the response
+                    alert(`Error ${xhr.status}: ${xhr.statusText}`);
+                    // e.g. 404: Not Found
+                } else { // show the result
+                    $('body').html(xhr.response)
+                }
+            };
+
+
+
+
+            ///////////////////////////////////////////
+
+
+
+
+        //});
+        //li.appendChild(document.createTextNode(" "))//add a space in between
+        //li.appendChild(upload)//add the upload link to li
+
+        //add the li element to the ol
+        recordingsList.appendChild(li);
+    });
+    
 
 
 
+}
 
-}