-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
198 lines (177 loc) · 6.36 KB
/
index.html
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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en">
<head>
<title>webAudio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<script src="js/anime.min.js"></script>
</head>
<body>
<div class="input-box">
<span class="play-song">选择歌曲</span>
<input type="file" value="加载..." id="loadFile" onchange="loadFile(this.files)">
</div>
<!-- 可视化区域 -->
<div class="visual">
</div>
<ul id="fileList">
<span id="stop" onclick="controlPlay()"></span>
</ul>
</body>
</html>
<script>
let fileList = []
let fileListElement = document.getElementById('fileList');
const loadFile = function (files) {
fileListElement.style.display = "block";
console.log(files);
let file = files[0];
//判断同名歌曲
for (let i = 0; i < fileList.length; i++) {
if (file.name == fileList[i].name) {
return
}
}
fileList.push({
name: file.name,
number: fileList.length + 1
})
if (fileList.length > 0) {
let visualDivElement = document.querySelector('.visual');
visualDivElement.style.display = "block"
}
console.log(fileList, "@@@");
// 创建li标签
const liElement = document.createElement("li");
// 添加点击事件
liElement.addEventListener('click', function () {
play(file, liElement);
actived(liElement);
});
const numberSpanElement = document.createElement('span');
//添加类名
numberSpanElement.classList.add('number');
numberSpanElement.innerHTML = fileList.length;
//添加到li
liElement.append(numberSpanElement);
const nameSpanElement = document.createElement('span');
//添加类名
nameSpanElement.classList.add('song');
nameSpanElement.innerHTML = file.name;
//添加到li
liElement.append(nameSpanElement);
fileListElement.append(liElement);
//添加点击样式
let actived = function (activeElement) {
//移除其他样式
let liChilds = document.querySelectorAll('#fileList li');
console.log(liChilds);
for (let i = 0; i < liChilds.length; i++) {
liChilds.item(i).lastChild.classList.remove('active');
}
activeElement.lastChild.classList.add('active');
}
}
//音乐播放
let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let audioBufferSourceNode = null;
let analyser = audioCtx.createAnalyser();
const playBtn = document.getElementById('stop');
let play = function (file) {
playBtn.style.display = "block";
playBtn.classList.add('isplay');
let fr = new FileReader();
fr.onload = function (e) {
audioCtx.decodeAudioData(e.target.result).then(function (buffer) {
//判断是否有歌曲在播放
if (audioBufferSourceNode != null) {
audioBufferSourceNode.stop();
}
audioBufferSourceNode = null;
audioBufferSourceNode = audioCtx.createBufferSource();
audioBufferSourceNode.buffer = buffer;
//连接资源
audioBufferSourceNode.connect(audioCtx.destination);
//连接分析器
audioBufferSourceNode.connect(analyser);
//设置循环播放
audioBufferSourceNode.loop = true;
//开始播放
audioBufferSourceNode.start(0);
})
//调用获取数据分析
getMusicData();
}
fr.readAsArrayBuffer(file)
}
//暂停播放
let controlPlay = function (file) {
console.log("stop!!!");
if (audioCtx.state === "running") {
playBtn.classList.remove('isplay');
playBtn.classList.add('isstop');
audioCtx.suspend();
} else if (audioCtx.state === "suspended") {
playBtn.classList.remove('isstop');
playBtn.classList.add('isplay');
audioCtx.resume();
}
}
//加载音乐波形分析器
let getMusicData = function () {
//循环绘制
webkitRequestAnimationFrame(getMusicData);
const audioInfoArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(audioInfoArray);
// console.log(audioInfoArray);
//生成动画
animeDiv(audioInfoArray);
}
//初始化盒子
//n div个数
//r 圆的半径
const initDiv = function (n, r) {
const winWidth = document.documentElement.clientWidth;
const winHeight = document.documentElement.clientHeight;
//角度
const angle = 360 / n;
//弧度
const radian = angle * Math.PI / 180;
let visualDivElement = document.querySelector('.visual');
for (let i = 0; i < n; i++) {
let divElement = document.createElement('div');
const hue = Math.round(360 / n * i);
//添加一个class
divElement.classList.add('el');
divElement.style.backgroundColor = 'hsl(' + hue + ', 40%, 60%)';
visualDivElement.append(divElement);
// divElement.innerHTML = i;
//使用动画
anime({
targets: divElement,
translateX: [winWidth / 2, winWidth / 2 + Math.sin(radian * i) * r],
translateY: [winHeight / 2, winHeight / 2 + Math.cos(radian * i) * r],
loop: false,
duration: 1000,
//设置每个div对应角度
rotate: [-(angle * i)],
})
}
}
initDiv(600, 200);
//生成动画
const animeDiv = function (audioInfoArray) {
const visualDivElement = document.querySelector('.visual');
for (let i = 0; i < visualDivElement.children.length; i++) {
if (audioInfoArray[i] == 0) {
audioInfoArray[i] == 6
}
anime({
targets: visualDivElement.children[i],
height: [audioInfoArray[i] / 6],
duration: 0,
})
}
}
</script>