-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·281 lines (243 loc) · 11.2 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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<html>
<head>
<meta charset="UTF-8">
<title>Music FE - 百度音乐前端团队</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="css/font.css"/>
<link rel="stylesheet" href="css/page-transition.css"/>
<link rel="stylesheet" href="css/animate.css"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<header>
<h1 class="logo"><span>Music FE</span></h1>
<nav>
<ul>
<li class="on">Open Source</li>
<li>Our Lab</li>
<li>About Us</li>
<!-- <li>Join Us</li> -->
<li>FE Weekly</li>
</ul>
</nav>
</header>
<div id="pt-main" class="pt-perspective">
<div class="nav-toggle">
<span></span>
</div>
<canvas id="sphere-bg"></canvas>
<section id="open" class="pt-page">
<h3 class="animated font-l" data-animation="zoomIn">Mu Player</h3>
<div class="feature feature-core animated" data-animation="fadeInRight">
{
<span class="html5-core">html5</span>
<span class="plus">+</span>
<span class="flash-core">flash</span>
双核
}
</div>
<div class="feature feature-api animated" data-animation="fadeInLeft">
{ 简洁易用的API }
</div>
<div class="feature feature-stability animated" data-animation="fadeInLeft">
{ 应用于多个产品 稳定可靠 }
</div>
<p class="animated" data-animation="fadeIn">
<span>『百度音乐播放内核』</span>
<span>- 跨平台、轻量级的Web端音频播放解决方案</span>
</p>
<div class="btn-group animated" data-animation="fadeIn">
<a class="btn btn-github" href="https://github.com/Baidu-Music-FE/muplayer/" target="_blank">
<i></i>
View On Github
</a>
<span class="btn btn-start">
<i></i>
Quick Start
</span>
</div>
</section>
<section id="lab" class="pt-page">
<h2 class="animated" data-animation="zoomIn">Write the code and <span><strong>Rock</strong> the world</span></h2>
<ul class="showcase">
<li>
<a target="_blank" href="http://labs.music.baidu.com/demo/interactions/visualization/">
<div class="thumb" style="background-image: url(img/labs/music_is_life.jpg)"></div>
<div class="info">
<p class="title">律动的音符</p>
</div>
</a>
</li>
<li>
<a target="_blank" href="http://labs.music.baidu.com/flee/">
<div class="thumb" style="background-image: url(img/labs/flee.jpg)"></div>
<div class="info">
<p class="title">逃逸游戏</p>
</div>
</a>
</li>
<li>
<a target="_blank" href="http://labs.music.baidu.com/demo/audiolab/?p=2">
<div class="thumb" style="background-image: url(img/labs/ktv.jpg)"></div>
<div class="info">
<p class="title">在线K歌</p>
</div>
</a>
</li>
<li>
<a target="_blank" href="http://labs.music.baidu.com/demo/audiolab/?p=1">
<div class="thumb" style="background-image: url(img/labs/music_eq.jpg)"></div>
<div class="info">
<p class="title">音效增强</p>
</div>
</a>
</li>
<li>
<a target="_blank" href="http://labs.music.baidu.com/demo/audiolab/?p=4">
<div class="thumb" style="background-image: url(img/labs/web_piano.jpg)"></div>
<div class="info">
<p class="title">Web钢琴</p>
</div>
</a>
</li>
<li>
<a target="_blank" href="http://labs.music.baidu.com/demo/audiolab/?p=6">
<div class="thumb" style="background-image: url(img/labs/ring_maker.png)">
</div>
<div class="info">
<p class="title">铃声裁剪</p>
</div>
</a>
</li>
</ul>
</section>
<section id="about" class="pt-page">
<h2 class="animated" data-animation="zoomIn"><strong>我们</strong>是百度音乐前端团队</h2>
<ul class="members">
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/cuixuecheng.jpg" alt="" />
<div class="info">
<p class="nickname">cuixuecheng</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/gaojiexuan.jpg" alt="" />
<div class="info">
<p class="nickname">gaojiexuan</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/laixiang.jpg" alt="" />
<div class="info">
<p class="nickname">laixiang</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/luoqin.jpg" alt="" />
<div class="info">
<p class="nickname">luoqin</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/lutaining.jpg" alt="" />
<div class="info">
<p class="nickname">lutaining</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/lyvwei.jpg" alt="" />
<div class="info">
<p class="nickname">lyvwei</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/qiwei.jpg" alt="" />
<div class="info">
<p class="nickname">qiwei</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/sunxiangpeng.jpg" alt="" />
<div class="info">
<p class="nickname">sunxiangpeng</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/tanghao.png" alt="" />
<div class="info">
<p class="nickname">tanghao</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/wangyu.jpg" alt="" />
<div class="info">
<p class="nickname">wangyu</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/zoujiawei.jpg" alt="" />
<div class="info">
<p class="nickname">zoujiawei</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/default.png" alt="" />
<div class="info">
<p class="nickname">wangsijia</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/default.png" alt="" />
<div class="info">
<p class="nickname">zhaojingchen</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/default.png" alt="" />
<div class="info">
<p class="nickname">handong</p>
</div>
</li>
<li class="animated" data-animation="flipInY">
<img class="clip" src="img/avatar/default.png" alt="" />
<div class="info">
<p class="nickname">yejiren</p>
</div>
</li>
</ul>
</section>
<!-- <section id="join" class="pt-page">
<h2 class="animated" data-animation="zoomIn">与 <code><Music-FE></code> 一起<strong>成长</strong></h2>
<div class="recruitment">
<p>如果你是技术Geek，这里有各种开源项目等待你的加入</p>
<p>在业务需求的开发基础上，我们已经对外开源了百度音乐播放内核</p>
<p>还有多个进行中的内部项目，期待你的加入</p>
<p>不只是前端，你可以学习和使用到各种技术</p>
<p>我们有熟悉服务端的同学，开发维护的内部工具平台，为前后端调试提供便利</p>
<p>我们有热爱Node.js的同学，并已经使用到线上产品中</p>
<p>我们的播放内核还用到flash和音频处理</p>
<p>我们在移动端有丰富的积累和多个移动端项目。比如正在进行native和web的各种混合尝试，提升端的开发效率 ......</p>
<p>如果你热爱音乐，你将亲自体会到自己的力量对行业的贡献</p>
<p>这里有多个形态的音乐产品，和一群热爱音乐的人，收获到技术带来的成就感!</p>
</div>
</section> -->
<section id="weekly" class="pt-page">
<h2 class="animated" data-animation="zoomIn">每周<code><FE></code>技术见闻</h2>
</section>
</div>
<footer>
<ul class="social">
<li class="weibo"><a href="http://weibo.com/musicfe" target="_blank"></a></li>
<li class="github"><a href="https://github.com/Baidu-Music-FE" target="_blank"></a></li>
</ul>
<p class="copyright">©2014 Music FE</p>
</footer>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/lodash/dist/lodash.min.js"></script>
<script src="js/ys-sphere.js"></script>
<script src="js/main.js"></script>
</body>
</html>