Kyron #14
Description
<title>KYRON - Música para Artistas Emergentes</title>
<style>
body { font-family: sans-serif; background: #f4f4f4; margin: 0; padding: 0; }
header { background: #4f46e5; color: white; padding: 15px; text-align: center; font-size: 1.5em; }
main { max-width: 800px; margin: auto; padding: 20px; }
.perfil { display: flex; align-items: center; gap: 15px; background: white; padding: 10px; border-radius: 8px; margin-bottom: 20px; }
.perfil img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.cancion { background: white; padding: 10px; border-radius: 8px; margin: 10px 0; display: flex; justify-content: space-between; align-items: center; }
button { background: #4f46e5; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; }
button:hover { background: #3730a3; }
</style>
🎵 KYRON - Artistas Emergentes
Mi Nombre
Sube una canción MP3 o WAV
<script>
const fotoPerfil = document.getElementById('fotoPerfil');
const subirFoto = document.getElementById('subirFoto');
const subirCancion = document.getElementById('subirCancion');
const listaCanciones = document.getElementById('listaCanciones');
let canciones = JSON.parse(localStorage.getItem('kyron_canciones') || '[]');
function guardarCanciones() {
localStorage.setItem('kyron_canciones', JSON.stringify(canciones));
}
function renderCanciones() {
listaCanciones.innerHTML = '';
canciones.forEach((cancion, i) => {
const div = document.createElement('div');
div.className = 'cancion';
div.innerHTML = `
${cancion.nombre}
Mi Nombre
Sube una canción MP3 o WAV
▶
❤️ ${cancion.likes}
`;
listaCanciones.appendChild(div);
});
}
function reproducir(i) {
const audio = new Audio(canciones[i].url);
audio.play();
}
function meGusta(i) {
canciones[i].likes++;
guardarCanciones();
renderCanciones();
}
subirFoto.addEventListener('change', e => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = ev => {
fotoPerfil.src = ev.target.result;
localStorage.setItem('kyron_foto', ev.target.result);
};
reader.readAsDataURL(file);
}
});
subirCancion.addEventListener('change', e => {
const file = e.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
canciones.push({ nombre: file.name, url, likes: 0 });
guardarCanciones();
renderCanciones();
}
});
// Cargar datos guardados
if (localStorage.getItem('kyron_foto')) {
fotoPerfil.src = localStorage.getItem('kyron_foto');
}
renderCanciones();
</script>