https://cinemaradio.net/themes/theme2/js/player-extrait.js?v=01

1$(function () {
2    var currentMedia = null;
3    var player = null;
4
5    function Player(playlist) {
6        this.playlist = playlist;
7        this.index = 0;
8        this.audioElement = null;
9        this.isPlaying = false;
10    }
11
12    Player.prototype = {
13        play: function (url, index) {
14            var self = this;
15            var data = self.playlist[index];
16
17            if (!data.url)
18                return;
19
20            self.audioElement = new Audio(data.url);
21
22            self.audioElement.addEventListener('play', function () {
23                self.isPlaying = true;
24            });
25
26            self.audioElement.addEventListener('ended', function () {
27                self.stop();
28            });
29
30            self.audioElement.play();
31            self.index = index;
32        },
33        stop: function () {
34            var self = this;
35            if (self.audioElement) {
36                self.audioElement.pause();
37                self.audioElement.currentTime = 0;
38                self.isPlaying = false;
39            }
40        },
41        playMp3: function (url, index) {
42            var self = this;
43            var data = self.playlist[index];
44            if (!data.url)
45                return;
46
47            if (data.audioElement) {
48                self.audioElement = data.audioElement;
49            } else {
50                self.audioElement = data.audioElement = new Audio(data.url);
51                self.audioElement.addEventListener('play', function () {
52                    requestAnimationFrame(self.step.bind(self));
53                });
54                self.audioElement.addEventListener('ended', function () {
55                });
56            }
57            if (!self.isPlaying) {
58                self.audioElement.play();
59                self.isPlaying = true;
60            } else {
61                self.audioElement.pause();
62                self.isPlaying = false;
63            }
64            self.index = index;
65            self.updateAudioSlider();
66        },
67        pause: function () {
68            var self = this;
69            if (self.audioElement) {
70                self.audioElement.pause();
71                self.isPlaying = false;
72            }
73        },
74        step: function () {
75            var self = this;
76            if (!self.audioElement) return;
77
78            var seek = self.audioElement.currentTime;
79            $('.time-left').text(self.formatTime(Math.round(seek)) + " / " + self.formatTime(Math.round(self.audioElement.duration)));
80            self.updateAudioSlider();
81
82            if (!self.audioElement.paused) {
83                requestAnimationFrame(self.step.bind(self));
84            }
85        },
86        seek: function (per) {
87            var self = this;
88            if (!self.audioElement) return;
89
90            self.audioElement.currentTime = self.audioElement.duration * per;
91            var seek = self.audioElement.currentTime;
92            $('.time-left').text(self.formatTime(Math.round(seek)) + " / " + self.formatTime(Math.round(self.audioElement.duration)));
93            self.updateAudioSlider();
94
95            if (!self.audioElement.paused) {
96                self.audioElement.play();
97            }
98        },
99        updateAudioSlider: function () {
100            var self = this;
101            if (!self.audioElement) return;
102
103            var seek = self.audioElement.currentTime;
104            $('.seek-slider').roundSlider("setValue", (((seek / self.audioElement.duration) * 100) || 0));
105        },
106        formatTime: function (secs) {
107            var minutes = Math.floor(secs / 60) || 0;
108            var seconds = (secs - minutes * 60) || 0;
109            return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
110        }
111    };
112
113    function initPlayer(url, active) {
114        player = new Player([
115            {
116                url: url,
117                audioElement: null
118            }
119        ]);
120        currentMedia = {
121            url: url,
122            active: active
123        };
124    }
125
126    $('.cover-play').on('click', function () {
127        var index = $(this).index();
128        if (currentMedia === null || currentMedia.active === null) {
129            playFile($(this).attr("data-audio"), $(this), index);
130            $(this).addClass('playing');
131            $('.playing .icon').removeClass('fa-play').addClass('fa-pause');
132        } else if ((currentMedia.active).is($(this))) {
133            if (!$(this).hasClass('paused')) {
134                player.pause();
135                $(this).removeClass('playing').addClass('paused');
136                $('.paused .icon').removeClass('fa-pause').addClass('fa-play');
137            } else {
138                player.playMp3($(this).attr("data-audio"), index);
139                $(this).addClass('playing');
140                $('.playing .icon').removeClass('fa-play').addClass('fa-pause');
141                $(this).removeClass('paused').addClass('playing');
142                $('.playing .icon').removeClass('fa-play').addClass('fa-pause');
143
144            }
145        } else {
146            var oldAudio = currentMedia.active;
147            if (oldAudio.hasClass('playing') || oldAudio.hasClass('paused')) {
148                if (oldAudio.hasClass('paused')) {
149                    $('.playing .icon').removeClass('fa-pause').addClass('fa-play');
150                    console.log('pause');
151                } else if (oldAudio.hasClass('playing')) {
152                    $('.paused .icon').removeClass('fa-play').addClass('fa-pause');
153                    console.log('play');
154                }
155            }
156            if (oldAudio.parent().children('#audio-slider').length > 0) {
157                $('#audio-slider').remove();
158            }
159            player.stop();
160            player = null;
161            currentMedia = null;
162            playFile($(this).attr("data-audio"), $(this), index);
163        }
164    });
165
166
167    function updateAudioProgress() {
168        player.updateAudioSlider();
169    }
170
171    function playFile(url, active, index) {
172        player = null;
173        currentMedia = null;
174        initPlayer(url, active);
175        player.playMp3(url, index);
176        if (active.parent().children('#audio-slider').length == 0) {
177            active.parent().append('<div id="audio-slider"></div>');
178            $('#audio-slider').roundSlider({
179                radius: 45,
180                width: 7,
181                handleSize: "0",
182                startAngle: 90,
183                sliderType: "min-range",
184                showTooltip: false,
185                change: function (e) {
186                    player.seek(e.value / 100);
187                }
188            });
189            setInterval(updateAudioProgress, 1000 / 60);
190        }
191    }
192
193    $(document).ready(function () {
194        if (player == null) {
195            initPlayer('', null);
196        }
197    });
198});