Inserire un player audio/video in una pagina HTML

Home + HTML + Articoli HTML + Inserire un player audio/video in una pagina HTML

Introduzione

Vi è mai capitato di pensare di inserire nel vostro sito un piccolo player di file sonori (canzoni, suoni, etc..) per permettere ai visitatori di ascoltare un brano musicale, il tutto senza magari dover ricorrere a particolari programmi o linguaggi di programmazione?

Probabilmente si, ed altrettanto probabilmente avrete poi rinunciato in partenza, immaginandone la complessità di sviluppo. Eccovi allora un trucchetto che vi permetterà, con una semplice riga di codice HTML, di creare un piccolo player, comprensivo dei tasti PLAY, PAUSE e STOP, e perfino del controllo del volume!

Il Tag da utilizzare è <embed> compatibile con MS Internet Explorer, (dalla versione 3.0 in poi) e con Netscape Navigator (dalla versione 3.0 in poi).

In effetti <embed> non fa altro che richiamare il player di default installato sui PC e di impostarne determinate funzionalità attraverso una serie di attributi, di seguito in elenco, corredati da opportuni esempi.

Attributo "src"

Come per le immagini questo attributo serve a specificare l'indirizzo del file sonoro che si desidera riprodurre che, tra le varie estensioni supportate da questo plug-in, può essere di tipo:

• .mp3
• .wav
• .midi
• .rmi
• .mpeg (per i video)
• .avi (per i video)

e cosi via.

Tenete conto anche della dimensione del file che volete inserire mi raccomando, perchè più "grosso" è e più tempo l'utente dovrà attendere per caricare il brano e poterlo così ascoltare!

Un esempio

<embed src="nome_file.mp3"></embed>

Attributi "width" ed "height"

Impostano rispettivamente la larghezza e l'altezza del player.

Se avete come browser Internet Explorer, il player vi apparirà molto grande, rischiando di rovinare il layout della vostra pagina. Allo scopo di evitare questo inconveniente è bene dare sempre delle misure al player; questo si fa nello stesso modo in cui si danno le dimensioni a tabelle, immagini, e cosi via, ossia aggiungendo al Tag gli attributi width ed height, le cui misure andranno espresse in pixel.

Tenete poi anche conto che le dimensioni di default del player sono diverse a seconda del browser, altro motivo per cui è consigliabile impostarne dei valori fissi.

Nota: per evitare di mettere misure troppo piccole, e "tagliare fuori" cosi il controllo del volume, impostare la larghezza dell'embed minimo a 280.

Facciamo un esempio che comprende la barra del volume

<embed src="nome_file.mp3" width="280" height="45"></embed>

Facciamo un secondo esempio che comprende solo i pulsanti PLAY e STOP

<embed src="nome_file.mp3" width="75" height="45"></embed>

Attributo "autostart"

Noterete che la musica si avvierà automaticamente all'apertura della pagina. Ciò accade perchè l'attributo autostart è impostato di default a valore "true".

Se volete invece che la musica parta solo quando l'utente preme il bottone PLAY, impostate questo attributo a "false".

Facciamo un esempio

<embed
    src="nome_file.mp3"
    width="280"
    height="45"
    autostart="false">
</embed>

Attributo "loop"

E' possibile far si che il brano si ripeta (o meno) all'infinito, di modo che se l'utente vuole ascoltarlo più volte non deve ripremere PLAY ogni volta che la canzone finisce. Allo scopo dobbiamo chiamare in causa l'attributo loop.

Se impostato a 1 farà si che una volta terminata la canzone ricominci da capo automaticamente, all'infinito. Altrimenti, di default, loop assume valore 0, e una volta eseguito il brano il player si fermerà.

Ad esempio

<embed
    src="nome_file.mp3"
    width="280"
    height="45"
    autostart="false"
    loop="1">
</embed>

Attributo "hidden"

Potete anche far si, volendo, che il player non venga visualizzato, impostando l'attributo hidden al valore "true" (il valore di default, com'è intuibile, è "false").

Può essere utile se volete mettere un sottofondo musicale al sito. Ricordatevi però in questo caso di settare l'attributo "autostart" a "true", in modo da far partire il brano in automatico, in quanto l'utente, non vedendo il player, non potrà interagirvi.

Un esempio

<embed
    src="nome_file.mp3"
    autostart="true"
    loop="1"
    hidden="true">
</embed>

Il Tag "noembed"

Come accennato nel paragrafo introduttivo, c'è da dire anche che <embed> non è compatibile con tutti i browser; ecco perchè è bene aggiungere, subito dopo la chiusura </embed>, il Tag <noembed>, il cui scopo è fornire un testo alternativo in caso di mancato supporto.

Segue un esempio

<embed src="nome_file.mp3"></embed>
<noembed>Elemento multimediale non supportato!</noembed>