JavaScript  »  Articoli  »  Effetti e controlli Javascript 

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”).

Altri articoli

Altre guide

Altre newsletter