Come incorporare un lettore MP3 gratuito sul tuo sito web: 3 modi
Se desideri che i visitatori del tuo sito web apprezzino un file MP3, uno dei modi più semplici per farlo è incorporarlo nella pagina. Con un lettore MP3 incorporato, i visitatori non devono scaricare direttamente l’audio o utilizzare software aggiuntivo perché viene riprodotto in linea.
Descriveremo in dettaglio i diversi metodi che puoi utilizzare per incorporare un MP3 sul tuo sito web, incluso l’utilizzo di HTML5 e Google Drive.
1. Incorpora un MP3 nel tuo sito web con HTML5
Se ti senti a tuo agio a modificare il codice del tuo sito web, uno dei modi più semplici per incorporare un file MP3 è usare HTML5.
Il tag HTML5 <audio> potrebbe sembrare semplice a prima vista, ma è potente poiché è compatibile con tutti i principali browser desktop e mobili.
Per incorporare un MP3 con HTML5, utilizza questo codice:
<audio controls><source src="MP3 URL HERE" type="audio/mpeg">Your browser does not support the audio tag.</audio>Sostituisci semplicemente l’ URL MP3 QUI con il tuo file audio caricato. Non può essere un file archiviato sul tuo computer; deve essere disponibile online.
Questo codice posizionerà un piccolo lettore audio sulla pagina, da cui l’utente può riprodurre, mettere in pausa, scrub e regolare il volume. Ecco come appare su Firefox:
Questo codice include anche un messaggio che verrà visualizzato al posto del lettore multimediale, nell’improbabile circostanza che il browser dell’utente non supporti il lettore.
Puoi applicare attributi come riproduzione automatica e loop , in questo modo:
<audio controls autoplay loop><source src="MP3 URL HERE" type="audio/mpeg">Your browser does not support the audio tag.</audio>Tieni presente che la maggior parte dei browser non supporta la riproduzione automatica perché è considerata una cattiva pratica forzare automaticamente l’audio agli utenti.
La personalizzazione di base può essere applicata al blocco del lettore audio tramite CSS, come il bordo e il padding . Tuttavia, sarà necessario utilizzare JavaScript per definire correttamente lo stile del lettore stesso in modo che sia coerente su tutti i browser.
Ulteriori informazioni sugli attributi e sulla personalizzazione del lettore audio HTML5 sono disponibili su MDN Web Docs .
2. Incorpora un MP3 sul tuo sito web con Google Drive
Google Drive è un eccellente provider di cloud storage gratuito . Puoi usarlo per caricare il tuo file MP3 e creare un lettore audio.
Con l’MP3 caricato su Google Drive:
- Fare clic con il pulsante destro del mouse sul file e fare clic su Ottieni collegamento .
- Modificare la restrizione di accessibilità su Chiunque abbia il collegamento .
- Infine, fai clic su Copia collegamento .
Questo ti darà un URL simile a questo:
https://drive.google.com/file/d/123/view?usp=sharingSostituisci visualizzazione? Usp = condivisione con anteprima , in questo modo:
https://drive.google.com/file/d/123/previewQuindi, utilizza un tag <iframe> per incorporare il lettore MP3 sul tuo sito web, sostituendo DRIVE URL con l’URL che hai appena modificato:
<iframe frameborder="0" width="400" height="150" src="DRIVE URL"></iframe>È possibile regolare, aggiungere o rimuovere gli attributi (come il frameborder e la larghezza ) secondo necessità.
Questo incorporerà l’MP3 sul tuo sito web utilizzando il lettore di Google Drive. Gli utenti possono riprodurre, scorrere e regolare il volume, proprio come con il player HTML5. Ecco come appare:
La differenza principale è la presenza di un pulsante pop-out . Si apre l’MP3 su Google Drive, dove gli utenti possono aggiungere commenti, condividere il file e altro.
3. Incorpora un MP3 sul tuo sito web con un CMS
Se utilizzi un sistema di gestione dei contenuti (CMS) per il tuo sito web , probabilmente puoi comunque utilizzare i metodi sopra. Detto questo, potresti non sentirti a tuo agio nella modifica del codice HTML.
Qualsiasi buon CMS ti consentirà di aggiungere facilmente l’audio al tuo sito Web tramite la sua interfaccia. Ad esempio, su WordPress, devi semplicemente aggiungere un blocco , selezionare Audio , quindi Carica l’MP3, selezionalo dalla tua libreria multimediale o Inserisci da URL .
Sia che tu stia utilizzando Google Sites, ExpressionEngine o un servizio come Squarespace, il processo per aggiungere l’audio sarà leggermente diverso, quindi assicurati di consultare la documentazione della guida dell’azienda per una guida completa.
Consenti ai tuoi visitatori di ascoltare gli MP3 con facilità
Utilizzando uno dei metodi sopra indicati, i visitatori del tuo sito web saranno ora in grado di ascoltare facilmente i file MP3 tramite un lettore multimediale.
Detto questo, non è sempre necessario utilizzare file MP3. Esistono molti altri formati audio comuni, come WAV e FLAC, che puoi riprodurre in linea allo stesso modo sul tuo sito web.
