immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Crea una classifica mp3 musicale con jQuery

di MaiNick | 9 Ott 2009 | jQuery | 4 Commenti

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 (truefalse);
  • showdownload – visualizza pulsante per il download del file (truefalse);
  • showfilename – visualizza il nome del file dopo il player (truefalse);

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

Tags: , , , ,

4 Commenti

  1. Riccardo ha detto:

    Bella Mainick un tool di facile implementazione e di ottima utilità…Anche se il tempo è poco non demordere, i tuoi consigli sono sempre utili 🙂

    A presto
    Riccardo

  2. ettore ha detto:

    Grazie Mainick per aver postato questo versatilissimo player..molto carino e semplice da configurare…l’ho scelto tra i tantissimi player che ci sono in rete.
    Mi chiedevo pero’: vorrei creare delle anteprime degli mp3 track..per intenderci come quelle di iTune…dove decidere la durata dei secondi..es:impostare il player per una durata di 20″…premesso che ho già provato con i tag audio:DURATION..o STARTTIME=”00:00″ ENDTIME=”00:20″ ma non funziona..il player continua ad eseguire tutta la song..mi potete aiutare? grazie

  3. MaiNick ha detto:

    Purtroppo non c’è un’opzione dello script che ti permette di far sentire una parte del mp3.
    Puoi risolvere dividendo tu l’mp3 e implementare sullo stesso lo script jMP3 per l’anteprima e un’altro per l’intera canzone.

  4. ettore ha detto:

    ciao MaiNick…

    infatti così ho fatto..li ho tagliati tutti con formatFactory…ottimo programma

    http://www.ginov.it/discografia.html

    un saluto da ettore…

Trackbacks

Lascia un Commento

^ Torna su