|
Gestire i suoni col VBScript
rudyF
Inserire dei suoni in una pagina web è da alcuni considerato un vezzo, simpatico e gradevole che accompagna la navigazione, mentre da altri una grande scocciatura.
Io appartengo alla prima schiera, e per coloro che la pensano come me, ho scritto queste righe. In verità, un articolo simile è già stato scritto da Francis (potete leggere la sua Francis's pill su HTML.it ma, a parte le istruzioni d'uso generale, i suggerimenti si riferiscono a JavaScript. Poiché in questa sede si parla di VBScript e questo linguaggio è supportato solo da IE, i suggerimenti proposti sono da considerarsi validi solo per questo browser.
I files musicali che possiamo caricare possono avere le seguenti estensioni:
".wav" - ".mid" - ".mp3" - ".au"
Evita i files pesanti, cioè di molti Kb.
Un file.wav è molto più pesante dello stesso file convertito in mp3.
Per caricare un file possiamo usare:
oppure
Cominciamo ad esaminare "bgsound"
Conosciamo tutti il significato di "src" Questo attributo assume il percorso del file da caricare: se il file è nella stessa cartella della pagina che lo richiama basta digitare:
altrimenti
<bgsound src="cartellaX/cartellaY/file.mid">
|
Altri attributi di bgsound sono:
Name: il nome dell'elemento
id: l'identificativo dell'elemento
Balance: bilanciamento del suono nelle due casse - default = 0
Volume: il significato è chiaro (tra 0 e -10000)
Autostart: il suono parte appena caricato (="true") oppure non parte (="false")
Loop: significa ciclo, cioè quante volte va ripetuto il brano es. 1 / 2 / 15 / ecc.
-1 = suono continuo (accetta anche "infinite")
Ora esaminiamo "embed"
name: come col bgsound
id: come col bgsound
src: come col bgsound
volume: come col bgsound
autostart: come col bgsound
loop: (o playcount) come col bgsound
"embed" visualizza sullo schermo una consolle
possiamo farla sparire con l'attributo: hidden = "true"
Possiamo definire le dimensioni della consolle con:
height: default = 22px
width: default = 144px
align: imposta la posizione della consolle nella pagina
l'attributo "align" può avere questi valori:
top, bottom, center, baseline, left, right, texttop,
middle, absmiddle, absbottom es: align = "center"
Altri attributi sono:
starttime: ="01:20" il suono parte dopo 80 secondi
endtime: ="02:35" il suono si ferma dopo 155 secondi
Questi attributi sul mio XP non funzionano!
Facciamo un esempio: mettiamo un suono di sottofondo nella nostra pagina.
|
<bgsound src="sottofondo.mid" loop="-1"> |
Mettiamo questa istruzione nell'head e lanciando la pagina il suono parte automaticamente (se ti sei ricordato di mettere il file musicale nella cartella)
Non c'è bisogno di mettere l'attributo "autostart", se vogliamo metterlo, male non fa. (Secondo me bgsound lo ignora)
Quando la musica finisce ricomincia dall'inizio (loop="-1")
Dare un nome all'elemento "bgsound" ora non serve.
Se vogliamo inserire altri suoni e farli partire, magari con un evento, sarebbe meglio che il sottofondo abbia un volume basso in modo che gli altri suoni vengano messi in evidenza.
Così inseriamo l'argomento "volume"
|
<bgsound src="sottofondo.mid" loop="-1" volume="-1500"> |
Il volume del suono si è ridotto un bel po'.
Ora sostituiamo "bgsound" con "embed" lasciando il resto inalterato.
|
<embed src="sottofondo.mid" loop="-1" volume="-1500"> |
Questa istruzione andrebbe messa nel body, se non lo facciamo noi ci pensa l'editor (almeno il mio lo fa). Lanciamo la pagina e ..... a me non funziona!
Non so se per te è lo stesso. In questo caso salva la pagina e rilanciala. Tutto OK.
Ogni volta che nel listato si modifica qualcosa, qualsiasi cosa, bisogna salvare.
Questo succede solo con "embed" (Forse è colpa del mio editor!)
Bene, a video vediamo la consolle con la quale possiamo interagire.
All' embed aggiungiamo hidden="true" e la consolle sparisce.
|
<embed src="sottofondo.mid" loop="-1" volume="-1500" hidden="true"> |
Ora non vogliamo più che il suono parta automaticamente, ma vogliamo avviarlo noi con un evento. Per fare in modo che il suono non parta aggiungiamo l'attributo "autostart" e gli diamo valore "false"
|
<embed src="sottofondo.mid" loop="-1" volume="-1500" hidden="true" autostart="false"> |
Proviamo: come ci si aspettava il suono non parte.
Proviamo con "bgsound": il suono parte lo stesso a dimostrazione che "bgsound" proprio non vede l'attributo "autostart"
Non ce ne frega niente: rimettiamo "embed"!
Nella pagina mettiamo un pulsante il cui click esegue la sub OnOff
Questa sub dovrà dire all'embed di eseguire il file musicale. Per dare un ordine all'embed bisogna sapere come si chiama. Quindi diamogli un nome
<embed src="sottofondo.mid" loop="-1" volume="-1500" hidden="true" autostart="false" name="SuonoDiSottofondo">
<input type="button" value="accendi / spegni" onClick="OnOff()">
|
<script Language="VBSCRIPT"> <!--
Sub OnOff()
document.SuonoDiSottofondo.play()
End sub
--> </script> |
Lanciata la pagina facciamo un bel click sul pulsante ed il suono si avvia. (Dovrebbe !!!)
Ora noi non ci accontentiamo certo di avviare il suono, vogliamo anche fermarlo.
Per far ciò modifichiamo la sub.
<script Language="VBSCRIPT"> <!--
Dim x
Sub OnOff()
x = -(x = 0)
if x = 1 then
document.SuonoDiSottofondo.play()
else
document.SuonoDiSottofondo.stop()
End if
End sub
--> </script> |
Tutto OK?
Se vuoi che il suono riparta da dove si è fermato, al posto di "stop" metti "pause"
Volendo potremmo associare all'evento anche altre azioni; per esempio cambiare la dicitura sui pulsanti, cambiare il background o un'immagine, ecc.
Basterebbe aggiungere qualche riga di codice nello script.
Ma ciò non è attinente all'argomento proposto (stiamo parlando di suoni!)
Quando cambiamo pagina il nostro suono di sottofondo si ferma.
Come fare per farlo sentire durante tutta l'esplorazione del sito?
Il modo più semplice è quello di dividere la pagina in frames. Si mette l'embed in un frame assieme alla barra di navigazione o al menu che deve sempre essere visibile per poter richiamare le altre pagine che verranno visualizzate nell'altro frame.
Se non abbiamo inserito un menu, il frame ci servirà solo per la musica di sottofondo; in questo caso lo rendiamo invisibile associando ad esso il valore zero alle sue dimensioni o ad una di esse.
Dividere la pagina in frames porta un altro vantaggio se hai il sito in uno spazio web gratuito. Il Provider inserisce dei banner pubblicitari e qualcuno di questi interferisce col funzionamento degli script (VBScript) della pagina visualizzata, ma solo su quella. Se questa pagina la dividiamo in frames, tutto fila liscio.
............................................................................................................................
Oltre al suono di sottofondo, vogliamo sentire nella nostra pagina altri tre suoni, per questo scopo inseriamo tre pulsanti. (Descriverò un altro metodo più avanti.)
Per prima cosa metti nella cartella tre files musicali (negli esempi metterò files ".wav", ma tu usa quelli che hai, basta che ti ricordi di modificare gli esempi)
I pulsanti li mettiamo in un contenitore DIV così li possiamo spostare dove ci pare.
Ma prima mettiamo i tre "embed"
<embed name="emb1" src="suono1.wav" hidden="true" autostart="false">
<embed name="emb2" src="suono2.wav" hidden="true" autostart="false">
<embed name="emb3" src="suono3.wav" hidden="true" autostart="false">
<div id="pulsanti" style="width:250px; height:50px; position:absolute; left:10px; top:200px; z-index:1;"> <p>
<input type="button" value="suono1" >
<input type="button" value="suono2" >
<input type="button" value="suono3" >
</p></div>
|
I suoni non si avviano perché l'attributo "autostart" è impostato su "false"
Anche cliccando sui pulsanti non succede nulla: non abbiamo associato loro nessun evento. Lo facciamo subito.
Ai tre input aggiungiamo: onclick = "cambiasuono(x)"
La sub "cambiasuono" ancora non esiste, quindi creiamola e mettiamola nello script che c'è già oppure facciamone uno nuovo.
<div id="pulsanti" style="width:250px; height:50px; position:absolute; left:10px; top:200px; z-index:1;"> <p>
<input type="button" value="suono1" onClick="cambiasuono(1)">
<input type="button" value="suono2" onClick="cambiasuono(2)">
<input type="button" value="suono3" onClick="cambiasuono(3)">
</p></div>
<script Language="VBSCRIPT"> <!--
Sub cambiasuono(y)
Select case y
case 1 document.emb1.play()
case 2 document.emb2.play()
case 3 document.emb3.play()
End select
End sub
--> </script> |
Clickiamo sui pulsanti e ..... che casino !!! ..... che cacofonia !!!!!
Tutti i suoni si sentono contemporaneamente !!
Serve qualcosa per fermare un suono prima di avviarne un altro.
Bhé, il sottofondo possiamo lasciarlo suonare parché abbiamo tenuto basso il suo volume, per stoppare gli altri aggiungiamo una sub (fermasuoni) nello script.
<script Language="VBSCRIPT"> <!--
Sub cambiasuono(y)
fermasuoni Select case y
case 1 document.emb1.play()
case 2 document.emb2.play()
case 3 document.emb3.play()
End select
End sub
Sub fermasuoni()
document.emb1.stop()
document.emb2.stop()
document.emb3.stop()
End sub
--> </script> |
Bene! Ora dovremmo sentire distintamente i nostri tre suoni, ma .....
Mannaggia! C'è sempre un ma!
Tutto fila liscio con i files .wav e .mp3
I files .mid invece, con VBScript e alcune versioni di IE hanno problemi.
Risolviamoli definitivamente usando un metodo garantito.
Crea delle nuove pagine, una ogni file musicale e in queste pagine metti solo l'istruzione che carica un suono:
<bgsound src="suono1.mid" loop="-1">
|
in un'altra:
<bgsound src="suono2.wav" loop="-1">
|
e ancora:
<bgsound src="suono3.mp3" loop="-1">
|
Puoi usare "embed" se preferisci.
Se prevedi di mettere l'opzione con cui fermare tutti i suoni aggiungi una pagina vuota. Per esempio potremmo chiamare queste pagine "suono1.htm" - "suono2.htm" - "suono3.htm - "vuota.htm"
Ti ricordi del frame che hai creato per gestire i suoni?
Bene! Se lo stai usando solo per i suoni va bene quello altrimenti creane un altro con dimensione 0% oppure per essere sicuri con dimensioni di 1px
Da questo frame richiami la pagina col suono che vuoi par partire per primo, oppure la pagina vuota.htm se non vuoi far partire alcun suono.
Ascoltiamo i nostri files musicali con:
<a href="suono1.htm" target="NomeDelFrame">musica uno</a>
<a href="suono2.htm" target="NomeDelFrame">musica due</a>
<a href="suono3.htm" target="NomeDelFrame">musica tre</a>
<a href="vuota.htm" target="NomeDelFrame">senza musica</a>
|
Ogni volta che richiami una pagina, il suono contenuto nella pagina precedente si ferma: prima era un problema, ora è un vantaggio.
............................................................................................................................
Continuiamo il nostro discorso sui suoni usando un altro metodo.
Mettiamo nella nostra pagina un "bgsound" (uno solo) per attivarli.
Come vedi l'abbiamo solo dichiarato.
Perché un "bgsound" e non un "embed"?
Semplice. Perché quello che stiamo per fare non funziona con "embed".
E, bada bene, per identificarlo non vuole "name" ma "id".
Abbiamo omesso tutti gli attributi perché:
il volume non ci interessa
il loop neppure (facciamo eseguire il suono una sola volta)
autostart lo ignora
src non è necessario perché non sappiamo ancora quale suono eseguire
Ricordati che bgsound va messo nell'head.
Ora mettiamo nella nostra pagina tre diversi hyperlink. (Abbiamo tre suoni!)
<p><a href="http://www.microsoft.it" OnMouseOver="document.all.bgs.src='suono1.wav'"> visitiamo il sito dello zio Bill</a></p>
<p><a href="http://www.vbscript.it" OnMouseOver="document.all.bgs.src='suono2.wav'"> in questo sito si parla di VBScript</a></p>
<p><a href="http://web.tiscali.it/zodiacobar" OnMouseOver="document.all.bgs.src='suono3.wav'" OnMouseOut="document.all.bgs.src='suono1.wav'"> facciamoci un drink allo Zodiaco Bar</a></p>
|
Il terzo hyperlink oltre all'evento "OnMouseOver" è sensibile anche all'evento "OnMouseOut". In parole povere quando il puntatore ci va sopra attiva un suono, quando lo togli ne attiva un altro.
Con questo metodo non occore fermare un suono prima di attivarne un altro, perché il "bgsound" è uno solo e può suonare un motivo alla volta.
Questo è tutto.
Buona fortuna.
|