Skip to content

Commit 581375d

Browse files
author
邱钰杰
committed
优化界面
1 parent bc7227e commit 581375d

8 files changed

Lines changed: 3864 additions & 95 deletions

File tree

‎audio.html‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,11 @@
2222

2323
<div id="audio-custom">
2424
<div id="div-lightBox"></div>
25-
<span class="glyphicon glyphicon-play" id="play"></span>
26-
<span class="glyphicon glyphicon-step-forward" id="next"></span>
27-
<span class="glyphicon glyphicon-th-list" id="meun"></span>
25+
<div id="glyphiconBox">
26+
<span class="glyphicon glyphicon-play" id="play"></span>
27+
<span class="glyphicon glyphicon-step-forward" id="next"></span>
28+
<span class="glyphicon glyphicon-th-list" id="meun"></span>
29+
</div>
2830

2931
</div>
3032

@@ -40,6 +42,8 @@
4042
<script src="js/bindlrc.js"></script>
4143
<script src="js/audio.js"></script>
4244
<script src="js/drop.js"></script>
45+
<script src="lib/jquery.nicescroll.js"></script>
46+
<script src="js/scrollStyle.js"></script>
4347
</body>
4448

4549
</html>

‎css/style.css‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ body {
4040
/* 滑块 进度条 */
4141

4242
#div-lightBox {
43-
height: 4px;
43+
height: 2px;
4444
border: none;
4545
cursor: pointer;
4646
}
@@ -54,9 +54,9 @@ body {
5454
}
5555

5656
#div-lightBox span {
57-
height: 16px;
58-
width: 16px;
59-
top: -6px;
57+
height: 8px;
58+
width: 8px;
59+
top: -3px;
6060
border: none;
6161
border-radius: 50%;
6262
background-color: rgba(0, 165, 208, 1);
@@ -69,8 +69,11 @@ body {
6969
}
7070

7171
#audio-custom {
72-
width: 100%;
72+
width: 60%;
7373
position: absolute;
74+
margin: 0 auto;
75+
left: 0;
76+
right: 0;
7477
bottom: 0;
7578
text-align: center;
7679
}
@@ -81,6 +84,10 @@ body {
8184
margin: 10px 20px 10px 20px;
8285
}
8386

87+
#glyphiconBox {
88+
margin: 30px;
89+
}
90+
8491
#audio-custom span:hover {
8592
color: rgba(0, 213, 213, 0.9);
8693
cursor: pointer;
@@ -107,7 +114,7 @@ input[type="file"] {
107114
}
108115

109116
#songs {
110-
width: 200px;
117+
width: 250px;
111118
height: 100%;
112119
position: fixed;
113120
top: 0;
@@ -121,12 +128,12 @@ input[type="file"] {
121128
}
122129

123130
#lyric {
124-
width: 400px;
131+
width: 250px;
125132
height: 100%;
126133
position: fixed;
127134
top: 0;
128135
right: 0;
129-
background-color: rgba(255, 255, 255, 0.8);
136+
color: white;
130137
white-space: pre-line;
131138
overflow: auto;
132139
}
@@ -139,4 +146,6 @@ input[type="file"] {
139146

140147
.lineheight {
141148
color: rgba(161, 216, 230, 1);
149+
font-weight: bold;
150+
font-size: 120%;
142151
}

‎js/audio.js‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,15 @@
11
/*
22
* author：Qyujie
33
* 功能：实现音乐可视化，且拥有音乐播放器功能
4-
* 未实现功能或缺陷：没有实现播放菜单；
5-
* 切换歌曲只能随机切换；
6-
* mp3资源只能用固定的名字；
7-
* 背景图片不能随着切换歌曲而切换；
8-
* 没有实现音量控制组件
9-
* ......
10-
* 已知bug：快速点击切换歌曲按钮，会删除掉背景图片容器（#bodydiv）的样式（css），由styleSheets.deleteRule(0)导致；
11-
* 随着歌曲的不断切换，该网页的可能缓存会越来越大，导致帧数变低；
12-
* 随着歌曲的不断切换，当点击暂停的时候，铺面可能不会暂停绘制，但由于没有audio的数据，绘制出来的谱柱高度全部为0
13-
* 定义的变量anime，长度会随着歌曲的不断切换而无限变长，没有测试，影响未知
14-
* 点击进度条有几率会出现歌曲实际播放位置与点击位置不符情况
15-
* 此逻辑上无法做到第一首歌曲不自动播放
16-
* 音乐可能只会缓存一部分，当读完缓存后，就会骤停然后播放下一首，可能与我测试时用的音乐文件格式（mp3）或文件过大（3-17mb）所导致
17-
* .....
4+
* 未实现功能或缺陷：
5+
*
6+
* 已知bug：
7+
*
188
*/
199

2010
//canvas大小参考长度
21-
var windowWidth = window.innerWidth * 0.8,
22-
windowHeight = window.innerHeight * 0.8;
11+
var windowWidth = window.innerWidth * 0.6,
12+
windowHeight = window.innerHeight * 0.6;
2313
if (windowWidth > windowHeight) windowWidth = windowHeight;
2414
else windowHeight = windowWidth;
2515

@@ -44,7 +34,7 @@ analyser.connect(actx.destination); //连接音频设备，注释此行代码会
4434
audioSrc.connect(analyser);
4535

4636
//歌词 API
47-
$("#lyric").connectaudio(audio);
37+
$("#lyric").connectAudio(audio);
4838

4939
//频谱canvas
5040
var canvas = $("#canvas")[0],
@@ -99,8 +89,16 @@ $("#next").click(function() {
9989
loadSong($nextPlaySong);
10090
});
10191

92+
93+
//菜单弹出收回
10294
$("#meun").click(function() {
103-
$('#songs').slideToggle("slow");
95+
var $songs = $('#songs');
96+
var width = $songs.css('width'),
97+
left = '0px';
98+
if ($songs.css('left') == '0px') {
99+
left = '-' + width;
100+
}
101+
$songs.animate({ left: left }, 400);
104102
});
105103

106104
audio.oncanplay = function() {

‎js/bindlrc.js‎

Lines changed: 3 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -89,51 +89,22 @@
8989
$this.animate({ scrollTop: $nowlrc[0].offsetTop - window.innerHeight / 2 }, 400);
9090
}
9191
}, 1000);
92-
9392
});
94-
},
95-
lineHeight: function(lineno) {
96-
var ul = $("#text");
97-
var $ul = document.getElementById('text'); // 令正在唱的那一行高亮显示
98-
if (lineno > 0) { $(ul.find("li").get(topNum + lineno - 1)).removeClass("lineheight"); }
99-
var nowline = ul.find("li").get(topNum + lineno);
100-
$(nowline).addClass("lineheight"); // 实现文字滚动
101-
var _scrollTop;
102-
$ul.scrollTop = 0;
103-
if ($ul.clientHeight * fraction > nowline.offsetTop) {
104-
_scrollTop = 0;
105-
} else if (nowline.offsetTop > ($ul.scrollHeight - $ul.clientHeight * (1 - fraction))) {
106-
_scrollTop = $ul.scrollHeight - $ul.clientHeight;
107-
} else {
108-
_scrollTop = nowline.offsetTop - $ul.clientHeight * fraction;
109-
} //以下声明歌词高亮行固定的基准线位置成为 “A”
110-
if ((nowline.offsetTop - $ul.scrollTop) >= $ul.clientHeight * fraction) {
111-
//如果高亮显示的歌词在A下面，那就将滚动条向下滚动，滚动距离为 当前高亮行距离顶部的距离-滚动条已经卷起的高度-A到可视窗口的距离
112-
$ul.scrollTop += Math.ceil(nowline.offsetTop - $ul.scrollTop - $ul.clientHeight * fraction);
113-
} else if ((nowline.offsetTop - $ul.scrollTop) < $ul.clientHeight * fraction && _scrollTop != 0) {
114-
//如果高亮显示的歌词在A上面，那就将滚动条向上滚动，滚动距离为 A到可视窗口的距离-当前高亮行距离顶部的距离-滚动条已经卷起的高度
115-
$ul.scrollTop -= Math.ceil($ul.clientHeight * fraction - (nowline.offsetTop - $ul.scrollTop));
116-
} else if (_scrollTop == 0) {
117-
$ul.scrollTop = 0;
118-
} else {
119-
$ul.scrollTop += $(ul.find('li').get(0)).height();
120-
}
12193
}
122-
12394
}
12495

12596
var lrcer;
12697

127-
$.fn.connectaudio = function(audio) {
98+
$.fn.connectAudio = function(audio) {
12899
return this.each(function() {
129100
lrcer = new Lrcer(audio);
130-
console.log(lrcer);
101+
//console.log(lrcer);
131102
});
132103
}
133104

134105
$.fn.bindlrc = function(lrc, tlyric, wrapper) {
135106
lrcer = new Lrcer(lrcer.audio, lrcer.thread, this, wrapper);
136-
console.log(lrcer);
107+
//console.log(lrcer);
137108
return lrcer.x(lrc, tlyric);
138109
}
139110

‎js/login.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎js/scrollStyle.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
$("#lyric").niceScroll({
2+
cursorcolor: "#4ECDC4",
3+
cursorwidth: '6',
4+
cursorborderradius: '10px',
5+
background: '#404040',
6+
spacebarenabled: false,
7+
cursorborder: '',
8+
zindex: '1000',
9+
});
10+
$("#songs").niceScroll({
11+
cursorcolor: "#4ECDC4",
12+
cursorwidth: '6',
13+
cursorborderradius: '10px',
14+
background: '#404040',
15+
spacebarenabled: false,
16+
cursorborder: '',
17+
zindex: '1000',
18+
});

0 commit comments

Comments
 (0)