仿网易云音乐播放列表、皮肤样式、歌词滚动、轮播图等

前言：

今天是我第二次写博客，打算把以前做过的一些小东西记录下来，今天介绍的是我的毕业设计《小罡音乐》是简仿网易云播放器的一些界面和播放音乐功能。
是基于ASP.NET的小罡音乐的设计与实现，也并不是抄袭网易云，我认为《网易云》等任何一个成功上线的平台，它们的交互设计，页面设计，等都是我们作为学生，新手拿来练手的好项目。同时是展现自身的设计能力，逻辑能力,和专业能力以及专业知识的时候，那么最后展现出来的《小罡音乐》整个作品集将是自身的综合体现。

效果截图

1：主页界面

2：皮肤切换样式这里举例可爱粉和官方红

3：音乐列表

4：音乐播放界面

那今天主要是向大家大致介绍当前界面如何实现的

1：唱针：在左侧上面的唱针，它本身是一个png格式的透明底图，他的标签可以是html中的div span a 等常用标签，将他定位在左上角的位置，同时当在播放音乐的同时，使用css3 @keyframes将它顺时针旋转到唱片的位置，当暂停音乐音乐时又回到初始位置。当然动态效果是JQuery实现的，将需要左上角旋转20度的时候用上就好了

   @-webkit-keyframes clockwiseRotate {/*围着左上角旋转20度*/ to {transform-origin: 0 0;    transform: rotate(20deg); }}

2：播放按钮：html的标签，接着添加上一首，下一首，播放的图标矢量图。
这里是JQuery设置的。当播放音乐的时候切换至暂停图标。

3：音乐进度条：html的标签，主要依赖于css3绘制。当仔细好好看网易云进度条，整体来说可以分为3个部分。（固定的底色轨道，和走动的红色轨道，以及圆形小拇指）当然，红色进度条和小拇指都是能走动的，而小拇指是始终停靠在红色进度条的最右侧的

进度条html代码

    <div class="progress_bar" id="progress_bar">  <!--底色进度条--><div class="nowat" id="progress_bared">    <!--红色进度条--><i id="progress_cube"></i>           <!--圆形小拇指--><audio id="audio" src="mp3/15.mp3" ></audio></div></div>

进度条css样式

/*底色进度条*/
.progress_bar{float: left;width: 480px;margin-top: 11px;margin-left: 10px;height: 3px;position: relative;background: rgba(69,69,69,1);
}
/*红色进度条*/
.nowat {height: 100%;width: 0%;background: rgb(184,37,37);position: relative;
}
/*圆形拇指*/.nowat i {width: 4px;height: 4px;background-color: rgb(184,37,37);border: 5px solid #fff;border-radius: 50%;cursor: pointer;position: absolute;right: -4px;top: -5px;-webkit-box-shadow: 0 0 20px #fff;-moz-animation: qiuye 3s linear 2s infinite;-webkit-animation: qiuye 3s linear 2s infinite;-o-animation: qiuye 3s linear 2s infinite;}/*这是一个小动画，效果每隔多少时间之后周围会散发出光晕*/
@-webkit-keyframes qiuye {0% {-webkit-box-shadow: 0 0 20px #fff;}25% {-webkit-box-shadow: 0 0 10px #fff;}50% {-webkit-box-shadow: 0 0 0px #fff;}75% {-webkit-box-shadow: 0 0 10px #fff;}100% {-webkit-box-shadow: 0 0 20px #fff;}
}

注意：那么音量进度条的话，基本上和音乐进度条相似，改下相关参数就行了。真正功能上的实现还是在JQuery中。

4：CD音乐光盘：在左上角中的音乐CD光盘，通过网易云可以看到，当播放的时候，唱针会旋转到CD光盘位置上，而整个CD光盘是在顺时针旋转的，直到暂停音乐才停止。标签上我用了多数div嵌套，只有外层的div样式他有这样渐变的光色背景，嵌套在内的只显示边框线。同时在最里面的div是一个关于当前音乐专辑图的img 标签。

  <!-- CD盘区域--><div class="CDRegion"><div  class="CDRegion_01" id="photo_pic"><div class="CDRegion_02"><div class="CDRegion_02"><div class="CDRegion_02"><div class="CDRegion_02"><div class="CDRegion_02"><div class="CDRegion_02"><div class="CDRegion_02"><img src="Image/Domain/Currimage.png" id="photo_pic_img" class="CDRegion_02 CDRegion_03"/></div></div></div></div></div></div></div></div>

6：音乐播放：主要使用了javascript。

   var PageMusic; var audio = document.getElementById("audio");                                  //找到音乐播放器var progress_cube = document.getElementById("progress_cube");                  //找到音乐拇指var progress_bar = document.getElementById("progress_bar");                    //找到音乐进度条var progress_bared = document.getElementById("progress_bared");                //找到红色播放过的进度条var container = document.getElementById("Frame");                              //找到最大的父级容器容器var vol_cube = document.getElementById("vol_cube");                            //找到声音拇指var vol_bar = document.getElementById("vol_bar");                              //找到声音进度条var vol_bared = document.getElementById("vol_bared");                          //找到红色播声音的进度条var photo_pic = document.getElementById("photo_pic");                          //获取CD盘的旋转var songIndex=0;                                                               //设总歌曲列表为0var play_btn = document.getElementById("play_btn");                            //播放按钮var SoundZhen = document.getElementById("SoundZhen");                          //CD唱针的顺时针/逆时针var time = document.getElementsByTagName("time")[1];                           //获取歌曲结束时间var initTime = document.getElementsByTagName("time")[0];                       //获取歌曲开始时间var lyric_txt = document.getElementById("lyric_txt");                          //获取歌词容器var lyric_con = document.getElementById("lyric_con");                          //获取歌词父级容器var obj;      function config()                                                              //构造函数{this.play_mark = true;this.duration = audio.duration;this.vol = audio.volume;this.timer = null;this.rotateSum = 0;}obj= new config();//点击小音乐拇指cube的时候   计算点击以及移动的偏移量【拖拽进度条】progress_cube.onmousedown = function (ev) {var ev = ev || window.event;var initX = ev.clientX - this.offsetLeft;this.onmousemove = function (ev) {var ev = ev || window.event;var x = ev.clientX - initX;if (x < 0) { x = 0 }if (x > progress_bar.offsetWidth - 14) { x = progress_bar.offsetWidth - 14 }play_ctrl(x);}document.onmouseup = function () {document.onmousemove = null;progress_cube.onmousemove = null;}}//得到偏移量，改变音乐进度条位置function play_ctrl(x) {var timego = x / progress_bar.offsetWidth * audio.duration;progress_cube.style.left = x + "px";                          //改变拇指的位置progress_bared.style.width = x + "px";                        //以及改变红条已经播放的位置audio.currentTime = timego;                                   //调节当前时间，为当前拖动的playedTime();                                                 //再次播放}//点击进度条播放音乐progress_bar.onclick = function (ev) {var ev = ev || window.event;var dis = ev.clientX - (container.offsetLeft + progress_bar.offsetLeft) - 7;progress_cube.style.left = dis + "px";play_ctrl(dis);}//拖拽声音进度条vol_cube.onmousedown = function (ev) {var ev = ev || window.event;var initX = ev.clientX - vol_cube.offsetLeft;this.onmousemove = function (ev) {var ev = ev || window.event;var x = ev.clientX - initX;if (x < 0) { x = 0 }if (x > vol_bar.offsetWidth - 11) { x = vol_bar.offsetWidth - 11 }var volresult = x / vol_bar.offsetWidth;this.style.left = x + "px";vol_bared.style.width = x + "px";audio.volume = volresult;}document.onmouseup = function () {document.onmousemove = null;vol_cube.onmousemove = null;}}      //点击播放的时候play_btn.onclick = function () {//显示当前歌曲的时长SoundZhen.style.transform = "rotate(20deg)";           //CD盘唱针顺时针20度play_btn.src = "../Image/Domain/Storp.png";               //换暂停图标clearInterval(obj.timer);                              //记时开始if (obj.play_mark) {audio.play();obj.timer = setInterval(function () {obj.rotateSum = obj.rotateSum + 1;photo_pic.style.transform = "rotate(" + obj.rotateSum + "deg)";        //整个CD  播放时旋转}, 30)}else {SoundZhen.style.transform = "rotate(0deg)"     //CD盘唱针归位置play_btn.src = "../Image/Domain/Play.png";audio.pause();}obj.play_mark = !obj.play_mark;}//改变音乐function change_music() {clearInterval(obj.timer);if (songIndex >= lyric.length) { songIndex = 0 }else if (songIndex < 0) { songIndex = lyric.length }obj = new config();audioInit();play_btn.click();lyric_ctrl();}audioInit();//初始化总时长、音量等function audioInit() {$.ajax({url: Lrcpath,contentType: "charset='UTF-8'",type: "get",dataType: "text",success: lyric_ctrl});time.innerHTML = "00:00";$("#lblNowPlayName").text(lyric[0].name);$("#singername").text(lyric[songIndex].singername.toString());$("#CurrPlayimage").attr("src", lyric[0].img);$("#lblNowUserName").text(lyric[0].singername);$("#zjname").text(lyric[songIndex].zjname.toString());//   time.innerHTML ;audio.volume = 0.5;vol_cube.style.left = audio.volume * vol_bar.offsetWidth + "px";vol_bared.style.width = audio.volume * vol_bar.offsetWidth + "px";lyric_tit.innerText = lyric[0].name;$("#photo_pic_img").attr("src",lyric[0].img);audio.src = lyric[0].audio_src;progress_cube.style.left = 0;progress_bared.style.width = 0 + "px";}//计算时间function format(time) {var time = parseInt(time);var m = parseInt(time / 60);var s = parseInt(time % 60);m = zero(m);s = zero(s);function zero(num) {if (num < 10) {num = "0" + num;}return num;}return m + ":" + s;}//绑定监听事件audio.addEventListener("timeupdate", function () {playedTime();});//正在播放时function playedTime() {if (audio.currentTime == audio.duration)    {   }                       //播放完了之后if (format(audio.duration).toString() == "NaN:NaN") return;           time.innerHTML = format(audio.duration);var n = audio.currentTime / audio.duration;                           //计算时间差progress_cube.style.left = n * progress_bar.offsetWidth + "px";       //调节音乐当前进度条progress_bared.style.width = n * progress_bar.offsetWidth + "px";     //调节当前红条进度initTime.innerHTML = format(audio.currentTime);                       //给当前时间赋值var id_num = parseInt(audio.currentTime);var lyric_p = document.getElementsByTagName("p");for (var i = 0; i < lyric_p.length; i++) {lyric_p[i].index = i;}if (document.getElementById("lyric" + id_num)) {var obj = document.getElementById("lyric" + id_num);for (var i = 0; i < obj.index; i++) {lyric_p[i].className = "played";}for (var j = obj.index; j < lyric_p.length; j++) {lyric_p[j].className = "";}obj.className = "aquamarine active";lyric_txt.style.top = lyric_con.offsetHeight / 2 - obj.offsetTop + "px";}}var SoundTimes = 2;    //设置点击初始值var vol_cubeBefor;     //保存静音前声音拇指位置var vol_baredBefor;    //保存静音前声音红条位置var volumeBefore;      //保存静音前声音大小var soundimgpath       //保存静音前更换的图标路径$("#singername").text(lyric[songIndex].singername.toString());          //获取歌手名称$("#zjname").text(lyric[songIndex].zjname.toString());                  //专辑名称$("#Sounimage").click(function () {                                     //点击静音if (SoundTimes % 2 == 0) {volumeBefore = audio.volume;vol_cubeBefor = vol_cube.style.left;vol_baredBefor = vol_bared.style.width;soundimgpath = $(this).attr("src");audio.volume = 0;vol_cube.style.left = "0px";vol_bared.style.width = "0px";$(this).attr("src", "../Image/Domain/nosound.png");} else {audio.volume = volumeBefore;vol_cube.style.left = vol_cubeBefor;vol_bared.style.width = vol_baredBefor;$(this).attr("src", soundimgpath);}SoundTimes++;});//【解析歌词】function lyric_ctrl(soundName) {if (soundName== null) return;var lyricObj = soundName.toString();var temp = lyricObj.split("[");var html = "";for (var i = 0; i < temp.length; i++) {var arr = temp[i].split("]");var text = (arr[1]);var time = arr[0].split(",");var temp2 = time[0].split(".");var ms = temp2[1];//毫秒var temp3 = temp2[0].split(":");var s = temp3[1];//秒var m = temp3[0];//分var s_sum = parseInt(m * 60) + parseInt(s);if (text) {html += "<p id='lyric" + s_sum + "'>" + text + "</p>";}}lyric_txt.innerHTML = html;}lyric_ctrl();

注意：解析歌词的时候我是根据数据库查询出当前的歌曲歌词文件名称来解析生成歌词。生成歌词完了之后，给相关歌词p标签赋值innerText,然后通过时间，来偏移歌词标签的位置

7：歌词的格式

/*解析之后，能获取到每一行歌词出现到的时间，与播放时间相对应*/
[ti:我又想你了]
[ar:陈信喆]
[al:我又想你了]
[by:]
[offset:0]
[00:00.00]我又想你了 - 陈信喆
[00:00.56]词：刘雨知
[00:01.12]曲：刘雨知
[00:01.68]编曲：溪风
[00:02.24]混音：EThan
[00:02.81]吉他：尉迟春晓
[00:03.37]我又想你了 我不敢闭上双眼
[00:09.99]
[00:11.14]全世界都是你的笑脸
[00:16.03]
[00:17.92]我又想你了
[00:21.26]穿梭在我们都熟悉的画面
……………………………………………………………………………………

歌词下载可以去QQ音乐下载音乐的时候带上ric文件，其中ric文件就是歌词文件

运行效果视屏

仿网易云音乐播放器，实现皮肤的切换，音乐列表播放，轮播图等

最后

今天的介绍就到这里了，这个练手项目有点大，所以一下子介绍不完。当然如果有感兴趣的小伙伴可以联系我，邮箱地址为：1849798446@qq.com;有要源码的我也可以上传资源到CSDN。这个项目单纯的为学生提高设计能力和专业知识能力没有其他的想法。希望大家能点赞支持支持哈哈哈。
下面是我的好朋友博客链接，大家可以去看看https://blog.csdn.net/weixin_43851854/article/details/106733127

仿网易云音乐播放列表、皮肤样式、歌词滚动、轮播图等相关推荐

简单的仿网易云音乐小程序（一）
简单的仿网易云音乐小程序(一) 前言思维图注意事项虚拟机调试真机调试主页面搜索框歌单列表歌单模版 wxs filter 页面逻辑等待搜索页面搜索框 clearValue start ...
Android漂亮的音乐歌词控件，仿网易云音乐滑动效果
前言: 项目有个音乐播发器功能,实现音乐在线播放,同时需要带有歌词显示功能.网上也找过,在github找到勉强能用的控件,只是效果还是差强人意,不是特别好.于是趁有空的时间,参考了网上的部分demo, ...
Vue3.0 + typescript 高仿网易云音乐 WebApp
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布,让我心动不已,于是尝试用 vue3 实现一个完整的项目,整个项目全部使用了 composition ...
开源项目【LikeCloudMusic 云音】仿网易云音乐
LikeCloudMusic 云音仿网易云音乐v3.7.5,Material Design风格,基于MVP,使用RxBus作为事件总线通信库效果图目前功能扫描本地歌曲存储歌曲及歌单后台播放 ...
移动应用开发——uni-app框架仿网易云音乐播放器学习心得
目录一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架二.开发工具与项目创建 1.开发工具 2.项目创 ...
【开源项目学习】源码剖析，学习仿网易云音乐app代码
[前言] 这篇文字不全是讲app代码,而是博主怎么根据代码系统学习梳理的过程,非专业,如有不对,欢迎指出仿网易云音乐app源码地址:https://github.com/aa112901/remus ...
用HTML+CSS仿网易云音乐网站(6个页面)_实训素材
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 音乐网页设计 | 仿网易云音乐 | 各大音乐官网网页 | 明星 ...
仿网易云音乐（微信小程序版）
项目部分截图(Gif) 前言前一阵子学习了微信小程序,为了巩固所学的知识和提高实战经验,决定自己手撸一款小程序.因为听歌一直在用网易云音乐,所以突发奇想就做一款仿网易云音乐的小程序吧!开发中遇到了很 ...
Flutter+FishRedux高仿网易云音乐
flutter_netease_cloud_music 采用FishRedux框架与开源网易云音乐api开发的高仿网易云音乐APP,技术栈主要是:Flutter+FishRedux,目前主要是偏重AP ...

仿网易云音乐播放列表、皮肤样式、歌词滚动、轮播图等

前言：

效果截图

最后

仿网易云音乐播放列表、皮肤样式、歌词滚动、轮播图等相关推荐

最新文章

热门文章