|
|
<!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> |
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
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."); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
function dividirTexto(texto) { |
|
|
return texto.match(/[^.!?]+[.!?]+/g) || [texto]; |
|
|
} |
|
|
|
|
|
|
|
|
function reproducirSiguienteFragmento() { |
|
|
if (currentFragment < fragments.length) { |
|
|
tts.text = fragments[currentFragment].trim(); |
|
|
window.speechSynthesis.speak(tts); |
|
|
currentFragment++; |
|
|
} else { |
|
|
|
|
|
mediaRecorder.stop(); |
|
|
} |
|
|
} |
|
|
|
|
|
async function speakAndRecord(text) { |
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
const videoTracks = stream.getVideoTracks(); |
|
|
videoTracks.forEach(track => { |
|
|
track.stop(); |
|
|
stream.removeTrack(track); |
|
|
}); |
|
|
|
|
|
|
|
|
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'; |
|
|
}; |
|
|
|
|
|
|
|
|
mediaRecorder.start(); |
|
|
|
|
|
|
|
|
fragments = dividirTexto(text); |
|
|
currentFragment = 0; |
|
|
|
|
|
|
|
|
reproducirSiguienteFragmento(); |
|
|
} |
|
|
|
|
|
|
|
|
tts.onend = () => { |
|
|
reproducirSiguienteFragmento(); |
|
|
}; |
|
|
|
|
|
|
|
|
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> |
|
|
|
