https://www.irvingmasjid.org/wp-content/themes/taqwa/assets/js/ramadan-page/audioplayer.js?ver=1.0.0

1/*
2	AUTHOR: Osvaldas Valutis, www.osvaldas.info
3*/
4(function($, window, document, undefined) {
5    var isTouch = 'ontouchstart' in window,
6        eStart = isTouch ? 'touchstart' : 'mousedown',
7        eMove = isTouch ? 'touchmove' : 'mousemove',
8        eEnd = isTouch ? 'touchend' : 'mouseup',
9        eCancel = isTouch ? 'touchcancel' : 'mouseup',
10        secondsToTime = function(secs) {
11            var hours = Math.floor(secs / 3600),
12                minutes = Math.floor(secs % 3600 / 60),
13                seconds = Math.ceil(secs % 3600 % 60);
14            return (hours == 0 ? '' : hours > 0 && hours.toString().length < 2 ? '0' + hours + ':' : hours + ':') + (minutes.toString().length < 2 ? '0' + minutes : minutes) + ':' + (seconds.toString().length < 2 ? '0' + seconds : seconds);
15        },
16        canPlayType = function(file) {
17            var audioElement = document.createElement('audio');
18            return !!(audioElement.canPlayType && audioElement.canPlayType('audio/' + file.split('.').pop().toLowerCase() + ';').replace(/no/, ''));
19        };
20
21    $.fn.audioPlayer = function(params) {
22        var params = $.extend({
23                classPrefix: 'audioplayer',
24                strPlay: '',
25                strPause: '',
26                strVolume: ''
27            }, params),
28            cssClass = {},
29            cssClassSub = {
30                playPause: 'playpause',
31                playing: 'playing',
32                time: 'time',
33                timeCurrent: 'time-current',
34                timeDuration: 'time-duration',
35                bar: 'bar',
36                barLoaded: 'bar-loaded',
37                barPlayed: 'bar-played',
38                volume: 'volume',
39                volumeButton: 'volume-button',
40                volumeAdjust: 'volume-adjust',
41                noVolume: 'novolume',
42                mute: 'mute',
43                mini: 'mini'
44            };
45
46        for (var subName in cssClassSub)
47            cssClass[subName] = params.classPrefix + '-' + cssClassSub[subName];
48
49        this.each(function() {
50            if ($(this).prop('tagName').toLowerCase() != 'audio')
51                return false;
52
53            var $this = $(this),
54                audioFile = $this.attr('src'),
55                isAutoPlay = $this.get(0).getAttribute('autoplay'),
56                isAutoPlay = isAutoPlay === '' || isAutoPlay === 'autoplay' ? true : false,
57                isLoop = $this.get(0).getAttribute('loop'),
58                isLoop = isLoop === '' || isLoop === 'loop' ? true : false,
59                isSupport = false;
60
61            if (typeof audioFile === 'undefined') {
62                $this.find('source').each(function() {
63                    audioFile = $(this).attr('src');
64                    if (typeof audioFile !== 'undefined' && canPlayType(audioFile)) {
65                        isSupport = true;
66                        return false;
67                    }
68                });
69            } else if (canPlayType(audioFile)) isSupport = true;
70

71            var thePlayer = $('<div class="' + params.classPrefix + '">' + (isSupport ? $('<div>').append($this.eq(0).clone()).html() : '<embed src="' + audioFile + '" width="0" height="0" volume="100" autostart="' + isAutoPlay.toString() + '" loop="' + isLoop.toString() + '" />') + '<div class="' + cssClass.playPause + '" title="' + params.strPlay + '"><a href="#">' + params.strPlay + '</a></div></div>'),
72                theAudio = isSupport ? thePlayer.find('audio') : thePlayer.find('embed'),
73                theAudio = theAudio.get(0);
74
75            if (isSupport) {
76                thePlayer.find('audio').css({
77                    'width': 0,
78                    'height': 0,
79                    'visibility': 'hidden'
80                });
81                thePlayer.append('<div class="' + cssClass.time + ' ' + cssClass.timeCurrent + '"></div><div class="' + cssClass.bar + '"><div class="' + cssClass.barLoaded + '"></div><div class="' + cssClass.barPlayed + '"></div></div><div class="' + cssClass.time + ' ' + cssClass.timeDuration + '"></div><div class="' + cssClass.volume + '"><div class="' + cssClass.volumeButton + '" title="' + params.strVolume + '"><a href="#">' + params.strVolume + '</a></div><div class="' + cssClass.volumeAdjust + '"><div><div></div></div></div></div>');
82
83                var theBar = thePlayer.find('.' + cssClass.bar),
84                    barPlayed = thePlayer.find('.' + cssClass.barPlayed),
85                    barLoaded = thePlayer.find('.' + cssClass.barLoaded),
86                    timeCurrent = thePlayer.find('.' + cssClass.timeCurrent),
87                    timeDuration = thePlayer.find('.' + cssClass.timeDuration),
88                    volumeButton = thePlayer.find('.' + cssClass.volumeButton),
89                    volumeAdjuster = thePlayer.find('.' + cssClass.volumeAdjust + ' > div'),
90                    volumeDefault = 0,
91                    adjustCurrentTime = function(e) {
92                        theRealEvent = isTouch ? e.originalEvent.touches[0] : e;
93                        theAudio.currentTime = Math.round((theAudio.duration * (theRealEvent.pageX - theBar.offset().left)) / theBar.width());
94                    },
95                    adjustVolume = function(e) {
96                        theRealEvent = isTouch ? e.originalEvent.touches[0] : e;
97                        theAudio.volume = Math.abs((theRealEvent.pageX - volumeAdjuster.offset().left) / volumeAdjuster.width());
98                    },
99                    updateLoadBar = setInterval(function() {
100                      if (theAudio.buffered.length > 0) {
101                        barLoaded.width((theAudio.buffered.end(0) / theAudio.duration) * 100 + '%');
102                        if (theAudio.buffered.end(0) >= theAudio.duration)
103                            clearInterval(updateLoadBar);
104                      }
105                    }, 100);
106
107                var volumeTestDefault = theAudio.volume,
108                    volumeTestValue = theAudio.volume = 0.111;
109                if (Math.round(theAudio.volume * 1000) / 1000 == volumeTestValue) theAudio.volume = volumeTestDefault;
110                else thePlayer.addClass(cssClass.noVolume);
111
112                timeDuration.html('&hellip;');
113                timeCurrent.text(secondsToTime(0));
114
115                theAudio.addEventListener('loadeddata', function() {
116                    timeDuration.text(secondsToTime(theAudio.duration));
117                    volumeAdjuster.find('div').width(theAudio.volume * 100 + '%');
118                    volumeDefault = theAudio.volume;
119                });
120
121                theAudio.addEventListener('timeupdate', function() {
122                    timeCurrent.text(secondsToTime(theAudio.currentTime));
123                    barPlayed.width((theAudio.currentTime / theAudio.duration) * 100 + '%');
124                });
125
126                theAudio.addEventListener('volumechange', function() {
127                    volumeAdjuster.find('div').width(theAudio.volume * 100 + '%');
128                    if (theAudio.volume > 0 && thePlayer.hasClass(cssClass.mute)) thePlayer.removeClass(cssClass.mute);
129                    if (theAudio.volume <= 0 && !thePlayer.hasClass(cssClass.mute)) thePlayer.addClass(cssClass.mute);
130                });
131
132                theAudio.addEventListener('ended', function() {
133                    thePlayer.removeClass(cssClass.playing);
134                });
135
136                theBar.on(eStart, function(e) {
137                        adjustCurrentTime(e);
138                        theBar.on(eMove, function(e) {
139                            adjustCurrentTime(e);
140                        });
141                    })
142                    .on(eCancel, function() {
143                        theBar.unbind(eMove);
144                    });
145
146                volumeButton.on('click', function() {
147                    if (thePlayer.hasClass(cssClass.mute)) {
148                        thePlayer.removeClass(cssClass.mute);
149                        theAudio.volume = volumeDefault;
150                    } else {
151                        thePlayer.addClass(cssClass.mute);
152                        volumeDefault = theAudio.volume;
153                        theAudio.volume = 0;
154                    }
155                    return false;

156                });
157
158                volumeAdjuster.on(eStart, function(e) {
159                        adjustVolume(e);
160                        volumeAdjuster.on(eMove, function(e) {
161                            adjustVolume(e);
162                        });
163                    })
164                    .on(eCancel, function() {
165                        volumeAdjuster.unbind(eMove);
166                    });
167            } else thePlayer.addClass(cssClass.mini);
168
169            if (isAutoPlay) thePlayer.addClass(cssClass.playing);
170
171            thePlayer.find('.' + cssClass.playPause).on('click', function() {
172                if (thePlayer.hasClass(cssClass.playing)) {
173                    $(this).attr('title', params.strPlay).find('a').html(params.strPlay);
174                    thePlayer.removeClass(cssClass.playing);
175                    isSupport ? theAudio.pause() : theAudio.Stop();
176                } else {
177                    $(this).attr('title', params.strPause).find('a').html(params.strPause);
178                    thePlayer.addClass(cssClass.playing);
179                    isSupport ? theAudio.play() : theAudio.Play();
180                }
181                return false;
182            });
183
184            $this.replaceWith(thePlayer);
185        });
186        return this;
187    };
188})(jQuery, window, document);