Banco de voces Karaoke de poemas
- samuel gaitan
- 3 ene
- 1 Min. de lectura
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎧 Banco de Voces Poéticas</title>
<style>
body{
background: linear-gradient(135deg,#4b0066,#001a66,#ff4da6);
font-family: Arial, sans-serif;
color: white;
text-align: center;
padding: 30px;
}
.panel{
border-radius: 20px;
padding: 20px;
background: rgba(255,255,255,0.08);
box-shadow: 0 0 20px #ffffff44;
max-width: 700px;
margin: auto;
}
button{
background: linear-gradient(90deg,#ff00ff,#00ccff,#ffd700);
border:none;
padding:12px 20px;
margin:5px;
border-radius:15px;
color:white;
font-weight:bold;
cursor:pointer;
}
select, textarea{
width:90%;
margin:10px 0;
padding:10px;
border-radius:10px;
border:none;
font-size:16px;
}
</style>
</head>
<body>
<h1>🎤 Banco de Voces – Karaoke de Poemas</h1>
<div class="panel">
<textarea id="texto" rows="6">
Te he amado desde el primer hasta el último momento,
pero adiós...
Espero que el río de la vida nos vuelva a encontrar,
dos almas viajeras, un amor eterno.
</textarea>
<br>
<select id="voces"></select>
<div>
<button onclick="reproducir()">▶ Reproducir</button>
<button onclick="pausar()">⏸ Pausar</button>
<button onclick="reanudar()">🔁 Continuar</button>
<button onclick="detener()">⏹ Detener</button>
</div>
</div>
<script>
let synth = window.speechSynthesis;
let voces = [];
let utterance = null;
function cargarVoces(){
voces = synth.getVoices();
const select = document.getElementById("voces");
select.innerHTML = "";
voces.forEach((voz, i) => {
const option = document.createElement("option");
option.value = i;
option.textContent = voz.name + " (" + voz.lang + ")";
select.appendChild(option);
});
}
// Cargar voces cuando estén disponibles
speechSynthesis.onvoiceschanged = cargarVoces;
function reproducir(){
const texto = document.getElementById("texto").value;
const vozIndex = document.getElementById("voces").value;
detener(); // reinicia antes de hablar
utterance = new SpeechSynthesisUtterance(texto);
utterance.voice = voces[vozIndex];
utterance.rate = 0.9;
utterance.pitch = 1.1;
utterance.volume = 1;
synth.speak(utterance);
}
function pausar(){
if(synth.speaking) synth.pause();
}
function reanudar(){
if(synth.paused) synth.resume();
}
function detener(){
if(synth.speaking) synth.cancel();
}
</script>
</body>
</html>
Comentarios