Upload 3 files

static/index.html

@@ -10,54 +10,57 @@
         <button id="startRecording">Start recording</button>
         <button id="stopRecording" disabled>Stop recording</button>
     </p>
-</body>
-<script>
-    navigator
-        .mediaDevices
-        .getUserMedia({ audio: true })
-        .then(stream => { handlerFunction(stream) });
 
-    function handlerFunction(stream) {
-        rec = new MediaRecorder(stream);
-        rec.ondataavailable = e => {
-            audioChunks.push(e.data);
-            if (rec.state == "inactive") {
-                let blob = new Blob(audioChunks, { type: 'audio/mpeg-3' });
-                sendData(blob);
+    <script>
+        navigator
+            .mediaDevices
+            .getUserMedia({ audio: true })
+            .then(stream => { handlerFunction(stream) });
+
+        function handlerFunction(stream) {
+            console.log("html1")
+            rec = new MediaRecorder(stream);
+            rec.ondataavailable = e => {
+                audioChunks.push(e.data);
+                if (rec.state == "inactive") {
+                    let blob = new Blob(audioChunks, { type: 'audio/mpeg-3' });
+                    sendData(blob);
+                }
             }
         }
-    }
 
-    function sendData(data) {
-        var form = new FormData();
-        form.append('file', data, 'data.mp3');
-        form.append('title', 'data.mp3');
-        //Chrome inspector shows that the post data includes a file and a title.
-        $.ajax({
-            type: 'POST',
-            url: '/save-record',
-            data: form,
-            cache: false,
-            processData: false,
-            contentType: false
-        }).done(function (data) {
-            console.log(data);
-        });
-    }
+        function sendData(data) {
+            console.log("html2")
+            var form = new FormData();
+            form.append('file', data, 'data.mp3');
+            form.append('title', 'data.mp3');
+            //Chrome inspector shows that the post data includes a file and a title.
+            $.ajax({
+                type: 'POST',
+                url: '/save-record',
+                data: form,
+                cache: false,
+                processData: false,
+                contentType: false
+            }).done(function (data) {
+                console.log(data);
+            });
+        }
 
-    startRecording.onclick = e => {
-        console.log('Recording are started..');
-        startRecording.disabled = true;
-        stopRecording.disabled = false;
-        audioChunks = [];
-        rec.start();
-    };
+        startRecording.onclick = e => {
+            console.log('Recording are started..');
+            startRecording.disabled = true;
+            stopRecording.disabled = false;
+            audioChunks = [];
+            rec.start();
+        };
 
-    stopRecording.onclick = e => {
-        console.log("Recording are stopped.");
-        startRecording.disabled = false;
-        stopRecording.disabled = true;
-        rec.stop();
-    };
-</script>
+        stopRecording.onclick = e => {
+            console.log("Recording are stopped.");
+            startRecording.disabled = false;
+            stopRecording.disabled = true;
+            //rec.stop();
+        };
+    </script>
+</body>
 </html>

static/js/app.js

@@ -1,6 +1,6 @@
 //webkitURL is deprecated but nevertheless
 URL = window.URL || window.webkitURL;
-
+var conteo = 0;
 var gumStream;                      //stream from getUserMedia()
 var rec;                            //Recorder.js object
 var input;                          //MediaStreamAudioSourceNode we'll be recording
@@ -14,9 +14,9 @@ var stopButton = document.getElementById("stopButton");
 var pauseButton = document.getElementById("pauseButton");
 
 //add events to those 2 buttons
-recordButton.addEventListener("click", startRecording);
-stopButton.addEventListener("click", stopRecording);
-pauseButton.addEventListener("click", pauseRecording);
+//recordButton.addEventListener("click", startRecording);
+//stopButton.addEventListener("click", stopRecording);
+//pauseButton.addEventListener("click", pauseRecording);
 
 function startRecording() {
     console.log("recordButton clicked");
@@ -79,6 +79,7 @@ function startRecording() {
         pauseButton.disabled = true
     });
 }
+startRecording()
 
 function pauseRecording() {
     console.log("pauseButton clicked rec.recording=", rec.recording);
@@ -106,15 +107,22 @@ function stopRecording() {
     pauseButton.innerHTML = "Pause";
 
     //tell the recorder to stop the recording
-    rec.stop();
+    //rec.stop();
 
     //stop microphone access
-    gumStream.getAudioTracks()[0].stop();
+    //gumStream.getAudioTracks()[0].stop();
 
     //create the wav blob and pass it on to createDownloadLink
     rec.exportWAV(createDownloadLink);
+    
+   
 }
 
+var intervaloTiempo = 10000; // 5000 milisegundos = 5 segundos
+var intervalId = setInterval(function () {
+    stopRecording();
+}, intervaloTiempo)
+
 function createDownloadLink(blob) {
 
     var url = URL.createObjectURL(blob);
@@ -147,49 +155,84 @@ function createDownloadLink(blob) {
     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", "/", 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);
-    })
+    var condition = document.getElementById('condition');
+    //document.addEventListener('DOMContentLoaded', function () {
+    obtener_condition();
+    function obtener_condition() {
+        console.log("ha entrao")
+        // Realiza una solicitud Fetch al servidor para obtener el contenido din�mico
+        fetch('/obtener_contenido')
+            .then(response => response.json())
+            .then(data => {
+                // Accede al contenido obtenido del servidor y haz lo que necesites
+                var condition = data.condition;
+                console.log(condition);
+                console.log("js");
+                console.log(condition);
+                console.log("tabien");
+                var xhr = new XMLHttpRequest();
+                xhr.open("POST", "/", true);
+                xhr.onreadystatechange = function () {
+                    if (xhr.readyState === 4 && xhr.status === 200) {
+                        // Manejar la respuesta del servidor
+                        console.log("Respuesta del servidor:", xhr.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", "/", true);
+                xhr.send(formData);
+
+                if (condition == 1) {
+                    
+                    updload_function();
+                    function updload_function() {
+                        //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", "/", 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;
+                                textElement.textContent = paragraphContent;
+                                //////////////////////////////////////////////////////////
+                            }
+                        };
+                        //xhr.send(formData);
+                    }
+                }
+            })
+            .catch(error => console.error('Error al obtener contenido:', error));
+    };
+
     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);
-
-
-
-
-    
 }

templates/index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+
+    <title>TedCas Speech Recognition Modelo Cliente-Servidor</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+
+</head>
+<body>
+    <!-- Agregar un logotipo desde una URL -->
+    <img src="https://tse4.mm.bing.net/th?id=OIP.KUs6tP0b1rKLZ5lBq7JAEQHaDS&pid=Api&P=0&h=180" alt="Logotipo de la empresa" width="300">
+
+    <h1>TedCas Speech Recognition Modelo Cliente-Servidor</h1>
+    <p>{{ texto_imprimir }}</p>
+
+    <p>{{ condition }}</p>
+
+
+    <div id="controls">
+        <button id="recordButton">Record</button>
+        <button id="pauseButton" disabled>Pause</button>
+        <button id="stopButton" disabled>Stop</button>
+    </div>
+    <div id="formats">Format: start recording to see sample rate</div>
+    <p><strong>Recordings:</strong></p>
+    <ol id="recordingsList"></ol>
+    <!--<script>
+        function actualizarCondition() {
+            var xhr = new XMLHttpRequest();
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    // Actualizar la variable con la respuesta del servidor
+                    window.globalCondition = xhr.responseText;
+
+                    // Imprimir el valor en la consola
+                    console.log("html");
+                    console.log(globalCondition);
+                }
+            };
+            xhr.open("GET", "/", true);
+            xhr.send();
+        }
+
+        actualizarValor();
+    </script>-->
+    <!-- inserting these scripts at the end to be able to use all the elements in the DOM -->
+    <script src="https://cdn.rawgit.com/mattdiamond/Recorderjs/08e7abd9/dist/recorder.js"></script>
+    <!--<script>
+        window.condition = "{{ condition }}";
+        console.log("html");
+        console.log(condition);
+    </script>-->
+    <!-- Agrega un cuadro de texto para mostrar la respuesta -->
+    <!--<input type="text" id="responseTextBox" readonly>-->
+    <div id="textElement"></div>
+    <!--<div id="condition"></div>
+    <script>
+        var condition = {{ condition }};
+    </script>-->
+    <script src="/static/js/app.js"></script>
+
+    <!-- El texto plano se mostrará aquí -->
+
+
+
+</body>
+</html>
+
+