Il sito per imparare gratuitamente a fare pagine Web

Guida HTML

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip
 


Audio Musica Suoni


Elementi o Tags:
Attributi:

Andrea Bianchi © www.web-link.it  Guida HTML 4.01 - Ver. 7.0.1  

La musica ed i suoni non sono indispensabili ai fini di un buon documento html ma a volte capita di dover inserire un brano audio. Poco importa che si tratti di musica o di un discorso parlato, il metodo per inserirlo resta sempre lo stesso.

In html 4.01 si fa uso di <object>, html5 ha introdotto il nuovo tag <audio>, noi qui descriveremo anche <bgsound> ed <embed> sebbene il primo sia proprietario dei soli browser IE e l'altro riconosciuto da vari browser ma deprecato in html 4.01 rielaborato con nuovi attributi ed utilizzato da HTML5.

Vi ricordo che per come lavora il browser qualsiasi oggetto inserito in una pagina web per essere visualizzato o, come nel nostro caso, per essere ascoltato, lo si deve prima scaricare nella memoria interna del browser. Se ne deduce che files molto grandi (pesanti) richiederanno tempi piuttosto lunghi a seconda del tipo di file usato e dalla qualità della connessione del visitatore.


Torna su
 

<bgsound>

L'elemento <bgsound> necessita di attributi di cui almeno uno necessariamente obbligatorio: src. Questo tag non necessita del relativo elemento di chiusura </bgsound>. Questo elemento è dei soli browser IE, non è supportato da HTML 4.01 e meno ancora da HTML5

src

L'attributo src specifica il nome del file audio da riprodurre, questo può essere in formato: wav, midi, mp3 o qualsiasi altro formato audio valido purché supportato dal plug-in o programma associato nel PC per la riproduzione dei file audio. Il brano così richiamato si avvierà automaticamente.

<bgsound src="nome_file.mid">


 

loop

Con l'attributo loop si stabilisce il numero di volte che il brano deve essere ripetuto, se al posto di un numero viene inserito il termine "infinite" il brano sarà ripetuto all'infinito.

<bgsound src="..." loop="infinite">

Non adoperatelo, è dei soli browser IE, non è supportato da nessun altro browser.



Torna su
 

<embed>

L'elemento <embed> supporta attributi quali: src, loop, hidden, autostart, width, heigth ed è riconosciuto dai vari browser, IE compreso a partire però dalla versione 4.0. Questo tag non necessita del relativo elemento di chiusura. Questi gli attributi possibili:
Disapprovato! dal W3C a favore di object

 

src

L'attributo src specifica il nome del file audio da riprodurre, questo può essere in formato: wav , midi, mp3 o qualsiasi altro formato audio valido purché supportato dal plug-in o programma associato al PC per la riproduzione audio. Il brano così richiamato si avvierà automaticamente.


<embed src="nome_file.mid">

Se non vengono specificate le dimensioni con width e heigth il browser IE visualizzerà l'intera interfaccia grafica per offrire il controllo diretto sul player, compresi: volume, avvio, stop, pausa.



 

loop

Con l'attributo loop si stabilisce se il brano deve essere ripetuto all'infinito (true) o una sola volta (false).

<embed src="..." loop="true">

 

autostart"

Con l'attributo autostart si stabilisce se il brano deve avviarsi da solo, automaticamente (true), oppure no (false).

<embed src="..." autostart="false">

 

hidden

Con l'attributo hidden si stabilisce se l'interfaccia grafica deve essere visibile (false), oppure nascosta (true).

<embed src="..." hidden="false">

 

width heigth

Gli attributi width e heigth servono per impostare la porzione visibile dell'interfaccia grafica. Questa varia a seconda del browser adoperato, per IE la mancanza di valori farà si che sia visualizzata per intero. A volte è più comodo avere solo i pulsanti.

<embed src="..." width="145" height="35">

Queste dimensioni variano a seconda del programma associato al browser adoperato, per questo motivo è preferibile non far vedere alcuna interfaccia, oppure affidarsi ad uno script che una volta intercettato il tipo di browser richiami o una dimensione o un'altra. Si veda a questo proposito la sez. F.A.Q.



Torna su
 

<noembed>...</noembed>

L'elemento <noembed> esegue il codice html in esso contenuto soltanto nel caso in cui il browser non supportasse l'elemento <embed>.

Si potrebbe assemblare un codice html che adoperi <embed>, e nel caso in cui questo non dovesse essere supportato, vedi alcune versioni del browser IE, richiamare <bgsoud>. Così facendo si avrebbe quasi la certezza di riuscire a far ascoltare la musica a qualsiasi tipo di browser. Questo tag necessita del relativo tag di chiusura </noembed>

<embed src="nome_file.mid" autostart="true" loop="false" hidden="false">
<noembed><bgsound src="nome_file.mid"></noembed>

Disapprovato! dal W3C a favore di <object>


Torna su
 

<object>...</object>

L'elemento <object> serve per definire un oggetto generico incorporato. Viene utilizzato anche per altri tipi di oggetti quali filmati, applets, ed altro ancora. Nel nostro caso sfruttando alcuni suoi attributi sarà possibile fargli riprodurre un brano musicale. Si farà uso oltre che di type e data anche dell'elemento <param> grazie al quale definire le preferenze di impostazione. Questo tag non necessita del relativo elemento di chiusura </<object>>

<object type="audio/x-mid" data="nome_file.mid">
<param name="src" value="nome_file.mid"></param>
</object>
il tuo browser non riconosce questo codice midi.mid
 

type

L'attributo type di <object> specifica quale sia il tipo di file da riprodurre, di solito per i file audio si possono avere file di tipo: midi, mp3, wav, ogg. Per ognuno di questi esiste un'apposita sigla:

<object type="audio/x-mid" data="nome_file.mid">
<param name="src" value="nome_file.mid">
</object>

Questa la tabella dei tipi mime per i files audio:

audio/x-mid = mid
audio/x-wav = wav
audio/mpeg = mp3
application/ogg = ogg


 

<param>

L'elemento <param> serve per l'inizializzazione di un oggetto. Ha diversi attributi ma nel nostro caso useremo: src, autostart e loop che serviranno per passare ad object i valori dei parametri da noi specificati.

 

<param name src value

Con l'attributo src value si specifica il nome del brano completo della sua estensione ed eventuale percorso (path) per raggiungerlo.

<object type="audio/x-mid" data="nome_file.mid">
<param name="src" value="nome_file.mid">
</object>


<param name autostart value

Con l'attributo autostart value si stabilisce se il brano deve avviarsi automaticamente: value="true", oppure no value="false", sono ammessi anche valori come "1" e "0".

<object type="audio/x-mid" data="nome_file.mid">
<param name="src" value="nome_file.mid">
<param name="autostart" value="false">
</object>


param name loop

Con l'attributo loop si stabilisce se il brano deve essere ripetuto all'infinito: value="true" o una sola volta value="false" sono ammessi anche valori come "1" e "0".

<object type="audio/x-mid" data="nome_file.mid">
<param name="src" value="nome_file.mid">
<param name="autostart" value="0">
<param name="loop" value="1">
</object>


il tuo browser non riconosce questo codice midi.mid

Nota: ho fatto uso di un file midi per due motivi, il primo perchè questo formato è molto leggero e non richiede tempi di attesa lunghi prima di essere riprodotto. Il secondo è che quel midi l'ho creato io anche se grazie ad un apposito programma, questo mi garantisce da eventuali problemi di violazione del diritto d'autore. Fate sempre molta attenzione ai brani audio che riproducete sul vostro sito, meglio avere il permesso da parte del suo autore o essere certi che siano brani musicali free.

Torna su

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

forum


Andrea Bianchi