优雅特效的MP3_html/css_WEB-ITnose
效果图很重要
歌曲选择了最近特别火的 太阳的后裔的原声音乐6首。通过正规渠道获得了听播的权利(花20块买的,哈哈),非商业用途,个人使用应该是没事的~~~
效果图.png
列子
这里是一个栗子seaseeYoul-Audio
说明
这是一个使用html+css+js完成的网页版MP3。这个栗子实现了上一曲,下一曲,喜欢,静音,查看播放列表,点歌(单击播放列表中的歌曲进行播放)。模仿了CD的旋转这些功能,从界面设计到功能全部由个人完成。暂时已兼容除IE外所有主流浏览器。系统有问题,IE测不了。。。底部附录全部代码。
准备材料
- sublime text3
- google浏览器 chrome ,或则其他对css3支持较好的浏览器
各个功能的实现思路
特别注意与小技巧:因为要使用定时器,所以在进行定时器相关操作时一定要先清除上一个定时器,否则会混乱。使用一些隐藏的标签来保存一些属性,能使js更加简便。如存储当前播放的歌曲的idⅠ:播放/暂停功能
播放功能实现了四个效果,一是音乐的播放,改变播放按钮的样式,这一点分别使用媒体标签拥有的play()方法,即:var _this=document.getElementById('audio'); _this.play(); 。改变按钮的样式则只需要改变按钮本身的class即可了。二是给CD添加一个旋转效果,这个效果则由css3来完成。使用 animation-play-state:paused/running;-webkit-animation-play-state:paused/running;来控制动画的开始与暂停,这个class的作用就是给CD添加动画的。三是倒计时,倒计时只需要获取到歌曲的总时间即可,我把所有的歌曲信息都存储到了一个数组里面,需要什么,我就从数组里面拿到即可。四是进度条,进度条同倒计时一样,使用定时器与css配合完成。核心代码如下:
music_list:[{"address":"1.mp3","lrc":"1.lrc","singer":"纯音乐","name":"Always(Inst)","time":"205"},{"address":"2.mp3","lrc":"2.lrc","singer":"T[伊莱美]","name":"Always","time":"205"},{"address":"3.mp3","lrc":"3.lrc","singer":"CHEN[EXO] & Punch","name":"Everytime","time":"189"},{"address":"4.mp3","lrc":"4.lrc","singer":"金娜英 & Mad Clown","name":"再次见到你","time":"235"},{"address":"5.mp3","lrc":"5.lrc","singer":"纯音乐","name":"再次见到你(Inst)","time":"235"},{"address":"6.mp3","lrc":"6.lrc","singer":"Lyn","name":"With you","time":"254"}]togglePlay: function(){ var _this = document.getElementById('audio'); clearInterval(timer); if($("#play").hasClass("icon-play")){ $("#play").removeClass("icon-play").addClass("icon-pause"); $(".disc").css({"animation-play-state":"running"}); _this.play(); timer = setInterval(audio.count,1000); }else{ $("#play").removeClass("icon-pause").addClass("icon-play"); _this.pause(); clearInterval(timer); $(".disc").css({"animation-play-state":"paused"}); } audio._likes();},Ⅱ上一曲/下一曲
上一曲下一曲的功能本质是更改audio标签里面的src地址,当src指向一首新的歌曲的时候,那么再点击播放,播放的音乐也就切换了。这个使用jq很容易完成。其次是更新现实的歌曲信息,核心代码如下:
next:function(){ var _this = document.getElementById('audio'); var _nextMusicId = parseInt($("#musicid").val())+1; _nextMusicId = _nextMusicId > audio.music_list.length-1? 0 :_nextMusicId; $("#musicid").val(_nextMusicId); var nextMusicSrc ="./music/" +audio.music_list[_nextMusicId].address; _this.src = nextMusicSrc; $("#play").addClass("icon-play"); $("#countdown").attr("time",audio.music_list[_nextMusicId].time); $(".singer").html(audio.music_list[_nextMusicId].singer); $(".music-info").html(audio.music_list[_nextMusicId].name); audio.togglePlay();},prev:function(){ var _this = document.getElementById('audio'); var _nextMusicId = parseInt($("#musicid").val())-1; _nextMusicId = _nextMusicId > audio.music_list.length-1? 0 :_nextMusicId; $("#musicid").val(_nextMusicId); var nextMusicSrc ="./music/" +audio.music_list[_nextMusicId].address; _this.src = nextMusicSrc; $("#play").addClass("icon-play"); $("#countdown").attr("time",audio.music_list[_nextMusicId].time); $(".singer").html(audio.music_list[_nextMusicId].singer); $(".music-info").html(audio.music_list[_nextMusicId].name); audio.togglePlay();},Ⅲ静音
静音很容易实现,同是使用媒体标签自带的属性,_this.muted = false;开启静音,_this.muted = true;关闭静音。【var _this = document.getElementById('audio');】
Ⅳ喜欢喜欢也很容易实现,点击爱心,把他变为实心,颜色改为红色(更改class),红色的爱,才是真爱。哈哈哈哈~~,并且设置播放列表里面的当前这首歌曲的like(自定义的)属性为like。再次点击的时候在变回去即可。
Ⅴ查看播放列表把装播放列表的div显示出来就可以了。什么样的方式自己决定。
Ⅵ 点歌点歌的原理其实与上一曲/下一曲是一样的,只是上下一曲是地址加减1,而点歌是指定某一首。
Ⅶ附录所有的代码都在这里
saeseeYoul-Audio CHEN[EXO]&Punch
Always(Inst)
seaseeYoul.
-00:00
Ⅷ其他说明这里是cCss代码 Css code
这里是Js代码 js code
其实还有两种状态没考虑到,一是网络不好的时候,MP3歌曲没加载完成,处于等待播放的状态,这时候应该清楚定时器以及一些其他效果,等待MP3重新开始播放。二就是MP3等待结束重新开始播放,这时候应该还原到播放状态。但是我是本地测试,而且网速比较好完全没有这两个状态。。。测不了啊测不了。。。原谅我吧。。。
亲们喜欢的点赞吧么么哒~~~
上一篇: php生成数组的使用示例 php全组合算法_PHP
下一篇: 数据库上机试验(三)
推荐阅读
-
优雅特效的MP3_html/css_WEB-ITnose
-
7款震撼人心的HTML5CSS3文字特效_html/css_WEB-ITnose
-
一款纯css3实现的超炫动画背画特效_html/css_WEB-ITnose
-
在HTML中优雅的生成PDF_html/css_WEB-ITnose
-
PostCSS一种更优雅、更简单的书写CSS方式_html/css_WEB-ITnose
-
9种CSS3 blend模式制作的鼠标滑过图片标题特效_html/css_WEB-ITnose
-
免费下载:简单、优雅的现代风格界面工具包_html/css_WEB-ITnose
-
基于css3的3D立方体旋转特效_html/css_WEB-ITnose
-
请高手解释一下小米4宣传页面的这个特效怎么做的?_html/css_WEB-ITnose
-
使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效_html/css_WEB-ITnose