1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
const AudioPlayer = View.extend({
el: "#audioPlayer",
events: {
"click .icon": "toggle",
},
initialize: function () {
this.$title = this.$(".title");
this.icon_el = this.$(".icon").get(0);
this.pos_el = this.$(".pos").get(0);
this.track_el = this.$(".track").get(0);
this.dot_el = this.$(".dot").get(0);
this.time_el = this.$(".time").get(0);
this.mousedown = this.mousedown.bind(this);
this.mousemove = this.mousemove.bind(this);
this.mouseup = this.mouseup.bind(this);
if (is_mobile) {
this.pos_el.addEventListener("touchstart", (e) =>
this.mousedown(e.touches[0])
);
this.pos_el.addEventListener("touchmove", (e) =>
this.mousemove(this.e.touches[0])
);
window.addEventListener("touchend", this.mouseup);
} else {
this.pos_el.addEventListener("mousedown", this.mousedown);
this.pos_el.addEventListener("mousemove", this.mousemove);
window.addEventListener("mouseup", this.mouseup);
}
this.down = false;
this.mousex = 0;
audio.listen(this);
audio.el.addEventListener("timeupdate", this.onTimeUpdate.bind(this));
},
/**
* Mouse movements
* */
mousedown: function (e) {
e.preventDefault && e.preventDefault();
const track_left = this.pos_el.offsetLeft;
this.down = true;
this.mousex = (e.pageX - track_left) / this.track_el.offsetWidth;
},
mousemove: function (e, isTouch) {
if (!this.down) return;
const track_left = this.pos_el.offsetLeft;
this.mousex = Math.min(
Math.max(0, (e.pageX - track_left) / this.track_el.offsetWidth),
1
);
this.dot_el.style.transform =
"translateX(" + this.mousex * this.track_el.offsetWidth + "px)";
},
mouseup: function (e) {
if (!this.down) return;
this.down = false;
var t = this.mousex * (audio.el.duration || 1);
audio.el.currentTime = Math.round(t);
this.dot_el.style.transform =
"translateX(" + this.mousex * this.track_el.offsetWidth + "px)";
},
toggle: function () {
audio.toggle();
},
/**
* Receiving play events
*/
onPlay: function ({ href, title, element }) {
if (!this.active) {
this.$el.removeClass("unloaded");
this.active = true;
this.$el.addClass("active");
}
// if (index === music.length) return stop();
if (!this.icon_el.classList.contains("active")) {
this.icon_el.classList.add("active");
}
this.onTimeUpdate();
if (title) {
this.$title.html(title);
}
},
onPause: function () {
this.icon_el.classList.remove("active");
},
onStop: function () {
this.$el.removeClass("active");
this.active = false;
},
onTimeUpdate: function () {
if (this.down) {
return;
}
let { currentTime, duration } = audio.el;
let t = currentTime / (duration || 1);
this.dot_el.style.transform =
"translateX(" + this.track_el.offsetWidth * t + "px)";
this.time_el.innerHTML = time(currentTime) + " / " + time(duration);
},
});
function time(n) {
if (!n) return "0:00";
n = Math.floor(n);
let s = n % 60;
if (s < 10) s = "0" + s;
let m = Math.floor(n / 60);
return m + ":" + s;
}
|
