Html5+Css3实现类似网易云音乐的移动版播放器
Demo
Demo链接如下(支持Chrome与Safari,其它浏览器未测试)并非太完善,主体功能已实现,其它功能有时间在加上吧。
http://followyourheart.sinaapp.com/Demos/musicPlayer/Index.html
↑↑↑↑↑↑↑↑↑↑狠狠戳上面链接看效果。↑↑↑↑↑↑↑↑↑↑
网易云音乐的网页版是没有移动页面的,我突发奇想,大不了我来做一个玩玩:
1.音乐资源的获取
<?php $searchUrl = 'http://music.163.com/api/playlist/detail?id='; if(!empty($_GET['id'])) { $searchUrl .= $_GET['id']; }header('Content-Type:application/json;charset=UTF-8');echo file_get_contents($searchUrl);
?>
主要做的事情就是在服务器端访问163的这个api,得到数据后返回给客户端,因为服务器端与客户端页面属于同一个域,跨域问题就解决了。顺便附上客户端请求的代码。
$(function () {var url = './playlist.php?id=173934373';$.ajax({url: url,type: 'GET',dataType: 'json',success: function (data) {console.log(data);ctx.playList = data.result.tracks;ctx.init();},error: function (msg) {alert(msg);}});
});
2.UI资源
最没品的是这个了,直接下载云音乐的安卓apk文件,解压,GET到所有图片.
3.页面效果实现
3.1 虚化背景
.bg {background: url(../resource/images/demo.jpg) center;position: absolute;top: 0px;left: 0px;height: 110%;width: 110%;margin: -5%;background-size: cover;filter: url(blur.svg#blur);-webkit-filter: blur(15px) brightness(0.6);-moz-filter: blur(15px) brightness(0.6);filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */z-index: -1;
}
3.2 唱片机
@keyframes rotate-disk {100% {ransform: rotateZ(360deg)}
}@keyframes rotate-needle-pause {100% {transform: rotateZ(-20deg);}
}@keyframes rotate-needle-resume {0% {transform: rotateZ(-20deg);}100% {transform: rotateZ(0deg);}
}
这是三段动画的定义,第一个rotate-disk是下面音乐碟的动画,后两个是磁针的动画。这几段定义很好理解,磁盘就是顺时针转360度,磁针就是从-20度转向0度跟0度转向-20度。
.pause-needle {animation: rotate-needle-pause 0.5s 1 normal linear;animation-fill-mode: forwards;
}.resume-needle {animation: rotate-needle-resume 0.5s 1 normal linear;animation-fill-mode: forwards;
}
由于磁针有两个动画,所以就需要定义两个class用于切换,其中animation-fill-mode很重要,这个表示动画结束后元素的状态是停留在开始还是结束,即属性规定动画在播放之前或之后,其动画效果是否可见。可以设置为none | forwards | backwards | both,看名字就知道具体效果了吧。这里设置为forwards就是为了让磁针转到相应位置后能保持该状态。由于磁针的旋转中心不在中心点上,所以要定义transform-origin。
.play-needle {position: absolute;top: -23px;left: 50%;margin: 0px -12px;z-index: 10;width: 100px;transform-origin: 20px 20px;
}
我们从demo中可以看出磁针上一部分是隐藏的,所以我们将top设置为负数了,同时需要在上级元素中设置overflow:hidden来隐藏超出的这部分,这样子Demo中既能隐藏磁针的上端,又能保持顶部title部分透明,这是一个小技巧了。
animation: rotate-disk 20s infinite normal linear;
animation-play-state: paused;
可以看出我专门将animation-play-state专门拿出来定义,这是为了能很好的控制动画暂停与播放,通过js代码直接改变这个style值就行了,默认设为暂停吧。这里涉及到很多animation的基础知识,不是很理解的可以参考http://www.w3school.com.cn/css3/css3_animation.asp
.play-needle {position: absolute;top: -23px;left: 50%;margin: 0px -12px;z-index: 10;width: 100px;transform-origin: 20px 20px;transition: transform 0.8s;
}.pause-needle {transform: rotateZ(-25deg);
}.resume-needle {transform: rotateZ(0deg);
}
对于转盘来说,它并不是简单两种状态或者几种状态的切换,属于一直在运行的动画,所以转盘用animation很合适,然而磁针用transition更合适。
3.3播放进度
<div class="process" id="process"><span id="currentTime">00:00</span><div class="process-bar"><div class="rdy"></div><div class="cur"><span id="processBtn" class="process-btn c-btn"></span></div></div><span id="totalTime">00:00</span>
</div>
具体的css方面没什么特点,调整位置即可
.process {width: 350px;height: 50px;position: absolute;bottom: 100px;margin: 0px -175px;left: 50%;font-size: 12px;font-family: Arial, Helvetica, sans-serif;
}.process .process-bar {position: absolute;left: 36px;width: 280px;margin-top: 5px;background-color: #615D5C;
}.process-bar .rdy {background-color: #B1ADAC;height: 2px;}.process-bar .cur {background-color: #FB0D0D;height: 2px;position: absolute;top: 0;left: 0;
}.cur .process-btn {cursor: pointer;background-image: url(../resource/images/process_btn.png);background-size: cover;position: absolute;top: -9px;right: -13px;width: 22px;height: 22px;margin-left: -11px;
}
关于进度条,有一个重要的特点,就是可以手动调整进度,操作方式为鼠标拖动或者手指在触摸屏上拖动。
ctx.initProcessBtn = function ($btn) {var moveFun = function () {var e = event;e.preventDefault();if (ctx.processBtnState) {var moveX = (e.clientX || e.touches[0].clientX) - ctx.originX,newWidth = ctx.$curBar.width() + moveX;if (newWidth > ctx.$processBar.width() || newWidth < 0) {ctx.processBtnState = 0;} else {ctx.$curBar.width(newWidth);}ctx.originX = (e.clientX || e.touches[0].clientX);}},startFun = function () {var e = event;ctx.processBtnState = 1;ctx.originX = (e.clientX || e.touches[0].clientX);},endFun = function () {if (ctx.processBtnState) {ctx.player.currentTime = ctx.$curBar.width() / ctx.$processBar.width() * ctx.player.duration;ctx.processBtnState = 0;ctx.updateProcess();}};$btn.on('mousedown', startFun);$btn.on('touchstart', startFun);$("body").on('mouseup', endFun);$("body").on('touchend', endFun);$("#process").on('mousemove', moveFun);$("#process").on('touchmove', moveFun);
}
4.播放逻辑
<span style="font-family:Courier New;font-size:14px;"><audio id="player" style="display:none"></audio></span>
当然创建audio的方式很多,直接new Audio()或者document.createElement('audio'),也可以像我那样在页面中写一个隐藏的tag。这个Demo中主要用到的api是有以下几个
buffered | 返回表示音频已缓冲部分的 TimeRanges 对象。 |
duration | 返回音频的长度(以秒计)。 |
currentTime | 设置或返回音频中的当前播放位置(以秒计)。 |
buffered返回一个TimeRanges对象,demo中主要用来获取已经缓冲的时间,从而更新缓冲进度条。
var buffer = ctx.player.buffered,bufferTime = buffer.length > 0 ? buffer.end(buffer.length - 1) : 0,duration = ctx.player.duration,currentTime = ctx.player.currentTime;
这里一段定义主要是获取当前播放器的各类时间,以秒为单位。ctx.player为我定义的变量,其实指向的就是audio对象,ctx.player.buffered为TimeRanges对象,所以我们通过end(lastIndex)方法拿到已缓冲的总时间。
duration为音乐的总时间,currentTime为当前播放的时间。这些信息需要及时更新到进度条中,可以用setInterval来实现。
play() | 开始播放音频。 |
pause() | 暂停当前播放的音频。 |
这两个方法没什么好介绍,最核心的两个方法。当然,在点击播放按钮时除了触发play()方法,同时还需要做一些页面处理,比如讲上面提到的转盘animation-play-state设置为running,将磁针的css class切换为resume-needle,从而实现一个视觉上开始播放的效果。暂停的话就将这些设置成相反的即可。
src | 设置或返回音频的 src 属性的值。 |
设置音频源,这个在网易返回的json中会有的,之前代码提到过,
ctx.playList = data.result.tracks;
这个播放列表中每一项就是一首歌的所有信息,比如ctx.playList[0].mp3Url就是第一首歌的地址,把它直接赋值给audio的src属性就行了,这个主要在下一首上一首中有用到,同时需要ctx.playList[0].album.picUrl得到图片信息更新到页面上的转盘跟背景。为了方便,我代码中的ctx.currentSong就是存储当前播放歌曲的json信息。
ended | 返回音频的播放是否已结束。 |
这个事件在音乐播放结束后触发,用于音乐结束后自动加载下一首:
<span style="font-family:Courier New;font-size:14px;">ctx.player.addEventListener('ended', ctx.next);</span>
ctx.next就是点击下一首时触发的方法,也就是说,当一首歌播放结束就让它播放下一首。当然这个逻辑也不能绝对,如果加入了循环设定(单曲循环、顺序播放、列表循环)的功能后,逻辑可能就要发生改变,暂时采用的就是列表循环了。
5.源代码
Html5+Css3实现类似网易云音乐的移动版播放器相关推荐
- 仿网易云音乐客户端的底部播放器的实现思路
2019独角兽企业重金招聘Python工程师标准>>> 猜测网易云音乐是写了baseactivity,每一个activity底部都有一个播放器,注意网易云音乐的页面切换没有动画效果, ...
- android 换肤 视频,网易云音乐4.0版体验:自定义换肤和短视频来了
原标题:网易云音乐4.0版体验:自定义换肤和短视频来了 日前,网易云音乐的iOS和Android更新到了4.0版本,对于期待更多创新功能的忠实粉来说,这着实是一个好消息.在新版本到来之后,不少人开始发 ...
- 项目总结3 类似网易云音乐导航栏指示器(个性推荐、歌单等)的简单实现(一)
我们先来看看网易云音乐导航栏指示器是什么样的. 箭头指向的蓝色框就是导航指示器,点击之后下面的view会跟着移动,每个button下面还有个小红线跟着.这个效果其实不难实现,我们先来分析分析. 在iO ...
- Vue.js全家桶高还原网易云音乐(Windows PC版)
项目地址 由于网易云的api限制,部分功能可能会失效,如有需要可以clone项目下来在本地运行,如果api炸了,麻烦在评论中告知一下我 因为做的是PC端 所以请在电脑端访问 源码地址 项目预览(评论和 ...
- 网易云音乐web/网页版无法播放问题
最近播放网易云音乐无法播放,查找原因是开启了IPV6后使用了google的IPV6 DNS,音乐资源网站ip解析会直接错误解析到本地127.0.0.1.具体如下图 解决办法1:添加以下内容到hosts ...
- 网易云音乐真的是随机播放吗
取100首歌,随机播放1000次,歌名按序号排如下: 0~99 由于太多就不一一打字了,这里直接贴图qwq 原始统计结果: 20 68 9 40 75 9 73 4 27 21 99 35 9 58 ...
- ★★★网易云音乐车机版7.4.0.★★★
是车上听的哈,看到这个需要的人挺多 下载地址:https://mdl.ink/HNKD1s
- 拿下阿里投资 回血的网易云音乐能成功突围吗?
阿里投资网易云音乐的消息在传了三个月之后,终于尘埃落定. 9月6日,网易与阿里共同宣 布达成战略合作,阿里以20亿美元收购网易旗下跨境电商平台考拉,同时,阿里作为领投方参与网易云音乐7亿美元B2轮融资 ...
- 我做了一个网易云音乐外链播放器的Vue组件,很nice
话不多说,上视频: https://www.bilibili.com/video/BV1p44y1M7KC/ 介绍 起因是我的一个小项目用到了网易云音乐的外链播放器:于是将它从项目里剥离出来做成一个V ...
最新文章
- C# SQL封装(一)
- layout_width和width,layout_height和height
- RobotFramework操作API
- 【编程题目】对称子字符串的最大长度 ★
- 编程猜单词游戏python_Python实现简单的猜单词小游戏
- 自学python条件_自学Python2.8-条件(if、if...else)
- python可以操作word吗_python实现在windows下操作word的方法
- struts1基础入门
- 征途linux mysql_Linux环境——MySQL安装及配置(5.7版本)
- 刘莹等:干旱对灌溉和雨养农田生态系统生产力的影响对比分析 【关于底图的考虑】
- Openbravo ERP介绍
- 如何改变hr标签的颜色
- 算法谜题1,狼羊菜过河
- 外卖骑手是如何被外卖企业逼向死亡之路的?
- 在stm32cubemx的freertos中创总任务跑支线任务
- 从零开始,创建一个VUE项目,详细图文详解。
- APIC Timer
- java+selenium自动化抓取51la数据
- 基于PaddleSpeech搭建个人语音听写服务
- 思岚科技荣获CSDN 【2019优秀人工智能案例TOP 30+】