-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
178 lines (143 loc) · 4.12 KB
/
main.js
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
var audio = document.querySelector("audio");
console.log(audio.canPlayType('audio/mp4; codecs="mp4a.40.5"')); // 判断浏览器能否播放指定的音频/视频类型
var play = document.querySelector("#play"); // 播放
var pause = document.querySelector("#pause"); // 暂停
var operateBtns = document.querySelectorAll(".operate-btn");
var previous = document.querySelector("#previous"); // 上一首
var next = document.querySelector("#next"); // 下一首
var audiosSrc = [
{
name: "小宝贝",
singer: "夏天播放",
src: "assets/audios/夏天播放 - 小宝贝.mp3"
},
{
name: "慢慢",
singer: "许鹤缤",
src: "assets/audios/许鹤缤 - 慢慢.mp3"
},
{
name: "烟火里的尘埃",
singer: "吕泽洲",
src: "assets/audios/吕泽洲 - 烟火里的尘埃 (Live).mp3"
}
];
var playIndex = 0;
var getCurTime = ""; // 获取时间的定时器变量
var duration = ""; // 音频长度
var timePoint = document.querySelector(".time-point");
// 已加载音频元数据
audio.onloadedmetadata = function() {
var endTime = document.querySelector(".end-time");
drag(timePoint);
duration = this.duration;
endTime.innerHTML = formatDuration(duration);
curTime();
};
play.onclick = playToggle;
pause.onclick = playToggle;
// 播放/暂停 切换
function playToggle() {
var isPlay = this.id === "play";
if (isPlay) {
audio.play();
curTime();
} else {
audio.pause();
clearInterval(getCurTime);
}
for (var btn of operateBtns) {
btn.style.display = this.id === btn.id ? "none" : "inline-block"; // 按钮样式的切换
}
}
previous.onclick = srcToggle;
next.onclick = srcToggle;
function srcToggle() {
var isNext = this.id === "next";
changeSrc(isNext);
}
// 音频路径切换
function changeSrc(isNext) {
var name = document.querySelector(".audio-name");
var singer = document.querySelector(".singer");
isNext ? playIndex++ : playIndex--;
// 循环处理
if (playIndex < 0) {
playIndex = audiosSrc.length - 1;
} else if (playIndex > audiosSrc.length - 1) {
playIndex = 0;
}
var selectedAudio = audiosSrc[playIndex];
audio.src = selectedAudio.src;
name.innerHTML = selectedAudio.name;
singer.innerHTML = selectedAudio.singer;
play.style.display = "none";
pause.style.display = "inline-block";
audio.play();
}
function curTime() {
clearInterval(getCurTime);
getCurTime = setInterval(function() {
timeLocation(audio.currentTime, duration);
}, 30);
}
// 时间点位置
function timeLocation(currentTime, duration) {
if (!audio.ended) {
var left = parseFloat(currentTime / duration) * 240;
left > 224 && (left = 224); // 音频结束点
setTimePointLocation(left, false);
} else {
changeSrc(true);
}
}
// 拖拽
function drag(obj) {
var disX = 0;
var disY = 0;
obj.onmousedown = function(ev) {
clearInterval(getCurTime);
var event = ev || event;
var moveLeft = "";
disX = event.clientX - obj.offsetLeft;
disY = event.clientY - obj.offsetTop;
if (obj.setCapture) {
// 事件捕获
obj.onmousemove = mousemove;
obj.onmouseup = mouseup;
obj.setCapture(); // 调用事件捕获,解决 IE7 以下的拖拽 bug
} else {
document.onmousemove = mousemove;
document.onmouseup = mouseup;
}
function mousemove(ev) {
var event = ev || event;
var left = event.clientX - disX;
if (left < 0) {
left = 0;
} else if (left > 224) {
left = 224;
}
setTimePointLocation(left, true);
}
function mouseup() {
this.onmousemove = null;
this.onmouseup = null;
if (obj.releaseCapture) {
obj.releaseCapture(); // 关闭事件捕获
}
}
return false;
};
}
// 设置时间点位置
function setTimePointLocation(left, isMove) {
var startTime = document.querySelector(".start-time");
var outlineBar = document.querySelector(".outline-bar");
timePoint.style.left = left + "px";
outlineBar.style.width = left + "px";
if (isMove) {
audio.currentTime = left / 224 * duration;
}
startTime.innerHTML = formatDuration(audio.currentTime); // 音频当前播放位置
}