Come mettere un MP3 sul tuo sito web: ospita, incorpora, streaming
Tre approcci a seconda del tuo comfort tecnico e caso d'uso.
Metodo 1: Link diretto (più semplice)
<a href="audio.mp3" download>Download MP3</a> Utente clicca → scarica file. Funziona ovunque. Nessun controllo riproduzione.
Metodo 2: Lettore audio HTML5 nativo (nessun JS, leggero)
<audio controls preload="metadata"> <source src="audio.mp3" type="audio/mpeg"> Il tuo browser non supporta l'audio HTML5. </audio> controls= play/pausa, cerca, volume.preload="metadata"risparmia banda (carica solo durata).loop,autoplay(solo muto),crossoriginper CORS.
Metodo 3: Player personalizzato (librerie JS)
- MediaElement.js — UI consistente, HLS/DASH, accessibilità.
- Plyr — moderno, leggero, reattivo, YouTube/Vimeo anche.
- Howler.js — Web Audio API, audio spaziale, sprite.
- WaveSurfer.js — visualizzazione forma d'onda, regioni, annotazioni.
Hosting dell'MP3
| Opzione | Meglio per | Costo |
|---|---|---|
| Stesso server (shared/VPS) | File piccoli, traffico basso | Incluso |
| Cloud storage (S3, R2, B2) + CDN (CloudFront, Cloudflare) | Scala, consegna globale, byte-range seeks | Spiccioli/GB |
| Audio-specifico (SoundCloud, Anchor, Transistor, Buzzsprout) | Podcast, analisi, RSS | Gratuito–$20/mese |
| GitHub Pages / Netlify / Vercel | Siti statici, file piccoli | Tier gratuito |
Dettagli critici
- MIME type: Il server deve inviare
Content-Type: audio/mpeg. - Richieste byte-range: Richieste per cercare. Abilita su server/CDN.
- CORS:
Access-Control-Allow-Origin: *se incorpori cross-origin. - Compressione: Non gzip MP3 (già compressi). Disabilita per
audio/. - Licensing: Possiedi diritti o hai licenza. Brevetti MP3 scaduti (2017), ma AAC/HE-AAC potrebbero richiedere licenza per encoding commerciale.
Accessibilità
- Fornisci trascrizione / sottotitoli (WebVTT
<track kind="captions">). - Player operabile da tastiera (nativo
<audio controls>lo è).
Inizia con <audio controls>. Passa a Plyr se hai bisogno di branding, playlist o analisi.