Comment mettre un MP3 sur votre site : Hébergement, intégration, streaming
Trois approches selon votre aisance technique et cas d'usage.
Méthode 1 : Lien direct (La plus simple)
<a href="audio.mp3" download>Télécharger MP3</a> L'utilisateur clique → télécharge le fichier. Marche partout. Pas de contrôle lecture.
Méthode 2 : Lecteur audio HTML5 natif (Sans JS, léger)
<audio controls preload="metadata"> <source src="audio.mp3" type="audio/mpeg"> Votre navigateur ne supporte pas l'audio HTML5. </audio> controls= lecture/pause, recherche, volume.preload="metadata"économise bande passante (charge durée seulement).loop,autoplay(muet seulement),crossoriginpour CORS.
Méthode 3 : Lecteur personnalisé (Bibliothèques JS)
- MediaElement.js — UI cohérente, HLS/DASH, accessibilité.
- Plyr — moderne, léger, responsive, YouTube/Vimeo aussi.
- Howler.js — Web Audio API, audio spatial, sprites.
- WaveSurfer.js — visualisation forme d'onde, régions, annotations.
Héberger le MP3
| Option | Idéal pour | Coût |
|---|---|---|
| Même serveur (mutualisé/VPS) | Petits fichiers, faible trafic | Inclus |
| Stockage cloud (S3, R2, B2) + CDN (CloudFront, Cloudflare) | Échelle, livraison globale, requêtes byte-range | Centimes/Go |
| Spécialisé audio (SoundCloud, Anchor, Transistor, Buzzsprout) | Podcasts, analytics, RSS | Gratuit–20 $/mois |
| GitHub Pages / Netlify / Vercel | Sites statiques, petits fichiers | Gratuit |
Détails critiques
- Type MIME : Serveur doit envoyer
Content-Type: audio/mpeg. - Requêtes byte-range : Requis pour la recherche. Activer sur serveur/CDN.
- CORS :
Access-Control-Allow-Origin: *si intégration cross-origin. - Compression : Ne pas gzip les MP3 (déjà compressés). Désactiver pour
audio/. - Licence : Vous possédez les droits ou avez licence. Brevets MP3 expirés (2017), mais AAC/HE-AAC peut nécessiter licence pour encodage commercial.
Accessibilité
- Fournir transcription / sous-titres (WebVTT
<track kind="captions">). - Lecteur utilisable au clavier (natif
<audio controls>l'est).
Commencez avec <audio controls>. Passez à Plyr si besoin branding, playlists, analytics.