Una playlist MP3 con jQuery e Scriptaculous

In questo articolo vedremo come integrare facilmente in una pagina web una piccola playlist di MP3. Useremo solo Javascript, senza ricorrere all'ausilio di un player in Flash: l'esempio prevede l'avvio automatico dell'audio al caricamento della pagina, la possibilità di scelta della traccia da eseguire e l'inserimento dei controlli per l'avvio e l'interruzione della riproduzione.

La struttura HTML richiesta è veramente minimale: è necessaria una semplice select con le varie opzioni (option) contenenti il percorso dei file MP3 da riprodurre (settato nell'attributo value). Vengono poi i due pulsanti, Play e Stop, per avviare o fermare la riproduzione. Possiamo anche inserire un elemento (ad esempio un paragrafo) da aggiornare “on the fly” per fornire delle notifiche sullo stato della riproduzione (on/off). Ecco il codice:

<select id="sound_track">
	<option value="../mp3/Balls_64kb.mp3" selected="selected">track 1 - Balls</option>
	<option value="../mp3/dreamfish_64kb.mp3">track 2 - Dreamfish</option>
    <option value="../mp3/EmControl_64kb.mp3">track 3 - EmControl</option>
</select>
<ul class="sound_controls list">
	<li><a href="#" id="sound_play">Play</a></li>
	<li><a href="#" id="sound_stop">Stop</a></li>
</ul>

Un'implementazione più avanzata dello script potrebbe prevedere di inserire il contenuto HTML richiesto dal player direttamente via DOM o Ajax, in modo da non rovinare la semantica del documento con tag inutili, nel caso in cui Javascript sia disabilitato.

Su questo markup HTML di base ho preparato due esempi, che differiscono per la parte Javascript. Ho infatti utilizzato due differenti framework:

1. Primo esempio con Prototype (1.6.0.3), Scriptaculous (1.8.1) e Scriptaculous Sound
2. Secondo esempio con JQuery (1.3.1) e JQuery.sound

Le librerie incluse sono le ultime rilasciate, in versione non compressa, per facilitare il debug. Lo script è in entrambi i casi di una semplicità disarmante e viene eseguito con modalità comuni: recupera il valore selezionato nella select e lo passa alla funzione che avvia la riproduzione dell'audio.

Gli esempi presentati ci danno lo spunto per analizzare le caratteristiche, la compatibilità e il metodo di funzionamento dei due plugin utilizzati, che possono prestarsi alla realizzazione di script per molteplici altri impieghi: pensiamo ai suoni per i link di un menu (stile “bottone flash”!) o alla notifica di un evento anche tramite audio (“blink”, “bip”), etc... Basta solo un po' di fantasia.

Esempio con Scriptaculous Sound

Sin dalla versione 1.7 di Scriptaculous è stato introdotto un piccolo modulo (Sound.js) che consente di riprodurre suoni nelle pagine web senza dover ricorrere a un player basato su Flash.

Per quanto riguarda la compatibilità, Sound presuppone il supporto da parte del browser del formato MPEG Audio Layer (il comune MP3), sia esso nativo o ottenuto con l'installazione del plugin apposito. Vediamo allora le possibili situazioni che si possono presentare:

• Su OS X, non ci sono problemi. Ogni browser istallato su piattaforma Mac beneficia del supporto di QuickTime per i file audio.
• In Windows, Effect Sound funziona nativamente su Internet Explorer; per quanto riguarda la maggioranza degli altri moderni browser, di solito è necessario il plug-in QuickTime installato, che comunque vanta una buona diffusione, anche se forse inferiore a Flash.
• In ambiente Linux, come sempre, tutto dipende da quali pacchetti sono stati installati dall'amministratore di sistema.
• Attenzione soprattutto in fase di debug: per quanto riguarda le ultime versioni di Firefox (3.x), Effect Sound non funziona se eseguito in locale (ma funzionerà su un localhost).

Mi sembrano tutto sommato dei compromessi accettabili per la riproduzione di un file multimediale attraverso il browser.

Sound mette a disposione tre metodi:

• Sound.play: accetta due parametri, url, obbligatorio (l'indirizzo del file da riprodurre) e un hash di opzioni: track (string, specifica il nome della traccia), replace (booleano, che specifica se sovrascrivere l'eventuale traccia in esecuzione o eseguirne un'altra, di default è false).
• Sound.disable: impedisce la futura riproduzione dei suoni (non serve a fermare la riproduzione corrente come potrebbe sembrare).
• Sound.enable: riabilità la riproduzione dei suoni (non svolge funzione di “pausa”).

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.