Update index.html

index.html

@@ -24,18 +24,21 @@
     <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;
 
         // 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
@@ -51,12 +54,40 @@
             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();
+            const destination = audioContext.createMediaStreamDestination();
+            const utteranceStream = audioContext.createMediaStreamSource(destination.stream);
+            mediaRecorder = new MediaRecorder(destination.stream);
+
+            tts.onstart = () => {
+                mediaRecorder.start();
+                audioChunks = [];
+            };
+
+            mediaRecorder.ondataavailable = (event) => {
+                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 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
             }
         }
 
@@ -66,7 +97,8 @@
         };
 
         // Función para empezar a hablar el texto ingresado
-        document.getElementById("speak").addEventListener("click", () => {
+        document.getElementById("speak").addEventListener("click", async () => {
+            await initMediaRecorder(); // Inicializamos la grabación
             let text = document.getElementById("lines").value;
             paragraphs = splitIntoParagraphs(text);
             currentParagraph = 0;
@@ -86,6 +118,7 @@
         // Cancelar el discurso
         document.getElementById("cancel").addEventListener("click", () => {
             window.speechSynthesis.cancel();
+            mediaRecorder.stop();
         });
     </script>
 </body>