Realizzare un semplice player in JQuery

Molte volte, quando realizziamo un sito per un cliente, ci viene richiesto di integrare un mini player minimale nel sito che stiamo realizzando. Per manipolare i file audio che importiamo, ad esempio, da un URL in JSON dobbiamo usare sicuramente Javascript, ma quando si parla di javascript al 90% dei casi, se le operazioni sono articolate, si può usare il framework JQuery. Allora iniziamo a creare il nostro player in JQuery.

HTML

Partiamo dal codice HTML da incorporare nel nostro sito web:

<div id="jukebox">
    <div class="info">Attendere...</div>
        <div class="controls">
            <a class="prev" href="#" title="Indietro"><span>Prev</span></a>
                <a class="play" href="#" title="Play"><span>Play</span></a>
                <a class="pause" href="#" title="Pause"><span>Pause</span></a>
                <a class="next" href="#" title="Avanti"><span>Next</span></a>
        </div>
        <div class="loader">
            <div class="load-progress">
                    <div class="play-progress">
                        </div>
                </div>
        </div>
        <audio class="aud">
            <p>Il tuo browser non supporta l'audio.</p>
        </audio>
</div>

Il codice sopra comprende un div chiamato info che visualizzerà il titolo del brano, i tasti play, pause ecc. e una barra di progresso.

JAVASCRIPT

Ora definiamo l'array json con titolo e url dei brani da importare:

var playlist = [
        {
            url : "musics/RockClock.mp3",
            title : "Rocking around..."
        },
        {
            url : "musica/Requiem.mp3",
            title : "Requiem"
        },
        {
            url : "musica/Days.mp3",
            title : "Days"
        }
    ];

Il codice javascript seguente è il codice che fa funzionare il player audio, importando e parsando i dati dal JSON precedente:

$(document).ready(function() {
   
        var aud = $('#jukebox .aud').get(0);
        aud.pos = -1;
   
        $('#jukebox .play').bind('click', function(evt) {
            evt.preventDefault();
            if (aud.pos < 0) {
                $('#jukebox .next').trigger('click');
            } else {
                aud.play();
            }
        });
       
        $('#jukebox .pause').bind('click', function(evt) {
            evt.preventDefault();
            aud.pause();
        });
       
        $('#jukebox .next').bind('click', function(evt) {
            evt.preventDefault();
            aud.pause();
            aud.pos++;
            if (aud.pos == playlist.length) aud.pos = 0;
            aud.setAttribute('src', playlist[aud.pos].url);
                        $('#jukebox .info').html(playlist[aud.pos].title);
            aud.load();
        });
       
        $('#jukebox .prev').bind('click', function(evt) {
            evt.preventDefault();
            aud.pause();
            aud.pos--;
            if (aud.pos < 0) aud.pos = playlist.length - 1;
            aud.setAttribute('src', playlist[aud.pos].url);
                        $('#jukebox .info').html(playlist[aud.pos].title);
            aud.load();
        });
       
        aud.addEventListener('progress', function(evt) {
            var width = parseInt($('#jukebox').css('width'));
            var percentLoaded = Math.round(evt.loaded / evt.total * 100);
            var barWidth = Math.ceil(percentLoaded * (width / 100));
            $('#jukebox .load-progress').css( 'width', barWidth );
           
        });
       
        aud.addEventListener('timeupdate', function(evt) {
            var width = parseInt($('#jukebox').css('width'));
            var percentPlayed = Math.round(aud.currentTime / aud.duration * 100);
            var barWidth = Math.ceil(percentPlayed * (width / 100));
            $('#jukebox .play-progress').css( 'width', barWidth);
        });
       
        aud.addEventListener('canplay', function(evt) {
            $('#jukebox .play').trigger('click');
        });
       
        aud.addEventListener('ended', function(evt) {
            $('#jukebox .next').trigger('click');
        });
       
   
        $('#jukebox .info').html(playlist[0].title);
   
    });

Il player realizzato va integrato con un css e delle icone per i pulsanti, in modo da renderlo accattivante in questo modo:

       #jukebox {
            background-color:silver;
            -moz-border-radius:10px;
            -webkit-border-radius:10px;
            color:#fff;
            font-family:helvetica, arial, verdana;
            font-weight:bold;
            width:100%;
            overflow: hidden;
            padding: 1px;
        }
        #jukebox .loader {
            border:1px solid #fff;
            height:2px;
            margin:0px 0px;
                        float: right;
                        width: 99%;
        }
        #jukebox .load-progress {
            width:0px;
            background-color:#fff;
            height:3px;
        }
        #jukebox .play-progress {
            width:0px;
            background-color:#9999cc;
            height:3px;
        }
       
        #jukebox .controls {
            text-align:center;
                        width: 55%;
                        float: right;
        }
       
        #jukebox .controls a {
            display:inline-block;
            width:23px;
            height:23px;
            margin:0px 2px;
            overflow:hidden;
        }
       
        #jukebox .controls a:hover {
            background-color:#dedede;
        }
       
        #jukebox .controls a span {
            display:none;
        }
       
        #jukebox .controls a.prev {
            background-position:top -46px;
                        background-image:url('next.png');
                        background-repeat:no-repeat;
        }
        #jukebox .controls a.next {
            background-position:top -69px;
                        background-image:url('prev.png');
                        background-repeat:no-repeat;
        }
        #jukebox .controls a.play {
            background-position:top left;
                        background-image:url('play.png');
                        background-repeat:no-repeat;
        }
        #jukebox .controls a.pause {
            background-position:top -23px;
                        background-image:url('pause.png');
                        background-repeat:no-repeat;
        }

Come avete visto se siete arrivati qui in fondo, questo player è molto semplice da realizzare e personalizzare per tutte le esigenze. Sicuramente è da integrare e perfezionare ma è un'ottima base di partenza.