Reproductor de audios
<audio controls>
<source src="https://example.com/audio.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>
Mi Casete
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reproductor Casete</title>
</head>
<body>
<div style="width: 300px; height: 150px; background: #ccc; border: 2px solid #333; border-radius: 10px; text-align: center; padding: 10px; font-family: Arial, sans-serif; margin: 10px auto;">
<div style="background: #fff; height: 30px; line-height: 30px; border: 2px solid #333; margin: 10px auto; width: 80%; font-weight: bold;">
Mi Casete
</div>
<audio controls style="width: 90%;">
<source src="https://example.com/audio.mp3" type="audio/mpeg">
Tu navegador no soporta el audio.
</audio>
</div>
</body>
</html>
Cambios realizados:
- Color de fondo del casete:
background: #87CEFA;(un azul claro estilo «Sky Blue»).
- Color de la etiqueta:
background: #FFD700;(amarillo dorado).
- Texto en la etiqueta:
color: #333;para que el texto contraste bien con el amarillo.
Resultado:
Tendrás un casete visualmente más atractivo con colores llamativos, pero manteniendo la simplicidad para que puedas replicarlo fácilmente.
Si necesitas un esquema de colores diferente, solo dime los colores que prefieres
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reproductor Casete</title>
</head>
<body>
<div style="width: 300px; height: 150px; background: #87CEFA; border: 2px solid #333; border-radius: 10px; text-align: center; padding: 10px; font-family: Arial, sans-serif; margin: 10px auto;">
<div style="background: #FFD700; height: 30px; line-height: 30px; border: 2px solid #333; margin: 10px auto; width: 80%; font-weight: bold; color: #333;">
Mi Casete Vintage
</div>
<audio controls style="width: 90%;">
<source src="https://example.com/audio.mp3" type="audio/mpeg">
Tu navegador no soporta el audio.
</audio>
</div>
</body>
</html>
Mi Casete Vintage
Aquí tienes un ejemplo donde el fondo del casete es una imagen y el título está centrado encima del reproductor de audio. Todo está en HTML con estilos inline para que sea sencillo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reproductor Casete</title>
</head>
<body>
<div style="width: 300px; height: 150px; background: url('https://via.placeholder.com/300x150') no-repeat center center; background-size: cover; border: 2px solid #333; border-radius: 10px; text-align: center; padding: 10px; font-family: Arial, sans-serif; margin: 20px auto;">
<div style="background: rgba(255, 255, 255, 0.8); border-radius: 5px; margin-bottom: 10px; padding: 5px; font-weight: bold; color: #333;">
Mi Casete Vintage
</div>
<audio controls style="width: 90%; margin-top: 10px;">
<source src="https://example.com/audio.mp3" type="audio/mpeg">
Tu navegador no soporta el audio.
</audio>
</div>
</body>
</html>
Mi Casete Vintage
Cambios principales:
- Fondo con imagen:
background: url('https://via.placeholder.com/300x150')incrusta una imagen de fondo.background-size: cover;asegura que la imagen cubra completamente el espacio del casete.- Puedes reemplazar el enlace de ejemplo con la URL de tu propia imagen.
- Título sobre el reproductor:
- El título está dentro de un
divcon un fondo blanco semitransparente (rgba(255, 255, 255, 0.8)) para destacar sobre cualquier fondo.
- El título está dentro de un
- Reproductor centrado:
- El
<audio>está alineado en el centro conwidth: 90%;y un pequeño margen superior.
- El
Cómo funciona:
- Este diseño es minimalista y puede replicarse fácilmente.
- Solo necesitas cambiar la URL de la imagen en el atributo
backgroundy el enlace del audio ensrc.
