web前端----------网易云音乐播放器简单的实现（素材自行下载）

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><style>body,ul,li,p{margin:0;padding:0;}ul{list-style:none;}#main{width:400px;height:600px; /*高度要由内容调整*/background-color:#ccc;margin:30px auto;background-image:url("img/b.jpg"); /*背景图片*/background-size:100%;position:relative;/*声音相对定位*/}
/*  歌单切换歌曲*/#songlist{text-align:center;/*文字水平居中*/position:relative;}#songlist>p{height:30px;line-height:30px;font-size:20px;}#songlist>ul{width:100%;display:none;background-color:#fff;position:absolute;left:0;top:30px;z-index:10;}/*唱片手臂的图片样式*/#songlist>#changpian{width:80px;height:80px;z-index:10;position:absolute;float:left;left:50%;transform:rotateZ(-45deg);transition:all 0.3s linear;transform-origin:top left;}#songlist>ul>li:hover{background-color:green;}
/*  歌手图片*/#singer{width:220px;height:220px;border-radius:50%;background-image:url("img/c.png");/*黑胶片图片*/background-size:100% 100%;margin:20px auto;position:relative;transform:rotate(0deg);}#singer>img{width:50%;height:50%;border-radius:50%;position:absolute;left:25%;top:25%;}
/*  #singer>div{*/
/*      width:100%;*/
/*      height:100%;*/
/*      border-radius:50%;*/
/*      background-color:#fff;*/
/*      opacity:0.8;*/
/*  }*/
/*  时间和进度条  */#showT{width:300px;height:20px;margin:0 auto;}#showT>p{width:40px;float:left;text-align:center;}
/************进度条*****************/#jindutiao{width:200px;height:20px;background-color:#fff;border-radius:10px;float:left;margin:0 10px;}#jindutiao>div{width:0; /*可变值*/height:20px;border-radius:10px;background-color:#f00;}
/************按钮样式************/#anniu{width:300px;height:80px;margin:20px auto;}#anniu>img{width:50px;height:50px;border-radius:50%;margin-top:20px;float:left;}#anniu>#bofang{width:80px;height:80px;margin:0 60px;}#leftbtn{transform:rotate(180deg);}
/**************声音图标*******************/#a>ul{list-style:none;/*列表前面的符号看不到*/display:none;/*不显示*/}#a{width:30px;height:150px;top:-264px;left:351px;border-radius:25px;
/*      background-color:#ddd;*/position:relative;transform:rotateZ(180deg);float:left;}#a:hover{background-color:#ddd;}#a:hover>ul{display:block;}#shengyin{width:10px;height:100px;        top:35px;left:10px;float:left;border-radius:25px;position:absolute;background-color:#fff;z-index:1;opacity:0.2; /*给白色进度条一个透明度*/}#yanse{width:10px;height:100px;     top:35px;left:10px;float:left;border-radius:25px;position:absolute;background-color:green;}#syimg{width:51px;height:51px;top:-10px;left:-10px;z-index:1;position:absolute;transform:rotateZ(180deg);}
/************播放模式************/#bfms{width:300px;margin:0 auto;top:320px;left:200px;position:absolute;text-align:center;/*文字和行内元素水平居中*/  }#bfms>select{width:80px;height:22px;border-radius:15px;/*边框圆角*/padding-top:0px;}
/******************歌词部分*****************/#gc{width:300px;height:90px;text-align:center;margin:0 auto;overflow:hidden;}#gcdz{margin-top:30px;}#gcdz>p{height:30px;line-height:30px;opacity:0.5;}#gcdz>p.show{color:#f00;opacity:0.7;font-size:20px;transition:all 0.3s linear;}</style><body>
<!--  音乐播放器 --><div id="main">
<!--     歌名歌单切换歌曲    --><div id="songlist"><p>薛之谦 - 丑八怪</p><img id="changpian" src="img/a.png"> <!-- 黑胶唱片手臂 --><ul><li οnclick="songchange(this.innerHTML)">薛之谦 - 丑八怪</li><li οnclick="songchange(this.innerHTML)">赵雷 - 鼓楼</li><li οnclick="songchange(this.innerHTML)">毛不易 - 别再闹了</li></ul></div>
<!--     歌手图片     --><div id="singer">
<!--       <div></div> --><img src="img/薛之谦 - 丑八怪.jpg">      </div>
<!--     时间和进度条  --><div id="showT"><p id="curT">0:00</p><div id="jindutiao"><div></div></div><!--进度条--><p id="durT">0:00</p></div>
<!--     按钮  --><div id="anniu"><img id="leftbtn" src="img/qh.jpg" οnclick="leftsong()"><img id="bofang"  src="img/zt.jpg"><img id="rightbtn"src="img/qh.jpg" οnclick="rightsong()"></div>
<!-- 播放模式 --><div id="bfms" class=""><select><img src="img/sxxh.jpg"><option value="0">单曲循环</option><option value="1">顺序播放</option><option value="2">随机播放</option></select></div>
<!-- 声音控件     --><div id="a"><img id="syimg"  src="img/sy.png"><ul><li><div id="shengyin"></div></li><li><div id="yanse"></div></li></ul></div>
<!--     歌词   --></br><div id="gc"><div id="gcdz">
<!--         <p class="show">丑八怪 - 薛之谦</p> -->
<!--         <p>作词：甘世佳</p> -->
<!--         <p>作曲：李荣浩 </p> -->
<!--         <p>如果世界漆黑 其实我很美</p> -->
<!--         <p>在爱情里面进退 最多被消费</p> --></div></div></div>
<!-- 音频标签 --><audio id="audio" src="img/薛之谦 - 丑八怪.mp3"></audio>
<!--     歌词lrc文本内容 --><textarea hidden>
[00:00.63]丑八怪 - 薛之谦
[00:03.13]作词：甘世佳
[00:05.32]作曲：李荣浩
[00:16.98]
[00:20.26]如果世界漆黑 其实我很美
[00:23.88]在爱情里面进退 最多被消费
[00:27.70]不管同样的是非
[00:29.69]又怎么不对 无所谓
[00:35.69]如果像你一样 总有人谄媚
[00:39.32]围绕着我的卑微 也许能消退
[00:43.32]其实我并不在意 有很多机会
[00:46.69]像巨人一样的无畏
[00:49.51]放纵我心里的鬼
[00:51.20]可是我不配
[00:54.46]丑八怪 能否别把灯打开
[01:02.21]我要的爱 出没在漆黑一片的舞台
[01:09.46]丑八怪 在这暧昧的时代
[01:17.58]我的存在 像意外
[01:24.48]
[01:37.79]有人用一滴泪 会红颜祸水
[01:41.35]有人丢掉称谓 什么也不会
[01:45.29]只要你足够虚伪
[01:47.10]就不怕魔鬼 对不对
[01:53.05]如果剧本写好 谁比谁高贵
[01:56.74]我只能沉默以对 美丽本无罪
[02:00.63]当欲望开始贪杯 有更多机会
[02:04.07]像尘埃一样的无畏
[02:06.89]化成灰谁认得谁管他配不配
[02:08.65]
[02:11.96]丑八怪 能否别把灯打开
[02:19.52]我要的爱 出没在漆黑一片的舞台
[02:26.83]丑八怪 在这暧昧的时代
[02:34.96]我的存在 不意外
[02:42.33]
[03:01.96]丑八怪 其实见多就不怪
[03:09.96]放肆去high 用力踩
[03:14.15]那不堪一击的洁白
[03:17.21]丑八怪 这是我们的时代
[03:25.48]我不存在 才意外</textarea><textarea hidden>[00:00.40]赵雷 - 鼓楼
[00:01.06]作词：赵雷
[00:01.26]作曲：赵雷
[00:01.46]编曲：赵雷、喜子
[00:01.81]制作人：赵雷、喜子、姜北生
[00:02.31]贝斯：张岭
[00:02.51]鼓：贝贝
[00:02.66]电琴：喜子
[00:02.86]箱琴：赵雷
[00:03.06]口琴：赵雷
[00:03.26]MIDI：喜子
[00:03.46]和声：赵雷、孙嫣然、唐宁
[00:26.14]我走在鼓楼下面
[00:31.66]路在堵着
[00:34.28]雨后的阳光散落
[00:38.56]人们都出来了
[00:42.36]执着的迷惘的
[00:47.79]文艺青年很多
[00:50.39]如果我无聊了就会来这里坐坐
[00:58.39]我是个沉默不语的靠着墙壁
[01:03.49]晒太阳的过客
[01:06.48]如果我有些倦意了
[01:09.98]就让我在这里独自醒过
[01:15.18]我站在鼓楼上面
[01:19.29]一切繁华与我无关
[01:23.19]这是个拥挤的地方
[01:27.26]而我却很平凡
[01:47.28]我走在鼓楼下面
[01:53.08]淋湿的咖啡馆
[01:55.29]睡不着的后海边
[01:58.99]月亮还在抽着烟
[02:03.49]喝醉的亲吻着
[02:09.05]快活的人不眠
[02:11.61]唯有我倚着围栏
[02:15.06]对过往说晚安
[02:21.51]晚安
[02:52.39]我是个沉默不语的靠着车窗
[02:57.39]想念你的乘客
[03:00.25]当一零七路再次经过
[03:04.35]时间是带走青春的电车
[03:09.08]我站在什刹海边
[03:13.14]一切甜蜜与我无关
[03:17.04]这是个拥挤的地方
[03:21.14]而我却很孤单
[03:24.65]我在鼓楼
[03:28.85]我在鼓楼
[03:32.80]我在鼓楼
[03:40.86]我在鼓楼
[03:45.12]我在鼓楼
[03:49.02]我在鼓楼</textarea><textarea hidden>
[00:00.00]《别再闹了》
[00:03.00]演唱：毛不易
[00:06.00]作词/作曲：小柯
[00:09.00]
[00:12.00]
[00:15.00]
[00:16.80]我们聊些 有趣的事情
[00:20.85]别把气氛弄的 如此低沉
[00:25.31]我知道 这几天你心烦
[00:29.76]每个人的活 都不简单
[00:32.49]
[00:33.19]我知道 如果把你换做我
[00:37.93]我也会冲动 也会不安
[00:41.83]即使天塌了 还有我在身边
[00:46.59]没有什么 不解的难
[00:50.54]
[00:51.24]外面纷纷扰扰 里面乱乱糟糟
[00:55.05]我们别再闹了
[00:58.55]这个冬天 已然很冷了
[01:02.74]我们靠在一起 好吗
[01:07.03](Music)
[01:21.92]我们聊些 有趣的事情
[01:26.05]别把气氛弄的 如此低沉
[01:30.51]我知道 这几天你心烦
[01:34.96]每个人的活 都不简单
[01:39.03]
[01:39.73]外面纷纷扰扰 里面乱乱糟糟
[01:43.38]我们别再闹了
[01:47.08]现实生活 本来已很累了
[01:51.54]把你的手给我吧
[01:55.90]
[01:56.60]外面纷纷扰扰 里面乱乱糟糟
[02:00.18]我们别再闹了
[02:03.83]这个冬天 已然很冷了
[02:08.17]我们靠在一起 好吗
[02:13.35](Music)
[02:28.32]外面纷纷扰扰 里面乱乱糟糟
[02:31.70]我们别再闹了
[02:35.41]这个冬天 已然很冷了
[02:39.70]我们靠在一起 好吗
[02:44.24]
[02:44.94]外面纷纷扰扰 里面乱乱糟糟
[02:48.56]我们别再闹了
[02:52.27]现实生活 本来已很累了
[02:56.79]把你的手给我吧
[03:00.04]
[03:00.74]这个冬天 已然很冷了
[03:05.05]我们靠在一起 好吗
[03:09.98]
[03:12.00]</textarea><script>
//  歌名歌单切换歌曲
//  点击p显示ulvar pshow = document.querySelector("#songlist>p");/*找到歌的标题*/var audio = document.getElementById("audio");pshow.οnclick=function(){document.querySelector("#songlist>ul").style.display = "block";}//点击ul中的li ul不显示 p里面内容变化 歌名切换 歌曲，歌手图片切换function songchange(obj){document.querySelector("#songlist>ul").style.display = "none";//歌名的切换pshow.innerHTML=obj;//播放的歌曲切换audio.src ="img/"+obj+".mp3"//歌手图片切换
//      document.getElementById("singer").style.backgroundImage ="url('img/"+obj+".jpg')";document.querySelector("#singer>img").src="img/"+obj+".jpg";//暂停的状态zt();//歌手旋转角度归零deg =0;document.querySelector("#singer").style.transform = "rotate(0deg)";
//      时间归零document.getElementById("curT").innerHTML = "0:00";document.getElementById("durT").innerHTML = "0:00";
//      进度条归零document.querySelector("#jindutiao>div").style = "width:0px";
歌词的切换///        var s = pshow.innerHTML;  //遍历数组 for循坏for(var i=0;i<3;i++){if(songarr[i]==s){var geci=i;//获取正在播放的歌曲名在数组songarr中的下标}}
//      console.log(geci);getgc(geci); }//歌手图片旋转var deg = 0;//自定义图片旋转角度function imgrotate(){deg+=3;document.querySelector("#singer").style.transform = "rotate("+deg+"deg)";}var timer1 = null;//定义变量等待接受定时器var timer2 = null//播放function bf(){audio.play();document.getElementById("bofang").src="img/bf.jpg";timer1 = setInterval(imgrotate,100);document.querySelector("#changpian").style.transform = "rotate(5deg)";showT();//先调用时间显示函数timer2 = setInterval(showT,1000);}//暂停function zt(){audio.pause();document.getElementById("bofang").src="img/zt.jpg";document.querySelector("#changpian").style.transform = "rotate(-45deg)";clearInterval(timer1);clearInterval(timer2);}//播放暂停按钮效果document.getElementById("bofang").onclick =function(){//判断，音频文件audio处于播放状态还是暂停状态if(audio.paused){//如果是暂停就播放bf();}else{//如果是播放就暂停zt();}}//定义一个所有歌名的清单，清单有顺序的 数组[1,2,5]var songarr=["薛之谦 - 丑八怪","赵雷 - 鼓楼","毛不易 - 别再闹了"];//上一首切换歌曲，songchange（obj）；function leftsong(){//正在播放的歌名  pshow.innerHTMLvar songbf = pshow.innerHTML;//console.log(songbf);  //遍历数组 for循坏for(var i=0;i<3;i++){if(songarr[i]==songbf){var num=i;//获取正在播放的歌曲名在数组songarr中的下标}}//下标数字减1，对应上一首歌歌名if(num==0){num = num+2;}else{num = num-1;}
//      把要切换的歌名给换歌的函数songchangesongchange(songarr[num]);}function rightsong(){//正在播放的歌名  pshow.innerHTMLvar songbf = pshow.innerHTML;//console.log(songbf);//遍历数组 for循坏for(var i=0;i<3;i++){if(songarr[i]==songbf){var num=i;//获取正在播放的歌曲名在数组songarr中的下标}}//下标数字减1，对应上一首歌歌名if(num==2){num = num-2;}else{num = num+1;}
//      把要切换的歌名给换歌的函数songchange songchange(songarr[num]);}
//  时间和进度条function showT(){var curT =  audio.currentTime;//获取当前播放时间(秒)var curTM = parseInt(curT/60);//通过取整获取当前分钟var curTS = parseInt(curT%60);//通过取余数在取整获取当前秒if(curTS<10){curTS = "0"+curTS;}document.getElementById("curT").innerHTML = curTM+":"+curTS;var durT =  audio.duration;//获取总时长(秒)var durTM = parseInt(durT/60);//通过取整获取总时长分钟var durTS = parseInt(durT%60);//通过取余数在取整获取总时长秒if(durTS<10){durTS = "0"+durTS;}document.getElementById("durT").innerHTML = durTM+":"+durTS;// 进度条的显示var num = curT/durT*200;document.querySelector("#jindutiao>div").style = "width:"+num+"px";}
//  点击进度条控制音乐播放的快进和快退document.getElementById("jindutiao").onclick = function(event){//   console.log(event.offsetX);//进度条显示。鼠标点击的位置event.offsetXdocument.querySelector("#jindutiao>div").style = "width:"+event.offsetX+"px";//调整音乐播放当前时长audio.currentTime = event.offsetX/200*audio.duration;//当前播放时间显示发生变化showT();}
//  点击进度条控制音乐音量的大小document.getElementById("shengyin").onclick = function(event){//console.log(event.offsetY);//进度条显示。鼠标点击的位置event.offsetYdocument.querySelector("#yanse").style = "height:"+event.offsetY+"px";//调整音乐声音长短audio.volume = event.offsetY/100*1;//当前播放时间显示发生变化}
//      键盘控制声音大小：向上 音量变大 向下 音量变小
//      键盘控制音乐播放的宽进快退 向左 快退 向右 快进var x = 1;//空格控制音乐的暂停播放的变量document.onkeydown = function(){//判断一下，按的是哪个键if(event.keyCode == 38){//对最大音量做个限制和判断if(audio.volume<0.95){audio.volume +=0.05;document.querySelector("#yanse").style = "height:"+(audio.volume*100)+"px";/*声音进度条高度*/}else{audio.volume = 1;document.querySelector("#yanse").style = "height:"+(audio.volume*100)+"px";/*声音进度条高度*/}}else if(event.keyCode == 40){//对最小音量做个限制和判断if(audio.volume>0.05){audio.volume -=0.05;document.querySelector("#yanse").style = "height:"+(audio.volume*100)+"px";/*声音进度条高度*/}else{audio.volume = 0;document.querySelector("#yanse").style = "height:"+(audio.volume*100)+"px";/*声音进度条高度*/}}else if(event.keyCode == 37){//对歌曲左右进度条做个限制和判断if(audio.currentTime>5){audio.currentTime -=5;           }else{audio.currentTime = 0;}showT();}//对歌曲左右进度条做个限制和判断else if(event.keyCode == 39){if(audio.currentTime<audio.duration-5){audio.currentTime +=5;}else{audio.currentTime = audio.duration;
//                  zt();
//                  audio.currentTime=0;}showT();}else if(event.keyCode == 32){//键盘空格控制音乐播放暂停        if(x==1){zt();x -= 1;}else if(x==0){bf();x+=1;}}//console.log(audio.currentTime);//控制台调试}
//播放模式功能audio.onended = function(){//先暂停zt();//判断一下，现在是哪种模式？var value = document.querySelector("#bfms>select").value;//console.log(value);控制台输出是哪种模式if(value==0){//单曲循环}else if (value==1){//顺序播放 下一首切换rightsong();}else if (value==2){//随机播放 歌单中随意一首歌var num =parseInt(Math.random()*3);//0,1,2  0~3//把要切换的歌名给函数songchangesongchange(songarr[num]);}//最后在播放bf();}
歌词高亮滚动效果var gctime = [];//定义数组接收歌词对应时间var gcarr  =  [];//定义数组接收歌词对应文本
//定义获取歌词函数 把lrc内容转换成五个数组 动态加载歌词function getgc(i){//两个数组初始化gctime=[];gcarr =[];//通过标签名称获取元素放置集合中，下标为0的元素的网页显示内容var gctext = document.getElementsByTagName("textarea")[i].innerHTML;gctext = gctext.split("\n");//以换行分隔字符串，返回值为数组//console.log(gctext);//遍历数组找那个每一个元素，处理元素字符串gctext.map(function(item){var msnum = item.slice(item.indexOf("[")+1,item.indexOf("]"));//分秒结构//console.log(msnum.split(":")[0],msnum.split(":")[1]);num = (msnum.split(":")[0]*60+Number(msnum.split(":")[1]-0.5));//分钟数*60+秒钟数  Number 把括号中的转为数字gctime.push(num);gcarr.push(item.slice(item.indexOf("]")+1));});//map遍历数组 JavaScript语法ES5
//歌词袋子中，初始化document.getElementById("gcdz").innerHTML = "<p class='show'></p>";//动态加载歌词gcarr.map(function(item){//新建一个P标签var p = document.createElement("p");//p添加网页显示内容，每句歌词p.innerHTML = item;//新建的P标签放到document.getElementById("gcdz").appendChild(p);});}//首先给歌词初始化      第一首歌的歌词var geci = 0;getgc(geci);console.log(gctime,gcarr);//歌词高亮滚动audio.ontimeupdate = function(){var index = 0;//定义gctime数组下标，初始值为0while(audio.currentTime>gctime[index]){index ++;}//获取到整在播放的歌词下标 index-1//console.log(index);//在上面的获取歌词中，gcdz里初始化添加了一个空的P标签class=show//歌词滚动var num=30-30*index;document.getElementById("gcdz").style = "margin-top:"+num+"px";//高亮状态 下标index-1 父元素的第 index个子元素document.querySelector("#gcdz>p.show").className = "";  //清除之前红色的清除 class=show清除document.querySelector("#gcdz>p:nth-child("+(index+1)+")").className = "show";//添加}</script></body>
</html>

web前端----------网易云音乐播放器简单的实现（素材自行下载）相关推荐

编程骚操作：Java Web实现网易云音乐播放器，帮你省下会员费
H5增加了很多的标签,面试的时候,如果面试官问你H5都有哪些新标签,你回答header.footer.nav. 这么回答几乎是无效的,因为这些标签在H5里面的角色,相当于鸡骨头.鱼刺.蘑菇腿--全是鸡 ...
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器前言没有使用任何框架,只是想用最简单纯js的代码实现下前台: Javascript+jQuery 后台: php/nodej ...
移动应用开发——uni-app框架仿网易云音乐播放器学习心得
目录一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架二.开发工具与项目创建 1.开发工具 2.项目创 ...
树莓派云音乐c语言,基于树莓派的红外遥控版网易云音乐播放器
基于树莓派的红外遥控版网易云音乐播放器.下面是遥控键盘示意图: CH- CH CH+ << >> || - + EQ 0 100+ 200+ 1 2 3 4 5 6 7 8 9 ...
linux树莓派网易云音乐,基于树莓派的红外遥控版网易云音乐播放器
基于树莓派的红外遥控版网易云音乐播放器.下面是遥控键盘示意图: CH- CH CH+ << >> || - + EQ 0 100+ 200+ 1 2 3 4 5 6 7 8 9 ...
HTML网页调用网易云音乐播放器代码
表现形式一:单曲播放调用代码: <iframe frameborder="no" border="0" marginwidth="0" ...
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器实现功能每日推荐私人FM 歌单广场排行榜歌手歌曲播放 mv播放上下滑动切换云盘上传用户登录歌单创 ...
YesPlayMusic:一个高颜值多音频资源的网易云音乐播放器
都2023年了还有人不知道这款开源免费下载的多音频,高颜值的音乐播放器吗(文末有下载地址) 首先我们来看一下YesPlayMusic的特性和网易云音乐播放器的功能大同小异,少了歌曲评论的功能,这个功 ...
第三方网易云音乐播放器ieaseMusic Mac中文版v1.3.4版
ieasemusic mac中文版是目前mac平台上最好的网易云音乐播放器,与网易云音乐官方客户端最大的区别是,官方的就是「客户端」,完全按照其产品内容进行直接堆砌布局,而 ieaseMusic 是基 ...
静态博客网页中的网易云音乐播放器
见我的博客 https://blog.wyue.site/2020/04/12/1/ 转载前请联系我,联系方式请见我博客 https://blog.wyue.site/ 一直想做个博客中的音乐播放器, ...

web前端----------网易云音乐播放器简单的实现（素材自行下载）

web前端----------网易云音乐播放器简单的实现（素材自行下载）相关推荐

最新文章

热门文章