Update static/js/app.js

static/js/app.js

@@ -111,11 +111,9 @@ function stopRecording() {
     gumStream.getAudioTracks()[0].stop();
 
     //create the wav blob and pass it on to createDownloadLink
-    rec.exportWAV(createDownloadLink);
-}
+    //rec.exportWAV(createDownloadLink);
     // Exportar los datos de audio como un Blob una vez que la grabaci n haya finalizado
-    //rec.exportWAV(function (blob) {
-    function createDownloadLink (blob) {
+    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);
@@ -153,7 +151,6 @@ function stopRecording() {
         upload.href = "#";
         upload.innerHTML = "Upload";
         //upload.addEventListener("click", function (event) {
-    
             var xhr = new XMLHttpRequest();
             xhr.onload = function (e) {
                 if (this.readyState === 4) {
@@ -169,30 +166,30 @@ function stopRecording() {
             xhr.onreadystatechange = function () {
                 if (xhr.readyState === 4 && xhr.status === 200) {
                     // Manejar la respuesta del servidor
-                    //console.log("Respuesta del servidor:", xhr.responseText);
+                    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;
+                    //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;
+                    //var textElement = document.getElementById("textElement"); // Reemplaza "textElement" con el ID adecuado
+                    //textElement.textContent = paragraphContent;
                     //////////////////////////////////////////////////////////
                 }
             };
-            //xhr.send(formData);
-            
+            xhr.send(formData);
+
             //////////////////////////////////////////
 
 
             // 4. This will be called after the response is received
-            /*xhr.onload = function () {
+            xhr.onload = function () {
                 if (xhr.status != 200) {
                     // analyze HTTP status of the response
                     alert(`Error ${xhr.status}: ${xhr.statusText}`);
@@ -201,7 +198,7 @@ function stopRecording() {
                     $('body').html(xhr.response)
                 }
             };
-*/
+
 
 
 
@@ -211,17 +208,116 @@ function stopRecording() {
 
 
         //});
-        li.appendChild(document.createTextNode(" "))//add a space in between
-        li.appendChild(upload)//add the upload link to li
+        //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);
-    //});
-}
+    });
     
 
 
 
+}
+
+//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);
+//        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);
+
+
 
 
 
+//}