File size: 5,344 Bytes
7621e24
4a67086
7621e24
 
4a67086
 
7621e24
8225c45
 
4a67086
8225c45
7621e24
ec5d246
 
7621e24
 
 
 
 
8225c45
7621e24
4a67086
7621e24
4a67086
 
 
 
 
7621e24
 
4a67086
 
 
 
 
ec5d246
422ed8c
4a67086
 
 
 
 
ec5d246
 
 
4a67086
ec5d246
 
4a67086
 
 
ec5d246
 
 
 
4a67086
 
 
 
b668356
4a67086
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ec5d246
4a67086
ec5d246
4a67086
ec5d246
 
 
 
4a67086
 
ec5d246
4a67086
 
 
 
 
 
 
 
 
 
8a6feed
4a67086
 
 
 
b668356
4a67086
 
 
 
 
7621e24
4a67086
ec5d246
7621e24
 
4a67086
ec5d246
7621e24
 
4a67086
ec5d246
7621e24
4a67086
 
 
7621e24
 
 
4a67086
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!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;
            margin: 10px 5px;
            cursor: pointer;
        }
    </style>
</head>
<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>