Spaces:

tx3bas
/

speech

Running

App Files Files Community

tx3bas commited on Sep 30, 2024

Commit

4a67086

verified ·

1 Parent(s): b668356

Update index.html

Browse files

Files changed (1) hide show

index.html +97 -65

index.html CHANGED Viewed

@@ -1,12 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Text to Speech</title>
     <style>
         textarea {
             width: 100%;
         }
         button {
             padding: 10px;
@@ -18,101 +19,132 @@
 <body>
     <h3>Text to Speech - Google Español</h3>
-    <textarea rows="9" cols="60" id="lines">Enter text here...</textarea><br>
-    <button id="speak">Speak</button>
-    <button id="pause">Pause</button>
-    <button id="resume">Resume</button>
-    <button id="cancel">Cancel</button>
-    <button id="download" style="display:none;">Download Audio</button>
     <script>
-        let tts = new SpeechSynthesisUtterance();
         let voices = [];
-        let paragraphs = [];
-        let currentParagraph = 0;
-        let audioChunks = [];
         let mediaRecorder;
-        let audioBlob;
-        let streamDestination;
         // Cargar voces y seleccionar "Google español" si está disponible
         window.speechSynthesis.onvoiceschanged = () => {
             voices = window.speechSynthesis.getVoices();
-            let selectedVoice = voices.find(voice => voice.name === "Google español");
             if (selectedVoice) {
                 tts.voice = selectedVoice;
-                tts.volume = 0.5;  // Volumen predeterminado
-                tts.rate = 1;      // Velocidad predeterminada
-                tts.pitch = 1;     // Tono predeterminado
             } else {
                 alert("La voz 'Google español' no está disponible en este navegador.");
             }
         };
-        // Función para dividir el texto en párrafos
-        function splitIntoParagraphs(text) {
-            return text.split(/(?<=[.?!])\s+/); // Divide el texto en párrafos por '.' '!' '?'
         }
-        // Inicializamos el MediaRecorder para capturar el audio
-        async function initMediaRecorder() {
-            const audioContext = new AudioContext();
-            streamDestination = audioContext.createMediaStreamDestination();
-            // Conectamos el SpeechSynthesisUtterance al MediaStreamDestination
-            const utteranceSource = audioContext.createMediaStreamSource(streamDestination.stream);
-            mediaRecorder = new MediaRecorder(streamDestination.stream);
-            // Empezamos a grabar cuando empieza el habla
-            tts.onstart = () => {
-                mediaRecorder.start();
-                audioChunks = [];
-            };
-            // Guardamos los datos de audio en chunks
-            mediaRecorder.ondataavailable = (event) => {
-                audioChunks.push(event.data);
             };
-            // Al finalizar la grabación, generamos el archivo .wav
             mediaRecorder.onstop = () => {
-                audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                 const audioUrl = URL.createObjectURL(audioBlob);
                 const downloadButton = document.getElementById("download");
                 downloadButton.style.display = "inline";
                 downloadButton.href = audioUrl;
-                downloadButton.download = 'tts_audio.wav';
             };
         }
-        // Función para hablar un párrafo
-        function speakParagraph() {
-            if (currentParagraph < paragraphs.length) {
-                tts.text = paragraphs[currentParagraph];
-                window.speechSynthesis.speak(tts);
-                currentParagraph++;
-            } else {
-                mediaRecorder.stop();  // Detenemos la grabación cuando termina el discurso
-            }
-        }
-        // Cuando termina de hablar un párrafo, habla el siguiente
-        tts.onend = function () {
-            speakParagraph();
         };
-        // Función para empezar a hablar el texto ingresado
-        document.getElementById("speak").addEventListener("click", async () => {
-            await initMediaRecorder(); // Inicializamos la grabación
-            let text = document.getElementById("lines").value;
-            paragraphs = splitIntoParagraphs(text);
-            currentParagraph = 0;
-            speakParagraph();
         });
-        // Pausar el discurso
         document.getElementById("pause").addEventListener("click", () => {
             window.speechSynthesis.pause();
         });
-        // Reanudar el discurso pausado
         document.getElementById("resume").addEventListener("click", () => {
             window.speechSynthesis.resume();
         });
-        // Cancelar el discurso
         document.getElementById("cancel").addEventListener("click", () => {
             window.speechSynthesis.cancel();
-            mediaRecorder.stop();
         });
     </script>
 </body>
-</html>

 <!DOCTYPE html>
+<html lang="es">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Text to Speech Descargar Audio</title>
     <style>
         textarea {
             width: 100%;
+            height: 150px;
         }
         button {
             padding: 10px;
 <body>
     <h3>Text to Speech - Google Español</h3>
+    <textarea id="lines" placeholder="Ingresa el texto aquí...">Hola, soy Juan. ¿Tú quién eres? No te conozco.</textarea><br>
+    <button id="speak">Hablar y Grabar</button>
+    <button id="pause">Pausar</button>
+    <button id="resume">Reanudar</button>
+    <button id="cancel">Cancelar</button>
+    <a id="download" style="display:none;">Descargar Audio</a>
     <script>
+        // Verifica si el navegador soporta las APIs necesarias
+        if (!window.speechSynthesis || !window.MediaRecorder || !navigator.mediaDevices.getDisplayMedia) {
+            alert("Tu navegador no soporta las APIs necesarias para esta función.");
+        }
         let voices = [];
         let mediaRecorder;
+        let chunks = [];
+        let tts = new SpeechSynthesisUtterance();
+        let fragments = [];
+        let currentFragment = 0;
         // Cargar voces y seleccionar "Google español" si está disponible
         window.speechSynthesis.onvoiceschanged = () => {
             voices = window.speechSynthesis.getVoices();
+            let selectedVoice = voices.find(voice => voice.lang === "es-ES" && voice.name.includes("Google"));
             if (selectedVoice) {
                 tts.voice = selectedVoice;
+                tts.volume = .8;
+                tts.rate = 1.1;
+                tts.pitch = 1;
             } else {
                 alert("La voz 'Google español' no está disponible en este navegador.");
             }
         };
+        // Función para dividir el texto en fragmentos (párrafos)
+        function dividirTexto(texto) {
+            return texto.match(/[^.!?]+[.!?]+/g) || [texto];
         }
+        // Función para reproducir el siguiente fragmento
+        function reproducirSiguienteFragmento() {
+            if (currentFragment < fragments.length) {
+                tts.text = fragments[currentFragment].trim();
+                window.speechSynthesis.speak(tts);
+                currentFragment++;
+            } else {
+                // Cuando termine de reproducir todos los fragmentos, detener la grabación
+                mediaRecorder.stop();
+            }
+        }
+        async function speakAndRecord(text) {
+            // Solicitar permisos para capturar el audio
+            let stream;
+            try {
+                stream = await navigator.mediaDevices.getDisplayMedia({ audio: true});
+            } catch (err) {
+                console.error("Error al capturar el audio:", err);
+                alert("No se pudo capturar el audio. Asegúrate de conceder los permisos necesarios.");
+                return;
+            }
+            // Eliminar las pistas de video
+            const videoTracks = stream.getVideoTracks();
+            videoTracks.forEach(track => {
+                track.stop();
+                stream.removeTrack(track);
+            });
+            // Crear MediaRecorder para capturar el audio
+            mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
+            chunks = [];
+            mediaRecorder.ondataavailable = (e) => {
+                if (e.data.size > 0) {
+                    chunks.push(e.data);
+                }
             };
             mediaRecorder.onstop = () => {
+                const audioBlob = new Blob(chunks, { type: 'audio/webm' });
                 const audioUrl = URL.createObjectURL(audioBlob);
                 const downloadButton = document.getElementById("download");
                 downloadButton.style.display = "inline";
                 downloadButton.href = audioUrl;
+                downloadButton.download = 'tts_audio.webm';
+                downloadButton.textContent = 'Descargar Audio';
             };
+            // Iniciar la grabación
+            mediaRecorder.start();
+            // Dividir el texto en fragmentos
+            fragments = dividirTexto(text);
+            currentFragment = 0;
+            // Reproducir el primer fragmento
+            reproducirSiguienteFragmento();
         }
+        // Cuando termine de hablar un fragmento, pasar al siguiente
+        tts.onend = () => {
+            reproducirSiguienteFragmento();
         };
+        // Manejo de eventos de los botones
+        document.getElementById("speak").addEventListener("click", () => {
+            const text = document.getElementById("lines").value;
+            speakAndRecord(text);
         });
         document.getElementById("pause").addEventListener("click", () => {
             window.speechSynthesis.pause();
         });
         document.getElementById("resume").addEventListener("click", () => {
             window.speechSynthesis.resume();
         });
         document.getElementById("cancel").addEventListener("click", () => {
             window.speechSynthesis.cancel();
+            if (mediaRecorder && mediaRecorder.state !== "inactive") {
+                mediaRecorder.stop();
+            }
         });
     </script>
 </body>
+</html>