JavaScript  »  Articoli  »  Effetti e controlli Javascript 

In pratica i metodi disable ed enable non interferiscono sulla riproduzione corrente, ma hanno effetto solo sugli eventi successivi. Non esiste una funzione Sound.stop predefinita, ma per fermare la riproduzione basterà effettuare una chiamata a Sound.play passando come parametri un url vuoto('') e replace=true, sovrascrivendo così la traccia in esecuzione. Al momento non sono previsti né la funzionalità di mandare in loop l'audio né il settaggio del volume. Questo è il prezzo della semplicità che ci consente però di “dar voce” alle nostre pagine web con pochissime righe di codice.

Ecco la breve prozione di codice Javascript utilizzata:

<script type="text/javascript">
function myPlayer() {
	
	Sound.play($F('sound_track'));	

	$('sound_play').observe('click', function(event) {
    	event.stop();
       	Sound.play($F('sound_track'),{replace:true});
		$('sound_status').update('ON');
   	});

	$('sound_stop').observe('click', function(event) {
    	event.stop();
       	Sound.play('',{replace:true});
     	$('sound_status').update('OFF');
   	});							 
												
}
Event.observe (window, 'load', myPlayer)
</script>

Esempio con jQuery.Sound

Se il nostro framework preferito è jQuery abbiamo qualche alternativa in più nella scelta del plugin da utilizzare.

Al momento, volendo realizzare il tutto con il solo Javascript, ci occuperemo di jQuery.sound, che rappresenta il porting di Scriptaculous Sound. Cambia ben poco, le caratteristiche di configurazione (come anche la compatibilità con i vari browser) e funzionamento sono molto simili:

• Sound.play: avvia la riproduzione del suono e accetta come parametro obbligatorio il percorso del file (url), mentre prevede come facoltativi track (permette anche in questo caso la gestione delle tracce tramite degli identificativi) e timeout (che termina la riproduzione dopo un periodo di tempo fissato arbitrariamente, non particolarmente utile). Riguardo a quest'ultimo parametro, ho effettuato una correzione nel plugin incluso nell'esempio dell'articolo rispetto alla versione originale, che di fatto interrompeva la riproduzione delle traccia dopo un tempo massimo di 2 secondi, se non diversamente dichiarato.
• Sound.enable: abilita/disabilita la riproduzione e accetta (o restituisce) un valore boleano.
• Sound.remove: arresta con effetto immediato la riproduzione corrente precedentemente inizializzata con il metodo Play.

Volendo ottenere un maggiore controllo sulle modalità di riproduzione audio, esiste per JQuery un ulteriore plugin, che si avvale però dell'utilizzo di un file .swf, seppur in background: è un omonimo del precedente, anch'esso si chiama Sound, ma dispone di diversi metodi e nuove funzionalità, ad esempio la possibilità di mettere in pausa la riproduzione e di variarne il volume.

Anche per questo esempio vi proponiamo il codice essenziale:

<script type="text/javascript">
$().ready(function() {

	var mySound = $.sound.play($("#sound_track").val(),{track:'global'});

	$("#sound_play").click(function() {
		mySound = $.sound.play($("#sound_track").val(),{track:'global'});
		$("#sound_status").html("ON");
		return false;
	});
	
	$('#sound_stop').click(function() {
		mySound.remove();
		$("#sound_status").html("OFF");
		return false;
		
   	});							 

});
</script>

Gli esempi sono disponibili per il download.

Altri articoli

Altre guide

Altre newsletter