Come creare un player da inserire in una pagina Web
Introduzione
Per inserire un semplice lettore musicale in una pagina web, è sufficiente inserire un elemento AUDIO, con alcuni attributi o proprietà.
La pagina mostrerà una casella di riproduzione simile alla seguente, anche se con alcune differenze, a seconda del browser web utilizzato. Inserire un player in una pagina web non è così complicato come potrebbe sembrare. Si tratta soltanto di effettuare una breve ricerca sui codici adatti, facendo bene attenzione che questi siano compatibili con quanti più browser possibile. In questa guida vedremo come fare per creare un player nel nostro sito, in pochi e semplici passi.
Occorrente
- Connessione internet
- PC o smartphone
Scaricare il file audio
Innanzitutto occorre puntualizzare che il player può essere sia audio che video.
Se avete intenzione di inserire un player audio, iniziate scaricando il file audio che vi interessa, come una canzone o altro. Sappiate che il nome con cui lo rinominate andrà poi scritto all'interno del codice, quindi vi consiglio di scegliere un nome abbastanza semplice.
Ricordate poi di salvare il file audio nella stessa directory dei vari file che andranno a comporre il vostro sito.
Aggiungere contenuti multimediali
Tutte le versioni più recenti dei browser web supportano HTML5 e quindi possiamo utilizzarli come semplici riproduttori audio o video.
Ciò consente di riprodurre musica e canzoni su una pagina Web senza dover installare programmi o applicazioni ausiliarie.
Allo stesso modo possiamo farlo su computer o laptop, per ascoltare musica offline.
In questo articolo condividiamo come utilizzare HTML5 per creare un semplice lettore audio.
È qualcosa di semplice e che molti proveranno anche per semplice curiosità.
Altri useranno il metodo per aggiungere contenuti multimediali alle pagine del loro blog o sito web.
Creare un elenco
Adesso chiudete nell'ordine,
, e
e salvate con nome il blocco note, facendo attenzione di rinominare il file ". Html" e di salvarlo selezionando la dicitura "tutti i file", nel menu a tendine che appare sotto lo spazio in cui avrete scritto il nome del file.
A questo punto una volta che aprirete cliccando due volte sulla vostra pagina web, avrete il vostro bel player pronto da utilizzare, con la canzone che avete scelto. Per testare la capacità di riprodurre la musica del browser che utilizziamo, è sufficiente trascinare un file MP3 nella parte superiore di una finestra del browser e rilasciarlo.
Vedremo che inizia a suonare immediatamente, mostrando nella finestra i controlli elementari di un giocatore minimalista e semplice.
È possibile creare un elenco cliccabile, in cui è possibile selezionare i brani da riprodurre. È necessario utilizzare JavaScript per quello, che avrà il compito di indicare al giocatore la canzone da eseguire.
Incorporare il codice
Nel caso in cui vogliate, invece, inserire un player video, la procedura è un po' diversa, ma non troppo. Dovrete anche in questo caso scaricare il video che vi interessa, qualora non lo aveste già, e digitare piuttosto il seguente codice all'interno del body, personalizzando gli altri codici sotto riportati.
Il codice per incorporare il video è il seguente:
Guarda il video
Consigli
- Selezionando ogni brano e premendo il pulsante Riproduci, possono essere riprodotti indipendentemente.