Test: AudioEmbed Component

Ejemplo 1: Audio con título y descripción

Entrevista de Onda Cero (del post "Protopía: el término")

La Brújula de Navidad - Protopía

Entrevista en Onda Cero sobre El fin de la INERCIA con David del Cura

Descargar audio

Ejemplo 2: Audio solo con título

Audio con título pero sin descripción

Podcast sobre Protopía

Descargar audio

Ejemplo 3: Audio sin información adicional

Solo el reproductor, sin título ni descripción

Descargar audio

Características implementadas

  • ✅ Reproductor HTML5 nativo con controles del navegador
  • ✅ Preload="metadata" para optimizar carga
  • ✅ Título y descripción opcionales
  • ✅ Enlace de descarga visible
  • ✅ Estilos del design system (Tech Blue, backgrounds)
  • ✅ Border-left accent en Tech Blue
  • ✅ Totalmente responsivo
  • ✅ Accesible (ARIA labels, focus states)
  • ✅ Fallback para navegadores sin soporte
  • ✅ Error handling con mensaje visual
  • ✅ Analytics tracking opcional
  • ✅ Dark mode ready

Diferencia con AudioPlayer

AudioPlayer (existente)

Reproductor completo con controles personalizados, speed control, volumen, localStorage. Para narración completa de posts.

AudioEmbed (nuevo)

Reproductor simple con controles nativos. Para clips de audio embebidos en el contenido (entrevistas, podcasts, etc.)

Uso del componente

<AudioEmbed 
  src="/audio/es/EntrevistaOndaCero.mp3" 
  title="La Brújula de Navidad - Protopía"
  description="Entrevista en Onda Cero sobre El fin de la INERCIA"
/>