登录

粗仿网易云PC端底部音乐播放器

最近在研究js,导致博客已经好久没更新文章了,这不这几天到网上到处翻箱倒柜的去学习,终于折腾了一个功能不全,bug蛮多的音乐播放器,对于这几天的学习,觉得自己要学习的还蛮多,看到那一个个函数的使用,一条条的代码,内心是崩溃的,哎。。。不说了,上图

这里只展示部分代码

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><meta name="keywords" content=""><meta name="description" content=""><link href="css/style.css" type="text/css" rel="stylesheet"></head><style type="text/css"></style><body><div class="zmusic">	<div class="mbar"><div class="pre"><a href="javascript:;" title="上一首" class="bg z_pre">上一首</a></div><div class="start"><a href="javascript:;" title="暂停/播放" class="bg paused ">暂停/播放</a></div><div class="next"><a href="javascript:;" title="下一首" class="bg z_next">下一首</a></div><div class="head">	<!-- <img src=""> --></div><div class="player">	<div class="title" title="音乐标题"><a href="" id="music_name"></a>&nbsp;&nbsp;&nbsp;<a href="" id="music_auth"></a></div>	<div class="playbar" title="播放条" >		<div class="bar progress" ></div>		<span class="btn cur"><i></i></span>	</div>	<div class="time" title="播放时间"><span id="t1">00:00</span> / <span id="t2">00:00</span></div></div><div class="playbutton">	<div class="voice" title="声音"><a href="javascript:;" class="voice_btn">声音</a></div>	<div class="order"><a href="javascript:;" title="顺序播放" class="btn">播放排序</a></div>	<div class="list"><a href="javascript:;" title="列表" id="music_num">0</a></div></div><div class="voice_barbg">	<div  class="currj_h"></div>	<div  class="bar currj"></div>	<span  class="btn btnj"></span></div><div class="playlist_Lyrics" title="列表"><ul id="ul_list"></ul><div class="lrc"></div></div></div></div><div id="d"></div><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="js/playlist.js"></script><script type="text/javascript" src="js/lrc.js"></script><script type="text/javascript" src="js/script.js"></script><script type="text/javascript" src="js/music.js"></script></body></html>

常用功能的js代码

   $('audio').remove(); //移除各种点击带来的重复加载播放器    var newaudio = $('<audio><source src="'+playlist[zPlay.currentIndex].src+'"></audio>').appendTo('body');     zbp.audio = newaudio[0];    // 应用初始音量    var volume_bar;    zbp.audio.volume = zPlay.volume;    // 绑定歌曲进度变化事件    zbp.audio.addEventListener('timeupdate', updateProgress);    zbp.audio.addEventListener('play', musicPlay); // 开始播放    zbp.audio.addEventListener('pause', musicPause);   // 暂停    zbp.audio.addEventListener('ended', next);   // 播放结束    zbp.audio.addEventListener('error', audioErr);   // 播放器错误处理    zbp.audio.addEventListener("loadstart",function(){        $('#music_name').text(playlist[zPlay.currentIndex].name);        $('#music_auth').text(playlist[zPlay.currentIndex].singer);        if(playlist[zPlay.currentIndex].img==undefined){          $('.head').html('<img src="images/playzm.png"/>');        }else{        $('.head').html('<img src='+playlist[zPlay.currentIndex].img+'>');        }    }); }// 播放function musicPlay() {    zbp.audio.paused = false;     // 更新状态(未暂停)    $(".paused").addClass("z_pause");    music_bar.lock(false);}// 暂停function musicPause() {    zbp.audio.paused = true;      // 更新状态(已暂停)     $(".paused").removeClass("z_pause");        // 移除其它的正在播放}//上一曲function pre(){    if (zPlay.currentIndex == -1) {          zPlay.currentIndex = 0;      } else if (zPlay.currentIndex == 0) {          zPlay.currentIndex = (playlist.length - 1);      } else {          zPlay.currentIndex--;      }      zbp.audio = zPlay.currentIndex;      play(zPlay.currentIndex);    zbp.audio.play();   }//下一曲function next(){    if (zPlay.currentIndex == -1) {          zPlay.currentIndex = 0;      } else if (zPlay.currentIndex == (playlist.length - 1)) {          zPlay.currentIndex = 0;      } else {          zPlay.currentIndex++;      }      console.log("zPlay.currentIndex : " + zPlay.currentIndex);      zbp.audio= zPlay.currentIndex;      play(zPlay.currentIndex);    zbp.audio.play();  }//获取当前播放时间function updateProgress(){    var time,s;    time=zbp.audio.currentTime;    s=parseInt(time);    document.title="仿网易";    if(s==parseInt(zbp.audio.duration)){ //歌曲时间播放完移除播放状态按钮       $('.paused').removeClass('z_pause');     }    if(zbp.paused !== false) return true;    // 同步进度条    music_bar.valgoto(time / zbp.audio.duration);}

以上就是这几天的成果,心有点累,话说余生还长,请多指教!!!code

点击查看demo

选择赏赐方式:

×

多少都是心意,感谢大家

选择分享方式:

×

扫一扫分享到微信朋友圈

标签: jQueryHTML5CSS

本文标题:粗仿网易云PC端底部音乐播放器

本文地址:https://www.zbpnice.cn/post/140.html

温馨提示:文章内容系作者个人观点,不代表柏平博客对观点赞同或支持。

版权声明: 本文为原创文章,创建于2年前 (2017-10-27),版权归 柏平 所有,欢迎分享本文,转载请保留出处!

评论列表 :共有1人吐槽, 814人围观

优质香港空间
优质香港空间  2年前 (2017-10-28)  沙发回复
暴露年龄了, 许蒿的歌,哈哈。想当年一曲《残桥断雪》单曲循环了好几个礼拜

发表评论: