使用 jQuery 实现移动端网易云音乐，包含首页、推荐歌单、播放器三个页面。
电脑请使用Chrome打开，并右键->检查打开开发者模式，使用移动端模拟器查看。或使用手机扫描二维码打开链接。
预览链接：预览
二维码：
jQuery/动态REM/LeanCloud
后端数据存储使用了LeanCloud，具体可查询 LeanCloud数据存储入门教程 。
- 音乐播放、暂停
- 搜索单曲、歌手、专辑
- 热门搜索
- 搜索历史记录
- 排行榜
- 推荐歌单
- 歌词(&歌词翻译)
- clone 项目至本地
git clone https://github.com/xmxshr/music163.git - 进入项目文件夹
cd music163 - 安装http服务器
http-server：npm i http-server -g - 启动http服务器
http-server -c-1 - 使用浏览器打开
http://127.0.0.1:8080
光盘分为三层，上层亮光投影、光盘内部图片、黑色底盘。
将黑色底盘固定不动，上层亮光投影、光盘内部图片添加『360°无限旋转』的动画。
根据所下载的歌词格式，写一个正则表达式，将歌词变为一个如下数组。
const lyrics = [{
time: '00:00',
lyric: '作词/作曲',
},{
...
}];
其中time表示当前句歌词显示时间，lyric表示当前句歌词。
遍历数组lyrics 创建标签<p data-time=${array[i].time}>${array[i].lyric}</p>。
使用HTML5新标签<audio>， 根据audio.currentTime可得到当前音乐播放时间。设置一个定时器，定时判断『当前句歌词』。
const $lyrics = $('.song-description .lyric .words p');
let $whichLine;
for (let i = 0; i < array.length; i++) {
// 最后一句歌词
if (i === array.length - 1) {
$whichLine = $lyrics.eq(i);
// 上一句歌词时间 <= 当前时间 <= 下一句歌词时间
} else if ($lyrics.eq(i).attr('data-time') <= currentTime && currentTime < $lyrics.eq(i + 1).attr('data-time')) {
$whichLine = $lyrics.eq(i);
break;
}
}
if ($whichLine) {
$whichLine.addClass('active').prev().removeClass('active');
const top = $whichLine.offset().top;
const ctTop = $('.song-description .lyric .words').offset().top;
const delta = top - ctTop - $('.song-description .lyric').innerHeight()*lineHeight / 3;
$('.song-description .lyric .words').css({
transform: `translateY(-${delta/fontSize}rem)`;
});
}
搜索时监听搜索框的input事件，以提供『推荐搜索』。即只要输入就会发送请求。
为了阻止不必要的请求，可在监听函数里加一个定时器。在用户停止输入之后，再提供『推荐搜索』选项。
let timer;
$('input#search').on('input', (e) => {
if (timer) {
window.clearTimeout(timer);
}
timer = setTimeout(() => {
const $input = $(e.currentTarget);
const inputValue = $input.val().trim();
// 显示input清空按钮
setClearInput(true);
if (inputValue === '') return;
// 发送『推荐搜索』请求
query.find().then((results) => {
...
}).catch();
}, 300);
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent