https://msvtrackdays.com/libs/media-player/player.js

1/**
2 * author : Ä°lker YILMAZ
3 * url : https://github.com/kuantal/Multiple-circular-player
4 * inspired by https://github.com/frumbert/circular-player
5 */
6(function (root, factory) {
7
8    if (typeof define === 'function' && define.amd) {
9        define(factory);
10    } else if (typeof exports === 'object') {
11        module.exports = factory;
12    } else {
13        root.lunar = factory();
14    }
15});
16
17(function ($) {
18
19    var _ = {
20
21        cursorPoint: function (evt, el) {
22            _.settings.pt.x = evt.clientX;
23            _.settings.pt.y = evt.clientY;
24            var playObject  = el.find('svg').attr('id');
25            playObject      = document.getElementById(playObject);
26            return _.settings.pt.matrixTransform(playObject.getScreenCTM().inverse());
27        },
28
29        angle: function (ex, ey) {
30            var dy    = ey - 50; // 100;
31            var dx    = ex - 50; // 100;
32            var theta = Math.atan2(dy, dx); // range (-PI, PI]
33            theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
34            theta     = theta + 90; // in our case we are animating from the top, so we offset by the rotation value;
35            if (theta < 0) theta = 360 + theta; // range [0, 360)
36            return theta;
37        },
38
39        setGraphValue: function (obj, val) {
40
41            var dash = _.settings.pc - parseFloat(((val / _.settings.audioObj.duration) * _.settings.pc), 10);
42            if (isNaN(dash))
43                dash = 0;
44
45            
46            $(obj).css('strokeDashoffset', dash);
47
48            if (val === 0) {
49                $(obj).addClass('done');
50                if (obj === _.settings.progress) $(obj).addClass('ended');
51            }
52        },
53
54        reportPosition: function (e) {
55            _.setGraphValue(_.settings.progress, _.settings.audioObj.currentTime);
56        },
57
58        stopAllSounds: function () {
59
60            document.addEventListener('play', function (e) {
61                var audios = document.getElementsByTagName('audio');
62                for (var i = 0, len = audios.length; i < len; i++) {
63                    if (audios[i] != e.target) {
64                        audios[i].pause();
65                    }
66                    if (audios[i] != e.target) $(audios[i]).parent('div').find('.playing').attr('class', 'paused');
67                }
68            }, true);
69        },
70
71        settings: {},
72
73        /**
74         * Main Function for plugin
75         * @param options
76         */
77        init: function (options) {
78
79            /**
80             * Default Options
81             */
82
83            var svgId = $(this).find('svg').attr('id');
84            svgId     = document.getElementById(svgId);
85
86            _.defaults = {
87                this: this,
88                el: $(this),
89                playObj     : 'playable',
90                progress    : '.progress-bar',
91                precache    : '.precache-bar',
92                audioObj    : 'audio',
93                controlsObj : '.controls',
94                pt          : svgId.createSVGPoint(),
95                pc          : 298.1371428256714 // 2 pi r                                
96            };
97
98            _.defaults.audioObj = document.getElementById($(this).find('audio').attr('id'));
99
100            _.settings = $.extend({}, _.defaults, options);
101
102            _.settings.progress = _.settings.el.find(_.settings.progress);
103            _.settings.precache = _.settings.el.find(_.settings.precache);
104            _.settings.playable = _.settings.el.find('.playable');
105            _.settings.updateProgress = setInterval(function () {
106                if (_.settings.audioObj.buffered.length) {
107                    var loaded = _.settings.audioObj.buffered.end(0);
108
109                    if (loaded >= _.settings.audioObj.duration)
110                        clearInterval(_.settings.updateProgress);
111
112                    _.setGraphValue(_.settings.precache, loaded);
113                }
114            }, 30);
115
116            $(_.settings.controlsObj).on('click', function (e) {
117
118                var currentState = _.settings.playable.attr('class');
119
120                switch (currentState.replace('playable', '').trim()) {
121
122                    case 'not-started':
123                        _.stopAllSounds();
124                        _.settings.audioObj.play();
125                        _.settings.playable.attr('class', 'playing');
126                        break;
127                    case 'playing':
128                        _.settings.playable.attr('class', 'playable paused');
129                        _.settings.audioObj.pause();
130                        break;
131                    case 'paused':
132                        _.settings.playable.attr('class', 'playable playing');
133                        _.settings.audioObj.play();
134                        break;
135                    case 'ended':
136                        _.settings.playable.attr('class', 'not-started playable');
137                        break;
138                }
139            });
140
141            _.settings.audioObj.addEventListener('timeupdate', function () {
142                _.reportPosition();
143            });
144
145            _.settings.audioObj.addEventListener('play', function () {
146                _.settings.playable.attr('class', 'playable playing');
147            });
148            
149
150            //_.settings.audioObj.addEventListener('progress', function (e) {
151                
152            //});
153        }
154
155    };
156
157    // Add Plugin to Jquery
158    $.fn.mediaPlayer = function (methodOrOptions) {
159        if (_[methodOrOptions]) {
160            return _[methodOrOptions].apply(this, Array.prototype.slice.call(arguments, 1));
161        } else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
162            // Default to "init"
163            return _.init.apply(this, arguments);
164        } else {
165            $.error('Method ' + methodOrOptions + ' does not exist on jQuery.mediaPlayer');
166        }
167    };
168})(jQuery);