I cookie permettono il funzionamento di alcuni servizi di questo blog. Utilizzando questi servizi, accetti l'utilizzo dei cookie da parte nostra. Ok Rifiuta

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.

image

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.

Seguici su Facebook

Seguici su Google+

Renzo Cappelli

miafoto

Sono un appassionato di informatica, mi dedico allo sviluppo web e alla gestione dei sistemi web-based: realizzo siti e progetto software gestionale per privati e aziende. Ho tanta passione per tutto quello che riguarda il web e le nuove tecnologie, lavoro bene in team e collaboro con aziende e professionisti di settore.

Commenti

NON CI SONO ANCORA COMMENTI.

Lascia il tuo commento