仿网易云音乐移动端html模板,使用jQuery仿制网易云音乐移动端
2018年05月01日21:37:28
完成了主页的推荐音乐、热歌榜、搜索和播放页面。
2018年4月20日15:18:13
这是一个项目笔记,用于记录制作这个项目的点点滴滴。
明确需求
左一开始:主页(推荐音乐)、热歌榜、搜索、歌单和播放界面。
制作历程
自定义一个工作流
我选择了browser-sync,因为这个项目比较轻量(不需要引入很多的模块),所以就直接用一个browoser-sync配合开发实时刷新就行了。项目完成以后再用打包工具build一个dist就好了~~
旋转的光盘
到底是怎么实现光盘旋转?CSS动画,利用keyframes:
@keyframes circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.disc {
animation:circle 20s infinite linear;
/*选择动画,circle;时间;无限循环;线性变化*/
}
复制代码父容器page,上半层为点唱机disc-container容器,下半层为歌曲信息song-description。(把各个img素材添加进去。)
底部为两个按钮连接,用一个div包裹links容器。(mock数据)
给page一个满屏的高度,100vh。三个部分由上到下列式排布,用flax吧。然后根据判断就给各个img设置宽高。
歌词
先拿到歌词请求。利用开发者工具里面的network > filter > XHR拿到请求。复制一份,用来mock一份歌词。保存为json文件。
引入jQuery,发送一个ajax请求刚刚保存的lyric.json并把响应打出来(promise)
对lyr进行处理。(lyr指的是响应里面的key为lyric的值。lyr = object.lyric)
这是一个字符串,我们通过以回车为分隔符(‘\n’)组成一个新的数组打出来。
效果如下:
用到正则,匹配中括号里面的时间和后面的歌词内容。然后利用正则的api捕获内容返回给array。注意,这里用到map,是对array里面的每一项string进行match。
把array的内容生成html的P标签插入document中,属性是时间。
高度为显示三行歌词的高度。设置好字体大小,居中。
设置好active样式,给歌词lyric设定一个固定高度,给歌词片段p设置行高。
歌词播放的时候调整lines(就是存放歌词的div)的transform的样式。
播放
拿到歌曲的src
把audio的各种api熟悉一下(播放、暂停、获取当前时间、audio的事件)
当歌曲播放的时候,上方转盘跟着旋转。
添加播放按钮(这里我使用了图片)。
暂停
点击唱片,audio.pause(),同时移除表示playing的状态class。
首页
首页的制作相对简单些。
logo从官方的网页剪下来,是一个svg(透明的,加个背景色就能看见了。)
完成其CSS样式(这个就比较费时间和功夫了)
获取几首歌作为样本。可以选择放在七牛用来mock ajax请求。
mock一个song.json,然后把html上写死了的节点删除。根据返回的json拼接成html并插入到dom上。
首页载入以后,在相应数据到来之前,应该显示一个loading的动画表示正在加载数据;当数据到来以后渲染页面元素,并移除loading动画,目的就是为了提升用户体验。(可以用gif,也可以旋转一个svg图标。)
发送ajax请求,根据响应对跳转链接的地址进行拼接,同时对歌曲信息进行拼接。(ES6模板字符串)
拼接完毕以后就渲染到html上,并把载入动画移除。
点击以后,就会跳转到./song.html,同时附带上歌曲的id。在song.js上,根据location.search获得歌曲的id。(需要用正则匹配)
location.search.match(/\bid=([^&]*)/)[1]
复制代码
热歌榜
其实热歌榜的难度不大,里面的歌曲载入可以服用前面首页的loadmusic,所以就略过吧。
搜索
需要对api进行修改,把搜索建议的目标地址改一下,改为suggest/keyword 如果响应里面的code===200,说明成功了。
搜索提示可点击、热搜tag可点击。
歌词滚动
首先要获取当前歌曲的进度时间:audio.currentTime得到的是当前播放进度的秒数(注意,需要设置定时每隔500毫秒获取一次)
转换为正常的时间显示01:25,实质是把分钟数和秒数拼接一起,需要解决的就是数字的取整,判断是否需要加0。
setInterval(()=>{
let nowScends = audio.currentTime;
let minutes = ~~(nowScends/60)
let scends = ~~(nowScends%60)
let currentTime = `${padTime(minutes)}:${padTime(scends)}`;
},300)
function padTime(number){
return number>10?number+'':'0'+number
}
复制代码实现歌词滚动的代码:
let $lrcArray = $('.lyric .lines>p'); //这里取的是每一段歌词的集合。
let lrcLength = $lrcArray.length;
for(let i=0; i
let $whitchLines = $lrcArray.eq(i);//指应当显示的歌词行
let $nextLines = $lrcArray.eq(i+1);//指接下来要显示的歌词行
//当没有下一段歌词的时候,意味歌曲播放到最后,return。
if($nextLines.length === 0){
return;
}else if($whitchLines.attr('data-time') < currentTime && $nextLines.attr('data-time')>currentTime){
//遍历所有歌词,针对其属性`data-time`与当前的`currentTime`进行比较,如果当前时间比`i`的`data-time`大,比`i+1`的小,说明此时歌词应该是在`i`与`i+1`之间,应该显示$whitchLines的内容。
$whitchLines.addClass('active').siblings().removeClass('active')
let gap = $whitchLines.offset().top - $('.lines').offset().top ;
log('gap ='+ gap)
//因为歌词显示区域的高度是显示五行歌词,那么中间的高度就是总高度的五分之三
let middle = $('.lyric').height() / 5 * 2
$('.lines').css('transform',`translateY(-${gap-middle}px)`)
}
}
复制代码
难点记录与解决历程
1. `处理歌词data,需要会用正则来对字符串进行分割。`
解决:可以利用在线正则网站好好设计一遍你的正则表达式。
2. `对播放动画进行设计,实现播放暂停的时候唱片旋转角度不会归零。`
解决:使用 `animation-play-state: paused `
3. `mock数据会很繁琐。`
解决:七牛存储/自建api
4. `搜索框提示`和`搜索显示内容的节流`
5. `歌词滚动`
解决:要想好好歌词显示的逻辑:
- 确定歌曲时间戳(`audio.currentTime`)
- 根据时间戳匹配歌词(遍历歌词节点,根据歌词节点的`data-time`属性与时间戳进行比较,当时间戳位于两行歌词的`data-time`之间,高亮上一条歌词)
- 滚动歌词(`transform:translateY`)
复制代码
待更新
仿网易云音乐移动端html模板,使用jQuery仿制网易云音乐移动端相关推荐
- 使用jQuery仿制网易云音乐移动端
预览地址 2018年05月01日21:37:28 完成了主页的推荐音乐.热歌榜.搜索和播放页面. 2018年4月20日15:18:13 这是一个项目笔记,用于记录制作这个项目的点点滴滴. 明确需求 左 ...
- 【Jquery】Jquery判断客户端请求来源于PC端还是移动端
前言 随着移动时代趋于主流,很多网站都开发了PC端和移动端,那么通过Jquery判断客户请求来源于PC端还是移动端显得非常重要 实现 //判断函数 function is_mobile() {var ...
- 音乐类产品——“网易云音乐”app交互原型模板(免费使用)
网易云音乐虽是一款音乐app,但有人说它也是社交界的一股清流以及一匹黑马.音乐带给人的感染,激发着很多人在这里表达着他们的情绪和心声.网易云音乐上的真实用户点评,不仅被印在地铁的广告牌上,还在朋友圈频 ...
- 单独上线音乐直播APP,“LOOK直播”能给网易云音乐带来什么?
文|曾响铃 来源|科技向令说(xiangling0815) 作为移动互联网时代用户量数一数二的产品形态,在线音乐一直没有停止过在运营.模式上的探索. 最近,网易云音乐上线音乐直播产品"LOO ...
- 腾讯音乐回港上市,抖音取代网易云,成为腾讯音乐终极对手?
回归港股二次上市,腾讯音乐摸着"抖音"过河? 在线音乐下半场,竞争格局已变:传统老对手网易云音乐之外,腾讯音乐也面临短视频的新挑战.异军突起的在线演唱会,巨头间亦竞争激烈:9月2日 ...
- Axure企业官网通用模板web端+公司官网通用模板web端高保真原型+服务企业门户官网+加入我们+在线招聘+企业宣传+新闻动态+企业理念+产品与服务+公司通用版官方电脑端门户网站
作品介绍:Axure企业官网通用模板web端+公司官网通用模板web端高保真原型+服务企业门户官网+加入我们+在线招聘+企业宣传+新闻动态+企业理念+产品与服务+公司通用版官方电脑端门户网站 原型演示 ...
- 大话云时代rac_“音乐隐士”沈以诚:他在网易云音乐为什么这么火?
"介绍一下,沈以诚,他是我的宝藏男孩啊." 在网易云音乐.知乎.微博等关于原创音乐人沈以诚的话题中,出现频率最高的两个词汇是"宝藏男孩"和"男友音&q ...
- 苹果cmsv10仿电影淘淘PC+WAP爱看的高端免费模板
苹果cmsv10仿电影淘淘PC+WAP模板主题介绍: 模板名称:苹果cmsv10仿电影淘淘PC+WAP爱看的高端免费模板 模板程序:苹果cmsv10 模板类型:pc+wap 空间支持:php5.6+m ...
- HTML5+CSS3+JS小实例:仿制网易云音乐网站的轮播图
实例:仿制网易云音乐网站的轮播图 技术栈:HTML+CSS+JS 字体图标库:font-awesome 效果: 源码: <!DOCTYPE html> <html><he ...
- 苹果cmsv10仿91美剧网自适应收录好的免费模板
标题 苹果cmsv10仿91美剧网模板主题介绍: 模板名称:苹果cmsv10仿91美剧网自适应收录好的免费模板 模板程序:苹果cmsv10 模板类型:自适应模板 模板颜色:白色 模板来源:来自网络收集 ...
最新文章
- linux nfs如何配置,Linux上的NFS如何配置?
- JSBing-js自动绑定C++
- 【Transformer】Deformable DETR: deformable transformers for end-to-end object detection
- 软件工程---17.分布式软件工程
- Shell学习之结合正则表达式与通配符的使用(五)
- 基于JAVA+SpringMVC+Mybatis+MYSQL的个人博客系统
- 苹果微信更新不了最新版本_微信最新版建议更新!还有一个功能彩蛋!
- Linux基础之常用命令篇
- java中国象棋规则_Java实践(十二)——中国象棋
- 清除各个浏览器保存的账号密码信息
- Redis客户端与服务端
- 下载网页上的视频、音频文件
- 计算机设置页眉教案,设置页眉页脚——教学设计-20210318083746.docx-原创力文档
- qt 表格中插入一行_Qt在表格中加入控件
- 50个高端大气上档次的管理后台界面模板
- .netnbsp;C#实现nbsp;中文转Unic…
- 化龙小型汽车考场手动挡C1科目二考试技巧(全网唯一最详细教程)
- python--爬虫--获取和解析存储网页内容--以薄荷网为例
- 基于腾讯云实时音视频(TRTC)的web端 多人人脸识别小游戏
- Verilog设计“111”检测器与“01110”检测器并测试所有情况
热门文章
- MacBook Pro macOS 安装 Linux 双系统教程(一)
- 软考:软件设计师(历年真题汇总)|希赛网
- 企业发文的红头文件_【红头文件写作格式】 公司红头文件格式范本
- adsl密码查看器,宽带密码查看器,无广告,绿色版
- 通过TP-Link路由器WAN口嗅探PPPoE拨号密码-路由器拨号密码破解方法
- 利用google网管工具,快速诊断网站(一)
- c语言通讯录整体设计论文,通讯录管理系统的设计与实现
- 计算机语言入门vfp,VFP基础教程第二章VFP语言基础3
- user_agent
- 牛客 处女座的约会 规律