https://philspector.com/wp-content/themes/philspector/assets/js/jukebox.js

1jQuery(document).ready(function($) {
2    if ( $('#jukebox').length ) {
3
4            // // players config
5            var playlist = [];
6            var tracks = [];
7            $('#jukebox .playlist').each(function(){
8               var a =  {
9                        title :  $(this).data('title'),
10                        image :  $(this).data('thumb'),
11                        album :  $(this).data('album'),
12                        albumlink :  $(this).data('album-link'),
13                        buy :  $(this).data('buy')
14                    };
15
16                playlist.push(a);
17            });
18            $('#jukebox .playlist .track').each(function(){
19               var b =  {
20                        associatedAlbum :  $(this).parent().data('album'),
21                        url : $(this).data('media'),
22                        track :  $(this).data('track'),
23                        trackNum :  $(this).data('track-no')
24                    };
25                tracks[$(this).data('track-no')] = b;
26            });
27            var aud = $('#audioplayer').get(0);
28            aud.pos = -1;
29
30            if ( $('.playlist .track').length > 0 ) {
31
32            // top player functions
33            $('#jukebox .play').bind('click', function(evt) {
34                evt.preventDefault();
35                if (aud.pos < 0) {
36                    $('#jukebox .next').trigger('click');
37                } else {
38                    aud.play();
39                }
40            });
41
42            $('#jukebox .pause').bind('click', function(evt) {
43                evt.preventDefault();
44                aud.pause();
45            });
46
47            $('#jukebox .next').bind('click', function(evt) {
48                evt.preventDefault();
49                if (aud.pos >= 0) {
50                    $('#jukebox').carousel('next');
51                }
52                aud.pause();
53                aud.pos++;
54                if (aud.pos == tracks.length) aud.pos = 0;
55                aud.setAttribute('src', tracks[aud.pos].url);
56                if ( $('#audioplayer').attr('data-playing') != tracks[aud.pos].trackNum ) {
57                    $('#audioplayer').attr('data-playing', tracks[aud.pos].trackNum);
58                    $('#jukebox .info a').attr('href', playlist[0].albumlink).text(playlist[0].title);
59                    if ( playlist[0].buy === true ) {
60                        $('#jukebox .buy-link').html($('.playlist[data-album='+playlist[0].album+'] div.hidden').html());
61                    } else {
62                        $('#jukebox .buy-link').html('');
63                    }
64                    $('#jukebox .marquee').html(tracks[aud.pos].track).marquee({gap:5,duplicated: true});
65                }
66                $('#jukebox .music-thumb img').attr('src', playlist[0].image);
67                aud.load();
68                aud.play();
69            });
70
71            $('#jukebox .prev').bind('click', function(evt) {
72                evt.preventDefault();
73                aud.pause();
74                aud.pos--;
75                $('#jukebox').carousel('prev');
76                if (aud.pos < 0) aud.pos = tracks.length - 1;
77                aud.setAttribute('src', tracks[aud.pos].url);
78                if ( $('#audioplayer').attr('data-playing') != tracks[aud.pos].trackNum ) {
79                    $('#audioplayer').attr('data-playing', tracks[aud.pos].trackNum);
80                    $('#jukebox .info a').attr('href', playlist[0].albumlink).text(playlist[0].title);
81                    if ( playlist[0].buy === true ) {
82                        $('#jukebox .buy-link').html($('.playlist[data-album='+playlist[0].album+'] div.hidden').html());
83                    } else {
84                        $('#jukebox .buy-link').html('');
85                    }
86                    $('#jukebox .marquee').html(tracks[aud.pos].track).marquee({gap:5,duplicated: true});
87                }
88                $('#jukebox .music-thumb img').attr('src', playlist[0].image);
89                aud.load();
90                aud.play();
91            });
92            aud.addEventListener('progress', function(evt) {
93                    var width = parseInt($('#jukebox .loader').css('width'), 10);
94                    var percentLoaded = Math.round(evt.loaded / evt.total * 100);
95                    var barWidth = Math.ceil(percentLoaded * (width / 100));
96                    $('#jukebox .load-progress').css( 'width', barWidth );
97
98            });
99
100            aud.addEventListener('timeupdate', function(evt) {
101                var width = parseInt($('#jukebox .loader').css('width'), 10);
102                    var percentPlayed = Math.round(aud.currentTime / aud.duration * 100);
103                    var barWidth = Math.ceil(percentPlayed * (width / 100));
104                    $('#jukebox .play-progress').css( 'width', barWidth);
105            });
106
107            aud.addEventListener('play', function(evt) {
108                $('#jukebox .play').addClass('hidden');
109                $('#jukebox .pause').removeClass('hidden');
110            });
111
112            aud.addEventListener('pause', function(evt) {
113                $('#jukebox .play').removeClass('hidden');
114                $('#jukebox .pause').addClass('hidden');
115            });
116
117            aud.addEventListener('canplay', function(evt) {
118                $('#jukebox .play').trigger('click');
119            });
120
121            aud.addEventListener('ended', function(evt) {
122                $('#jukebox .next').trigger('click');
123            });
124
125            //init load if tracks
126            $('#audioplayer').attr('data-playing', tracks[0].trackNum);
127            $('#jukebox .marquee').html(tracks[0].track).marquee({gap:5,duplicated: true});
128
129
130        } else {
131            $('.track-feed').hide();
132        }
133            
134            //init load
135            $('#jukebox .info a').attr('href', playlist[0].albumlink).text(playlist[0].title);
136            $('#jukebox .music-thumb img').attr('src', playlist[0].image);
137            if ( playlist[0].buy === true ) {
138                $('#jukebox .buy-link').html($('.playlist[data-album='+playlist[0].album+'] div.hidden').html());
139            } else {
140                $('#jukebox .buy-link').html('');
141            }
142        }
143});