Come creare un player da inserire in una pagina Web

Tramite: O2O 30/03/2021
Difficoltà: media
18

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.

28

Occorrente

  • Connessione internet
  • PC o smartphone
38

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.

48

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.

Continua la lettura
58

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.

68

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:
"Loop" si riferisce al fatto che una volta finito il video, questo si continua a riprodurre all'infinito. Se non volete che ciò si verifichi, dovete scrivere "false" come sopra riportato. Analogamente, "allowfullscreen" si riferisce al fatto che viene aggiunto il tastino per permettere lo schermo intero, se vi interessa, scrivete "true".

78

Guarda il video

88

Consigli

Non dimenticare mai:
  • Selezionando ogni brano e premendo il pulsante Riproduci, possono essere riprodotti indipendentemente.
Alcuni link che potrebbero esserti utili:

Potrebbe interessarti anche

Naviga con la tastiera

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Segnala il video che ritieni inappropriato
Devi selezionare il video che desideri segnalare
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Internet

Come visualizzare il codice HTML di una pagina web

L'hypertext Markup Language o meglio conosciuto come HTML è il linguaggio di formattazione più utilizzato nella creazione di pagine web vale a dire che è il codice che compone tutte le pagine che scorrono sui nostri browser. Ma per semplice curiosità...
Internet

Come salvare una pagina web come file immagine

Quando si naviga in Internet, si aprono e chiudono diverse schede. I siti visitati compaiono nella cronologia, che si può consultare in qualunque momento. Talvolta può capitare di tornare su una particolare pagina, anche in assenza di connessione. Quando...
Internet

Come salvare una pagina web con Android

Se siete in possesso di un dispositivo Android e mentre navigate in internet avete trovato una pagina web che vi interessa ed avete il desiderio di salvarla, con le descrizioni della presente guida scoprirete subito come procedere nel modo più indicato...
Internet

Come aggiornare automaticamente una pagina web

Al giorno d'oggi, internet è ormai utilizzato da chiunque, sia per motivi lavorativi, ma anche durante il tempo libero per cercare informazioni di ogni tipo o vedere filmati.Per utilizzare internet, oltre ad essere in possesso di un computer o di moderni...
Internet

Come Monitorare Una Pagina Web Per Essere Avvisato Di Eventuali Aggiornamenti

Il web offre moltissime possibilità a chi le sa sfruttare. Ogni giorno milioni di siti vengono visitati e altrettanti milioni vengono costantemente aggiornati con nuove funzionalità o contenuti. Ognuno di noi ha almeno uno o due siti preferiti, a volte...
Internet

Come salvare una pagina web in word e modificarla

Salvare le notizie importanti è fondamentale, in quanto potrebbero servirci in un secondo tempo. Il problema in questi ultimi anni è che si è persa l'abitudine di salvare le notizie importanti. A chiunque sarà sicuramente capitato di voler salvare...
Internet

Come copiare una pagina web su Word

Come ben sappiamo con questa nuova tecnologia e soprattutto con tutti questi nuovi programmi e tecniche che si stanno evolvendo e sviluppando negli ultimi tempi è possibili fare quasi tutto quando si parla appunto di web e di tecnologia che riguarda...
Internet

Come inserire il plug-in della pagina Facebook sul blog WordPress

Un'ottima idea per rendere migliore il vostro sito è appunto quella di aggiungere un "Plug In" nella vostra pagina Facebook. Esso serve per attrarre maggiori visitatori al vostro Blog. Vediamo insieme come inserire il "Plug-In" della pagina Facebook...