Come incorporare un lettore MP3 gratuito sul tuo sito Web: 3 modi

Come incorporare un lettore MP3 gratuito sul tuo sito Web: 3 modi

Se vuoi che i visitatori del tuo sito web godano di un file MP3, uno dei modi più semplici per farlo è incorporarlo nella pagina. Con un lettore MP3 integrato, 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 sul tuo sito web con HTML5

Se ti senti a tuo agio nel modificare il codice del tuo sito web, uno dei modi più semplici per incorporare un file MP3 è utilizzare HTML5.





L'HTML5 tag potrebbe sembrare di base a prima vista, ma è potente poiché è compatibile con tutti i principali browser desktop e mobili.

Per incorporare un MP3 con HTML5, usa questo codice:



Your browser does not support the audio tag.

Basta sostituire URL MP3 QUI con il file audio caricato. Questo non può essere un file memorizzato sul tuo computer; deve essere disponibile online.

cosa significa questo accessorio potrebbe non essere supportato?

Questo codice posizionerà un piccolo lettore audio sulla pagina, da cui l'utente può riprodurre, mettere in pausa, scorrere 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 ciclo continuo , così:





Your browser does not support the audio tag.

Tieni presente che la maggior parte dei browser non supporta la riproduzione automatica perché è considerata una cattiva pratica forzare automaticamente l'audio sugli utenti.

La personalizzazione di base può essere applicata al blocco del lettore audio tramite CSS, come frontiera e imbottitura . Tuttavia, dovrai utilizzare JavaScript per modellare correttamente il lettore stesso in modo che sia coerente tra i browser.

Ulteriori informazioni sugli attributi e la personalizzazione del lettore audio HTML5 sono disponibili su Documenti Web MDN .

perché hbo max non funziona?

Imparentato: Fantastici effetti HTML che chiunque può aggiungere ai propri siti web

2. Incorpora un MP3 sul tuo sito web con Google Drive

Google Drive è un fornitore di cloud storage eccellente e gratuito . Puoi usarlo per caricare il tuo file MP3 e creare un lettore audio.

Con l'MP3 caricato su Google Drive:

  1. Fare clic con il pulsante destro del mouse il file e fare clic su Ottieni link .
  2. Modificare la restrizione di accessibilità in Chiunque abbia il link .
  3. Infine, fai clic su Copia link .

Questo ti darà un URL simile a questo:

https://drive.google.com/file/d/123/view?usp=sharing

Sostituire visualizza?usp=condivisione insieme a anteprima , così:

https://drive.google.com/file/d/123/preview

Quindi, usa un

Puoi regolare, aggiungere o rimuovere gli attributi (come bordo cornice e larghezza ) come necessario.

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 lettore HTML5. Ecco come appare:

La differenza principale è la presenza di a saltare fuori pulsante. Questo 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 indicati. Detto questo, potresti non essere a tuo agio nel modificare il codice HTML.

Il computer Windows 10 non si accende

Qualsiasi buon CMS ti consentirà di aggiungere facilmente l'audio al tuo sito Web attraverso la sua interfaccia. Ad esempio, su WordPress, devi semplicemente aggiungi un blocco , Selezionare Audio , e poi o Caricamento l'MP3, selezionalo dal tuo 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 di assistenza dell'azienda per una guida completa.

Consenti ai tuoi visitatori di ascoltare gli MP3 con facilità

Utilizzando uno dei metodi di cui sopra, 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 ugualmente in linea sul tuo sito web.

Condividere Condividere Tweet E-mail I 10 formati audio più comuni: quale dovresti usare?

Conosci MP3, ma per quanto riguarda AAC, FLAC, OGG o WMA? Perché esistono così tanti formati di file audio ed esiste un formato audio migliore?

Leggi Avanti
Argomenti correlati
  • Internet
  • Sviluppo web
  • Strumenti per i Webmaster
  • HTML5
Circa l'autore Joe Keeley(652 articoli pubblicati)

Joe è nato con una tastiera in mano e ha iniziato subito a scrivere di tecnologia. Ha un BA (Hons) in Business e ora è uno scrittore freelance a tempo pieno che si diverte a rendere la tecnologia semplice per tutti.

Altro da Joe Keeley

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti