-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
204 lines (204 loc) · 8.54 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
199
200
201
202
203
204
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="Sublime">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="applicable-device"content="pc,mobile"/>
<link href='css/css.css' rel='stylesheet'/>
<title>QQ播放器</title>
</head>
<body>
<div id='player-bg'>
<div class='bg-black control'>深空模式</div>
<div class='bg-white control'>纯白模式</div>
<div class='volumn-add' id='voladd'>音量 ++</div>
<div class='volumn-minus' id='volminus'>音量 --</div>
</div>
<div id='player-svg'>
<svg version="1.1" id="bg-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="4.14rem" height="7.26rem" viewBox="0 0 414 726" enable-background="new 0 0 414 726" xml:space="preserve">
<g>
<path fill="#7A6C55" d="M343.91,2.959c0,0.873-0.707,1.58-1.58,1.58h-47.402c-0.873,0-1.58-0.708-1.58-1.58V0.58
c0-0.873,0.707-1.58,1.58-1.58h47.402c0.873,0,1.58,0.708,1.58,1.58V2.959z"/>
<path class='svg-wrapper' fill="#958269" d="M354.684,3.876H62.577c-24.156,0-43.738,19.793-43.738,44.209v631.561c0,24.415,19.583,44.209,43.738,44.209
h292.107c24.155,0,43.739-19.794,43.739-44.209V48.085C398.423,23.669,378.839,3.876,354.684,3.876z M391.321,691.636H29.479V76.822
h361.842V691.636z"/>
<path class='svg-bg' fill="#FFFFFF" d="M351.317,5.729H65.573c-23.63,0-42.785,19.633-42.785,43.853v626.47c0,24.216,19.155,43.853,42.785,43.853
h285.744c23.63,0,42.784-19.637,42.784-43.853V49.582C394.102,25.362,374.947,5.729,351.317,5.729z M382.646,640.21H34.244V83.689
h348.402V640.21z"/>
<circle fill="#0B0808" cx="212.395" cy="39.165" r="6.846"/>
<circle fill="#3E3A39" cx="172.63" cy="63.39" r="3.687"/>
<circle fill="#595757" cx="172.631" cy="63.39" r="1.984"/>
<path fill="#595757" d="M240.572,63.39c0-1.454-1.211-2.633-2.707-2.633h-52.52c-1.495,0-2.708,1.179-2.708,2.633l0,0
c0,1.455,1.213,2.634,2.708,2.634h52.52C239.361,66.024,240.572,64.845,240.572,63.39L240.572,63.39z"/>
<path d="M237.807,63.39c0-0.696-1.084-1.259-2.422-1.259h-47.03c-1.339,0-2.424,0.563-2.424,1.259l0,0
c0,0.695,1.085,1.258,2.424,1.258h47.03C236.723,64.648,237.807,64.085,237.807,63.39L237.807,63.39z"/>
<g class='button'>
<path fill="#997951" d="M183.082,678.985c-0.444-17.543,13.324-29.759,29.759-29.759c4.63,0,8.991,1.086,12.896,2.97
c-4.286-2.393-9.218-3.768-14.477-3.768c-16.435,0-29.759,13.322-29.759,29.759c0,11.809,6.895,21.98,16.862,26.788
C189.253,699.889,183.366,690.159,183.082,678.985z"/>
<path fill="#997951" d="M226.78,652.72c9.113,5.087,15.227,14.813,15.282,25.99c0.09,17.758-13.322,29.759-29.758,29.759
c-4.628,0-8.99-1.086-12.897-2.97c4.287,2.393,9.218,3.768,14.477,3.768c16.437,0,29.759-13.322,29.759-29.759
C243.643,667.699,236.748,657.527,226.78,652.72z"/>
</g>
<path fill="#727171" d="M208.63,35.741c0,0-2.777,2.102-0.854,6.189c0,0,2.288,3.668,5.254,2.765c0,0-4.399-2.765-2.966-6.057
L208.63,35.741z"/>
<path opacity="0.5" fill="#FFFFFF" d="M341.41,0.386c0,0.382-0.861,0.692-1.924,0.692h-42.766c-1.063,0-1.924-0.31-1.924-0.692l0,0
c0-0.383,0.861-0.693,1.924-0.693h42.766C340.549-0.307,341.41,0.003,341.41,0.386L341.41,0.386z"/>
</g>
</svg>
</div>
<div id='player-container'>
<div class='container-bg' id='bg' style='background-image:url(image/singer/1.jpg)'>
<div class='bg-cover'></div>
</div>
<div class='container-music'>
<div class='music-header'>
<div class='header-signal'>
<ul class='signal-wrapper'>
<li class='first'></li><li></li><li></li><li></li><li></li>
</ul>
</div>
<div class='header-cate'>中国移动<i></i></div>
<div class='header-time'>20:34</div>
<div class='header-gt'>
<div class='header-item'>
<ul class='item-list'>
<li class='first moon'><i></i></li>
<li class='lock'><i></i></li>
<li class='alarm'><i></i></li>
<li class='bluetooth'><i></i></li>
</ul>
</div>
<div class='header-battery'></div>
<div class='header-electric'><i></i></div>
</div>
</div>
<div class='music-info'>
<div class='info-logo' id='goMenu-1'><i></i></div>
<div class='info-title' id='title'></div>
<div class='info-more' id='goLyric-1'>...</div>
</div>
<div class='music-menu'>
<ul class='menu-box' style='left:-100%'>
<li class='box-list'>
<div class='list-select' id='menu'>
<div class='select-china active'>
<p></p>
</div>
<div class='select-english'>
<p></p>
</div>
<div class='select-japan'>
<p></p>
</div>
<div class='select-calm'>
<p></p>
</div>
</div>
<div class='list-main' id='manu-list'>
<div class='main-china' style='left:0'>
</div>
<div class='main-english' style='left:-100%'>
</div>
<div class='main-japan' style='left:-100%'>
</div>
<div class='main-calm' style='left:-100%'>
</div>
</div>
</li>
<li class='box-perviewer'>
<div class='perviewer-singer' id='singer'></div>
<div class='perviewer-select'>
<div class='select-style'>标准</div>
<div class='select-dts'>dts</div>
</div>
<div class='perviewer-record' id='record'>
<img draggable="false"/>
</div>
<div class='perviewer-inner' id='pervlyric'>曲:<span>Jackiee</span></div>
</li>
<li class='box-lyric'>
<div class='lyric-box'>
<div class='lyric-wrapper' id = 'lyric'>
</div>
</div>
</li>
</ul>
</div>
<div class='music-tab'>
<ul class='tab-list'>
<li class='first'></li><li></li><li></li>
</ul>
</div>
<div class='music-timer'>
<div class='timer-duration' id='current'>00:00</div>
<div class='timer-line'>
<div class='line-length'>
<div class='line-ball' id='line-ball'>
<span></span>
</div>
</div>
</div>
<div class='timer-total' id='duration'></div>
</div>
<div class='music-control'>
<div class='control-prev' id='prev'><i></i></div>
<div class='control-play' id='play'><i></i></div>
<div class='control-pause' id='pause' style='display:none;'><i></i></div>
<div class='control-next' id='next'><i></i></div>
</div>
<div class='music-rooter'>
<ul class='rooter-item'>
<li class='item-1' id='heart'><i></i></li>
<li class='item-2' id='random'><i></i></li>
<li class='item-2' id='order' style='display:none';><i></i></li>
<li class='item-3' id='download'><i></i></li>
<li class='item-4' id='goMenu-2'><i></i></li>
<li class='item-5' id='goLyric-2'><i></i></li>
</ul>
</div>
</div>
<audio id = 'audio' src="http://cc.stream.qqmusic.qq.com/C100000eyims3MbmGS.m4a?fromtag=52">您的浏览器不支持html5的audio标签</audio>
</div>
<script src="js/jquery.min.js"></script>
<script src = 'js/data.js' type='text/javascript'></script>
<script src = 'js/player.js' type='text/javascript'></script>
<script src = 'js/face.js' type='text/javascript'></script>
<script>
var $music = $('#player-container');
$music.player($music,{
'audio' : 'audio', //播放器盒子
'box' : '.menu-box', //大盒子模块
'boxTab' : '.tab-list', //大盒子tab按键
'goMenu' : ['#goMenu-1','#goMenu-2'], //去歌单的按键id
'goLyric' : ['#goLyric-1','#goLyric-2'], //去歌词的按键id
'heart' : '#heart', //爱心按键
'download' : '#download', //下载按键
'random' : '#random', //随机按钮
'order' : '#order', //顺序
'menu' : '#menu', //歌单id
'menuList' : '#manu-list', //歌单列表id
'lyric' : '#lyric', //歌词表单
'titleShow' : '#title', //歌名显示id
'singerShow' : '#singer', //歌星显示id
'recordShow' : '#record', //歌星光盘显示id
'pervlyric' : '#pervlyric', //前面的歌词
'bg' : '#bg', //大背景歌星显示id
'play' : '#play', //播放按钮id
'prev' : '#prev', //上一首按钮id
'next' : '#next', //下首按钮id
'pause' : '#pause', //暂停按钮id
'line' :'#line-ball', //播放时间长度条
'current' : '#current', //播放目前时间
'duration' : '#duration', //播放总时长
'voladd' : '#voladd', //播放音量+
'volminus' : '#volminus' //播放音量-
});
</script>
</body>
</html>