Pubblicato il

Crea una classifica mp3 musicale con jQuery

Autori

La settimana scorsa ho iniziato lo sviluppo di un sito community con tematica musicale. Nel creare una prima bozza da far vedere al cliente, mi posi il problema della sezione classifiche hit della musica.
Navigando alla ricerca di un plugin jQuery che faccia al caso mio, tra i pochi risultati ho scelto il plugin jMP3 per la sua facilità di implementarlo nelle proprie pagine: è semplicissimo ricreare una playlist musicale integrandolo con Flash Single MP3 Player (un piccolo componente Flash per la riproduzione di file MP3).
Come ho specificato per funzionare jMP3 ha bisogno di un componente Flash, ma nessuna riga di codice Flash troveremo o dovremo scrivere all’interno della nostra pagina.

Implementarlo è veramente semplice: iniziamo scaricando il pacchetto di esempio. Nell’intestazione della pagina principale di esempio richiamiamo la libreria jQuery e il plugin:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jmp3.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('#sound').jmp3({
      filepath: '',
      backcolor: 'C52C7C',
      forecolor: 'FFFFFF',
      width: '310',
      volume: '100',
      showdownload: 'false',
      showfilename: 'false',
    })
  })
</script>

segue la parte di codice in javascript per l’inizializzazione del plugin. Indichiamo tramite il selettore la classe dei div che vogliamo trasformare in player e le caratteristiche per personalizzarlo:

  • filepath – percorso del file MP3 rispetto alla directory in cui si trova questa pagina;
  • backcolor – colore di sfondo;
  • forecolor – colore di primo piano (pulsanti);
  • width – larghezza del player (misurata in px);
  • repeat – MP3 in loop (true o false);
  • volume – volume musica (0-100);
  • autoplay – riproduzione automatica (true o false);
  • showdownload – visualizza pulsante per il download del file (true o false);
  • showfilename – visualizza il nome del file dopo il player (true o false);

Una cosa da fare subito, riguardo le impostazioni, è aprire il file js del plugin e specificare la posizione del player singlemp3player.swf alla variabile playerpath.

Infine non resta che inserire nel corpo della nostra pagina i div o qualsiasi altro elemento vogliamo trasformare in player, specificando la classe scelta nel codice sopra e il nome del file MP3 da riprodurre:

<body>
    <div class="sound">sound.mp3</span>
    <div class="sound">sound.mp3</span>
    <div class="sound">sound.mp3</span>
</body>

Siamo arrivati alla fine… lo so passa molto tempo tra un post e l’altro, a me dispiace tantissimo non so voi?! Mi scuso ma il tempo è questo, devo chiedere qualche consiglio in più a Davide Pozzi per organizzare nel migliore dei modi il mio tempo libero, anche perché le idee ci sono!

😉 alla prossima

Discutiamone su Twitter