karaoke de poemas
- samuel gaitan
- 3 ene
- 2 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>🌌 Poemas Futuristas Multilingües 🌹</title>
<style>
body {
font-family: "Segoe UI", sans-serif;
color: #fff;
text-align: center;
padding: 20px;
}
h1 {
color: #ffb6f9;
}
.poema {
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 15px;
padding: 20px;
margin: 20px auto;
width: 80%;
background: linear-gradient(145deg, rgba(140,0,255,0.3), rgba(0,120,255,0.2), rgba(255,100,200,0.2));
backdrop-filter: blur(5px);
box-shadow: 0 0 20px rgba(255,255,255,0.2);
}
button {
border: none;
padding: 10px 20px;
margin: 5px;
border-radius: 10px;
color: #fff;
font-weight: bold;
cursor: pointer;
box-shadow: 0 0 10px #fff5;
transition: all 0.3s;
}
button:hover {
transform: scale(1.1);
box-shadow: 0 0 20px #fff;
}
.encriptado {
font-family: monospace;
color: #c0ffff;
background: rgba(255,255,255,0.05);
padding: 10px;
border-radius: 10px;
}
audio {
margin-top: 10px;
width: 300px;
}
</style>
</head>
<body>
<h1>🌌 Poemas del Río del Tiempo 🌹</h1>
<div class="poema" id="poema1">
<h2>💜 Poema Multilingüe</h2>
<p><strong>Español:</strong> 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 entre un hombre y una mujer.</p>
<p><strong>English:</strong> I have loved you from the first to the final breath, but farewell...
May the river of life bring us together again,
two wandering souls, one love between a man and a woman.</p>
<p><strong>Français:</strong> Je t’ai aimé du premier au dernier instant, mais adieu...
Que le fleuve de la vie nous réunisse encore,
deux âmes voyageuses, un amour entre un homme et une femme.</p>
<p><strong>Deutsch:</strong> Ich habe dich vom ersten bis zum letzten Augenblick geliebt, doch leb wohl...
Möge der Fluss des Lebens uns wieder vereinen,
zwei reisende Seelen, eine Liebe zwischen Mann und Frau.</p>
<audio id="audio1" src="https://cdn.pixabay.com/download/audio/2022/03/15/audio_8c6d9a2b1d.mp3?filename=soft-piano-ambient-11013.mp3" controls></audio>
</div>
<div class="poema" id="poema2">
<h2>🎧 Karaoke de Poemas</h2>
<p>Presiona para escuchar la recitación con voz sintética:</p>
<button onclick="leer('poema1', 'es-ES')">🔊 Español</button>
<button onclick="leer('poema1', 'en-US')">🎤 English</button>
<button onclick="leer('poema1', 'fr-FR')">🎶 Français</button>
<button onclick="leer('poema1', 'de-DE')">🎵 Deutsch</button>
<button onclick="detener()">⏹ Detener</button>
</div>
<div class="poema" id="poema3">
<h2>🌠 Poema Fragmentado Trilingüe</h2>
<p>
"Entre las estrellas, je me souviens de toi, <br>
In every dream, du tanzt in meinem Herz, <br>
amor eterno, lumière sans fin, infinite soul..."
</p>
</div>
<div class="poema" id="poema4">
<h2>🔐 Poema Encriptado</h2>
<pre class="encriptado">
💫 E51: "Q29yYXpvbiBkZWwgdGllbXBvLCByw6l2ZSwgZXNwZWphbnph"
🌍 Key: Español - Français - Deutsch mix
🔓 Traducción parcial: "Corazón del tiempo, rêve, esperanza..."
</pre>
</div>
<script>
let vozActual;
function leer(id, lang) {
detener();
const texto = document.getElementById(id).innerText;
vozActual = new SpeechSynthesisUtterance(texto);
vozActual.lang = lang;
vozActual.rate = 0.9;
vozActual.pitch = 1.2;
speechSynthesis.speak(vozActual);
}
function detener() {
if (speechSynthesis.speaking) {
speechSynthesis.cancel();
}
}
</script>
</body>
</html>
Comentarios