Spaces:

tx3bas
/

speech

Running

App Files Files Community

tx3bas commited on Sep 30, 2024

Commit

8a6feed

verified ·

1 Parent(s): 63ee8e5

Update index.html

Browse files

Files changed (1) hide show

index.html +117 -67

index.html CHANGED Viewed

@@ -8,13 +8,33 @@
         textarea {
             width: 100%;
             height: 150px;
         }
         button {
-            padding: 10px;
-            margin: 10px 5px;
             cursor: pointer;
         }
     </style>
 </head>
 <body>
     <h3>Text to Speech - Google Español</h3>
@@ -25,7 +45,8 @@
     <button id="pause">Pausar</button>
     <button id="resume">Reanudar</button>
     <button id="cancel">Cancelar</button>
-    <button id="download" style="display:none;">Descargar Audio</button>
     <script>
         // Verifica si el navegador soporta las APIs necesarias
@@ -33,88 +54,117 @@
             alert("Tu navegador no soporta las APIs necesarias para esta función.");
         }
-        let tts = new SpeechSynthesisUtterance();
-        let voices = [];
-        let audioChunks = [];
         let mediaRecorder;
-        let audioBlob;
-        // 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 = 1;  // 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.");
-            }
-        };
-        // Inicializa MediaRecorder usando un AudioContext
-        async function initMediaRecorder() {
-            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-            const dest = audioContext.createMediaStreamDestination();
-            const source = audioContext.createMediaStreamSource(dest.stream);
-            // Conecta la salida de speechSynthesis al AudioContext
-            const synth = window.speechSynthesis;
-            const synthNode = audioContext.createMediaStreamSource(dest.stream);
-            synth.resume(); // Asegura que speechSynthesis esté activo
-            // Crea MediaRecorder para grabar el audio
-            mediaRecorder = new MediaRecorder(dest.stream);
-            mediaRecorder.ondataavailable = (event) => {
-                if (event.data.size > 0) {
-                    audioChunks.push(event.data);
                 }
-            };
-            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 reproducir el habla y grabar
-        async function speakAndRecord(text) {
-            await initMediaRecorder();
-            mediaRecorder.start();
-            tts.text = text;
-            window.speechSynthesis.speak(tts);
-            tts.onend = () => {
                 mediaRecorder.stop();
-            };
         }
         // Manejo de eventos de los botones
-        document.getElementById("speak").addEventListener("click", () => {
-            const text = document.getElementById("lines").value;
-            audioChunks = [];
-            document.getElementById("download").style.display = "none";
-            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>

         textarea {
             width: 100%;
             height: 150px;
+            padding: 10px;
+            font-size: 16px;
+            box-sizing: border-box;
         }
         button {
+            padding: 10px 20px;
+            margin: 10px 5px 0 0;
+            font-size: 16px;
             cursor: pointer;
         }
+        #download {
+            display: none;
+            padding: 10px 20px;
+            background-color: #4CAF50;
+            color: white;
+            text-decoration: none;
+            border-radius: 5px;
+            margin-top: 10px;
+            display: inline-block;
+        }
+        #status {
+            margin-top: 10px;
+            font-weight: bold;
+        }
     </style>
+    <!-- Incluir ResponsiveVoice -->
+    <script src="https://code.responsivevoice.org/responsivevoice.js?key=PCQ3lKHt"></script>
 </head>
 <body>
     <h3>Text to Speech - Google Español</h3>
     <button id="pause">Pausar</button>
     <button id="resume">Reanudar</button>
     <button id="cancel">Cancelar</button>
+    <a id="download" href="#" download="tts_audio.webm">Descargar Audio</a>
+    <div id="status"></div>
     <script>
         // Verifica si el navegador soporta las APIs necesarias
             alert("Tu navegador no soporta las APIs necesarias para esta función.");
         }
+        let chunks = [];
         let mediaRecorder;
+        let stream;
+        // Referencias a elementos del DOM
+        const speakBtn = document.getElementById("speak");
+        const pauseBtn = document.getElementById("pause");
+        const resumeBtn = document.getElementById("resume");
+        const cancelBtn = document.getElementById("cancel");
+        const downloadLink = document.getElementById("download");
+        const statusDiv = document.getElementById("status");
+        // Función para iniciar la captura de audio
+        async function startCapture() {
+            try {
+                statusDiv.textContent = "Solicitando permisos para capturar audio...";
+                // Solicitar captura de audio de la pestaña actual
+                stream = await navigator.mediaDevices.getDisplayMedia({
+                    audio: true,
+                    video: false // Intentar capturar solo audio
+                });
+                // Verificar si se capturó audio
+                if (stream.getAudioTracks().length === 0) {
+                    throw new Error("No se capturó ningún audio.");
                 }
+                // Crear MediaRecorder para capturar el audio
+                mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
+                mediaRecorder.ondataavailable = function(e) {
+                    if (e.data.size > 0) {
+                        chunks.push(e.data);
+                    }
+                };
+                mediaRecorder.onstop = function() {
+                    const blob = new Blob(chunks, { type: "audio/webm" });
+                    const url = URL.createObjectURL(blob);
+                    downloadLink.href = url;
+                    downloadLink.style.display = "inline-block";
+                    statusDiv.textContent = "Grabación completada. Puedes descargar el audio.";
+                    // Limpiar chunks para futuras grabaciones
+                    chunks = [];
+                    // Detener todas las pistas de audio
+                    stream.getAudioTracks().forEach(track => track.stop());
+                };
+                // Iniciar la grabación
+                mediaRecorder.start();
+                statusDiv.textContent = "Grabación iniciada. Generando audio...";
+            } catch (err) {
+                console.error("Error al capturar el audio:", err);
+                alert("No se pudo capturar el audio. Asegúrate de conceder los permisos necesarios.");
+                statusDiv.textContent = "Error al capturar el audio.";
+            }
+        }
+        // Función para detener la captura de audio
+        function stopCapture() {
+            if (mediaRecorder && mediaRecorder.state !== "inactive") {
                 mediaRecorder.stop();
+                statusDiv.textContent = "Deteniendo la grabación...";
+            }
+        }
+        // Función para hablar y grabar
+        function hablarYGrabar() {
+            const text = document.getElementById("lines").value.trim();
+            if (text === "") {
+                alert("Por favor, ingresa algún texto para convertir a voz.");
+                return;
+            }
+            // Iniciar la captura de audio
+            startCapture().then(() => {
+                // Iniciar la síntesis de voz
+                statusDiv.textContent = "Reproduciendo el audio...";
+                responsiveVoice.speak(text, "Spanish Latin American Female", {
+                    onend: function() {
+                        // Detener la grabación al finalizar la síntesis
+                        stopCapture();
+                    }
+                });
+            });
         }
         // Manejo de eventos de los botones
+        speakBtn.addEventListener("click", () => {
+            // Limpiar estados anteriores
+            downloadLink.style.display = "none";
+            downloadLink.href = "#";
+            statusDiv.textContent = "";
+            hablarYGrabar();
         });
+        pauseBtn.addEventListener("click", () => {
             window.speechSynthesis.pause();
+            statusDiv.textContent = "Grabación y reproducción pausadas.";
         });
+        resumeBtn.addEventListener("click", () => {
             window.speechSynthesis.resume();
+            statusDiv.textContent = "Grabación y reproducción reanudadas.";
         });
+        cancelBtn.addEventListener("click", () => {
             window.speechSynthesis.cancel();
+            stopCapture();
+            statusDiv.textContent = "Grabación y reproducción canceladas.";
         });
     </script>
 </body>