Il sito per imparare gratuitamente a fare pagine Web

Guida XHTML con Style

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



Andrea Bianchi © www.web-link.it  Guida XHTML con Style - Ver. 1.5.1  

Multimedia: Audio, Applets, Script

Nella lezione precedente abbiamo appreso l'uso di Iframe e con quello si è conclusa la fase di impaginazione, avendo praticamente visto tutto ciò che serve realmente per creare un sito web formato da immagini e testo. E' però possibile inserire anche effetti speciali come l'audio o animazioni particolari.

Audio

Da premettere che fino ad ora tutto il codice visto ed adoperato era letto ed interpretato dal browser di navigazione, essendo questo conforme allo standard XHTML ci garantiva la sua visualizzazione ottimale da parte di qualsiasi browser a prescindere dal sistema operativo adoperato. Con l'audio le cose cambiano perchè non basta il solo browser né il fatto che il codice risulti corretto, questa volta si deve fare uso di "programmi accessori" che sono definiti anche plug-in e si basano su programmi esterni veri e propri che sono di regola installati nei vari sistemi operativi. Per ascoltare un brano audio per esempio, sia questo in formato midi o in MP3, ma anche in uno degli altri possibili formati, si deve avere installato nel proprio PC un programma come il Multimedia Player di Windows o il QuickTime di Apple o qualsiasi altro in grado di riconoscere e gestire il formato audio usato. Senza questi plug-in non sarà possibile vedere o sentire nulla nonostante la sintassi usata risulti essere più che corretta.

Prendiamo la nostra struttura html, quella usata nelle lezioni precedenti, ed inseriamo le istruzioni per richiamare e gestire un brano audio che in questo caso è formato da un file di tipo midi:

<body>
<object type="audio/x-mid" data="nome_midi.mid" height="40" width="170">
<param name="src" value="nome_midi.mid" />
<param name="autostart" value="true" />
<param name="repeat" value="true" />
<param name="loop" value="true" />
</object>
</body>

Questo il risultato:



Si dovrebbe visualizzare una parte dell'interfaccia grafica adoperata dal vostro sistema operativo e si dovrebbe udire il brano musicale di sottofondo, uso il condizionale perchè in realtà questo dipende da molti fattori come ho appena spiegato sopra.

Dovendo illustrare il codice adoperato: si fa uso di object e se ne specifica il type audio/x-mid ed il data nome_midi.mid in questo caso un file in formato midi che dovrà essere il nome del brano che si trova nella stessa cartella in cui c'è la pagina che lo richiama. Nome che viene ripetuto poi nel parametro sotto relativo al sorgente src.

Ci sono anche height e width per impostare le dimensioni visibili dell'interfaccia grafica del programma adoperato, in questo esempio 40 pixel in altezza e 170 pixel in larghezza. (ottimi per chi ha windows col multimedia player a corredo)

Seguono una serie di parametri relativi a: autostart, repeat, loop e servono per stabilire se il brano deve avviarsi da solo, se deve essere ripetuto e per quante volte, i valori ammessi sono true o 1 per si e false oppure 0 per no.
Se al posto di un file midi si vuole riprodurre un file di tipo: mp3, wav, ogg è sufficiente cambiare il parametro all'interno di type oltre al nome del file. Per i vari parametri vi rimando alla guida HTML

Come dicevo ad inizio di questo argomento, molto dipende dal tipo di browser che visualizzerà la pagina, per esempio in certe versioni il comando object potrebbe non essere riconosciuto, o male interpretato, si dovrebbe allora prevedere un riconoscimento del tipo di browser e richiamare di conseguenza il codice più appropriato.

Anche se obsoleto per XHTML il comando embed è al momento la sola alternativa per molti tipi e versioni di browser, è possibile adoperarlo in questo modo:

<body>
<embed src="nome_midi.mid" autostart="false" loop="true" height="40" width="170">
</embed>
</body>

Questo il risultato:

Anche in questo caso si dovrebbe vedere parte dell'interfaccia grafica (170 x 40 px), la muisca non si sente perchè ho usato false in autostart, se state ascoltando il brano è per via del codice precedente, fermate la musica cliccando sul pulsantino di stop dall'interfaccia grafica vista sopra per l'uso di object, premete adesso sul pulsantino play di questo codice e se il vostro browser riconosce embed dovreste ascoltare lo stesso identico brano avviato automaticamente in precedenza.

Uso sempre il condizionale perchè purtroppo le cose sono meno semplici di quello che sembra, il motivo non è il codice adoperato ma le differenti interpretazioni da parte dei browser ed i vari programmi installati nei sistemi operativi, inizialmente c'era persino un comando proprietario dei soli browser Internet Explorer, si trattava di bgsound, poi è stata la volta di embed ed infine object.

Si potrebbe creare codice html che faccia delle scelte a seconda del browser adoperato in modo da fargli leggere ed eseguire soltanto il codice più adeguato ma non vi sono certezze sulla garanzia di buon funzionamento.

Questo sotto il codice per la scelta di tipo: se il browser è IE e la sua versione è inferiore alla 5, leggi ed esegui embed in qualsiasi altro caso leggi ed esegui object.

<body>
<!--[if gte IE 5]>
<embed src="nome_midi.mid" autostart="false" loop="true" width="170" height="40"></embed>
<![endif]-->

<object type="audio/x-mid" data="nome_midi.mid" height="40" width="170">
<param name="src" value="nome_midi.mid" />
<param name="autostart" value="true" />
<param name="repeat" value="true" />
<param name="loop" value="true" />
</object>
</body>

Con questa lezione le vostre pagine si sono arricchite di un opzionale sottofondo musicale, vorrei ricordare che sarebbe buona norma lasciare al visitatore la possibilità di avviare e fermare l'audio per non costringerlo ad ascoltare la vostra musica che potrebbe non risultare sempre gradita a tutti.

Nella prossima lezione impareremo ad inserire un'applet Java.

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



Andrea Bianchi