Tra le varie librerie Javascript emerse recentemente, jQuery si è da subito guadagnata un suo spazio di rilievo e l'attenzione di tanti sviluppatori che intorno ad essa hanno saputo creare un ricco set di plugin, in continua crescita e in grado di estenderne facilmente le funzionalità.
Non è questa le sede per soffermarci sulle potenzialità, sui pro e sui contro di jQuery, argomenti che richiederebbero ben più di un articolo. In fondo trovate comunque una serie di link utili per un primo contatto e per l'approfondimento.
Ci occuperemo invece del plugin jMP3 e di come, integrandolo con Flash Single MP3 Player (un piccolo componente Flash per la riproduzione di file MP3), possa facilitare l'inserimento nelle proprie pagine di un semplice ma efficace riproduttore musicale. Ecco subito l'esempio che andremo a realizzare insieme.
Cosa ci serve
Tutto quello di cui abbiamo bisogno è contenuto nel pacchetto jmp3_dl.zip allegato all'articolo. Scompattandolo ci troverete:
- esempio.html - Il documento HTML della demo
- jquery.js - La versione compressa (il peso è di appena 19kb) della libreria jQuery
- jquery.jmp3.js - Il plugin jMP3
- singlemp3player.swf - Il piccolo (3kb) player in Flash con cui interagisce il plugin
- sound.mp3 e element sun.mp3 - I due file mp3 usati nella demo
Come funziona
Come evidenzia l'autore, Sean 0, nella pagina di presentazione, i principali vantaggi di questo plugin sono la facilità di implementazione, la possibilità di personalizzazione e quella di inserire nella stessa pagina più player, un modo semplice quindi per creare delle vere e proprie playlist. Vedrete, tra l'altro, che pur essendo tutto basato su un componente Flash .swf, nel codice HTML useremo solo elementi come div, paragrafi o span, senza dover ricorrere ai metodi tradizionali per l'inserimento di oggetti Flash. Ma passiamo al codice.
Per prima cosa si dovranno includere nel modo consueto all'interno della sezione <head> della pagina i due principali componenti Javascript, la libreria jQuery (qui in versione compressa) e il plugin:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jmp3.js"></script>
Subito dopo si dovranno aggiungere un po' di righe per l'inizializzazione del player MP3. Ecco quelle usate nell'esempio:
<script type="text/javascript">
$(document).ready(function(){
$(".sound").jmp3({
backcolor: "000000",
forecolor: "ffffff",
width: 200,
showdownload: "false",
showfilename: "false"
});
});
</script>
Analizziamo i punti chiave.
$(document).ready(function() è il modo tipico con cui in jQuery si imposta l'esecuzione del codice di una funzione, che avviene in pratica quando il documento è caricato e pronto per essere manipolato. Da qui in avanti troviamo una serie di righe che impostano l'aspetto e il comportamento del nostro player.
Per prima cosa: dove vogliamo inserire il player? Nel nostro caso apparirà nel contesto di tutti gli elementi che hanno una classe 'sound' (es. <p class="sound">....</p>). Ecco come va impostata l'istruzione:
$(".sound").jmp3
Notate che l'indicazione degli elementi con classe 'sound' avviene come nei CSS, con il nome della classe preceduto dal punto.
Possiamo poi impostare i colori di sfondo (backcolor) e di primo piano (forecolor):
backcolor: "000000",
forecolor: "ffffff",
I valori devono essere quelli esadecimali ma non preceduti dal simbolo # come avviene nella scrittura di CSS. Nell'esempio abbiamo uno sfondo nero e il bianco per gli elementi in primo piano.
Con width si setta invece la dimensione orizzontale del player (nel nostro caso 200px):
width: 200,
Con l'opzione showdownload, invece, possiamo scegliere se inserire nel player un pulsante che fa partire il download dell'MP3 riprodotto. Se desideriamo inserirlo basterà usare il valore 'true' al posto di 'false. Ecco un esempio.
Infine, con l'opzione showfilename, decidiamo se mostrare accanto al player il nome dell'MP3 in esecuzione. Anche questa volta un esempio per chiarire.
Ci sono altre opzioni che è possibile impostare nello script di inizializzazione. Se non vengono usate, i valori saranno quelli di default presenti all'inizio del codice del plugin jquery.jmp3.js. Vediamo quali sono.
filepath: imposta il path dei file mp3 rispetto alla directory in cui si trova la pagina HTML.
repeat: impostato sul valore 'true' ripete la riproduzione del brano.
volume: imposta il volume di riproduzione (valori da 0 a 100);
autoplay: impostato su 'true' fa sì che il brano sia riprodotto automaticamente.
Ecco allora un altro esempio in cui abbiamo usato tutte queste impostazioni:
<script type="text/javascript">
$(document).ready(function(){
$(".sound").jmp3({
backcolor: "000000",
forecolor: "ffffff",
width: 100,
showdownload: "false",
showfilename: "false",
repeat: "true",
volume: "80",
autoplay: "true"
});
});
</script>
Un'ultima cosa. Aprendo jquery.jmp3.js, nella parte iniziale dedicata alle opzioni, troverete subito all'inizio quella per impostare la posizione del player singlemp3player.swf. Di default si presuppone che il player sia nella stessa certella del plugin Javascript (notate l'assenza di qualsiasi valore tre le virgolette):
var playerpath = "";
Ovviamente, se si decide di collocare il player Flash in un'altra cartella, bisognerà aggiustare la variabile con il valore giusto.
La parte HTML
Dopo aver impostato tutte le nostre opzioni, non ci resta che vedere come inserire il player nella pagina. Ricordate? Abbiamo stabilito di inserirlo nel contesto degli elementi con classe 'sound'. Ecco come si fa:
<p class="sound">sound.mp3</p>
<p class="sound">element sun.mp3</p>
Facile no? Un paragrafo (ma potrebbe essere qualunque elemento), una classe 'sound' e, attenzione, tra il tag di apertura e quello di chiusura il nome del file MP3 da riprodurre. Senza path, perché quello è impostato altrove, come abbiamo visto. Per l'esattezza lo script è configurato di default per eseguire file presenti nella stessa cartella della pagina HTML e del Javascript.
Sono ovviamente possibili ulteriori interventi. Per esempio si può assegnare l'inserimento del player ad elementi individuati tramite id invece che classi:
script type="text/javascript">
$(document).ready(function(){
$("#mysong").jmp3({
backcolor: "000000",
forecolor: "00ff00",
width: 200,
showdownload: "true"
});
});
</script>
Anche in questo caso, come si può notare, l'identificazione dell'id avviene allo stesso modo dei CSS, ovvero facendo precedere il nome dal simbolo #.
Link
Chiudiamo con una serie di link dedicati a jQuery:
- Il sito ufficiale
- La documentazione
- Link a tutorial e demo
- Plugin
- Una serie di post su jQuery sul blog di Maurizio Pelizzone
