Audio Player

Lecteur audio personnalisé avec visualiseur, contrôles complets, gestion du volume et vitesse de lecture.

Exemple de base

Sample Audio

Artist Name

00:0000:00

<AudioPlayer 
  src="audio.mp3"
  title="Sample Audio"
  artist="Artist Name"
  size="md"
/>

Avec métadonnées complètes

Beautiful Song

The Artist

Greatest Hits

00:0000:00

<AudioPlayer 
  src="audio.mp3"
  title="Beautiful Song"
  artist="The Artist"
  album="Greatest Hits"
  coverImage="/cover.jpg"
  onDownload={handleDownload}
  size="md"
/>

Tailles disponibles

Sample Audio

Artist Name

00:0000:00

sm - Small - max 320px width

<AudioPlayer src="audio.mp3" size="sm" />

Sample Audio

Artist Name

00:0000:00

md - Medium - max 560px width

<AudioPlayer src="audio.mp3" size="md" />

Sample Audio

Artist Name

00:0000:00

lg - Large - max 720px width

<AudioPlayer src="audio.mp3" size="lg" />

Référence API

Props	Type	Défaut	Description
src	string	-	URL du fichier audio à lire (requis)
title?	string	-	Titre de la piste audio
artist?	string	-	Nom de l'artiste
album?	string	-	Nom de l'album
coverImage?	string	-	URL de l'image de couverture/pochette
size?	"sm" \| "md" \| "lg"	"md"	Taille du lecteur audio (affecte la largeur max et les contrôles)
className?	string	-	Classes CSS additionnelles
onDownload?	() => void	-	Callback appelé lors du clic sur le bouton téléchargement
onError?	(error: Error) => void	-	Callback appelé en cas d'erreur de chargement

Exemple avec gestion du téléchargement

const handleDownload = () => {
  const link = document.createElement('a');
  link.href = audioUrl;
  link.download = 'audio-file.mp3';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

<AudioPlayer
  src={audioUrl}
  title="Mon Audio"
  onDownload={handleDownload}
/>