网页设计音乐播放器_简洁的音乐播放器

全栈程序员站长

发布于 2022-11-04 15:42:15

8.8K0

发布于 2022-11-04 15:42:15

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君

今天闲着无事，就想写点东西。然后听了下歌，就打算写个播放器。于是乎用h5 audio的加上js简单的播放器完工了。欢迎改进留言。演示地点跳到演示地点

html代码如下`<!DOCTYPE html> <html> <head> <title>music</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="music.css"> </head> <body> <div id = love> <audio src="" controls class="music"></audio> <ul class="mlist"> <li class="">这个年纪</li> <li>七月的风</li> <li>音乐</li> </ul> </div> <script type="text/javascript" src="music.js"></script> </body> </html>`

然后就是css`

*{ 

margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
#love{ 

position: relative;
height: 250px;
width: 300px;
border: 3px solid black;
border-radius: 10%;
background-image: url(demo.jpg);
background-size: cover;
}
.play{ 

color: white;
background-color: #87CEFA;
margin:0 6px;
}
#love .mlist{ 

margin:10px;
background-color: rgba(1,1,1,0.5);
height: 165px;
border-radius: 5px;
}
#love ul li{ 

line-height:30px;
text-align: center;
cursor:pointer;	
border-radius: 4px;
}
#love ul li:hover{ 

line-height:45px;
text-align: center;
cursor:pointer;
margin:0 5px;
background-color: #F0F8FF;
border-radius:6px;
}

`下面就是js了你的点赞是我最大的动力。。。萌新前进中。

然后有人说让我写个歌词滚动，额
歌词滚动本来想用ajax的，发现了很自己很多不足、
附加歌词滚动的链接；https://blog.csdn.net/qq_44210563/article/details/104077613

var musicNode = document.getElementsByClassName('music')[0];
var     mlist = document.getElementsByClassName('mlist')[0];
var       lis = document.getElementsByTagName('li');
var       len = lis.length;
var  musicsrc =[ ];//这个数组用来放歌单的url。详情可以看我的网页demo
musicNode.src = musicsrc[0];
for (var i = 0; i < len; i++) { 
//单击改变playmusic
(function(i){ 

lis[i].onclick =function(){ 
        
musicNode.src = musicsrc[i];
musicNode.load();
musicNode.play();
for (var j= 0; j < len; j++) { 

lis[j].className = '';
}
this.className = 'play';
}})(i);
}
musicNode.onended =function(){ 
//音乐播放完后自动下一曲
var ended = getPlay();
if (ended == len-1) { 
//若为最后一曲则放第一曲
musicNode.src = musicsrc[0];
lis[0].className = 'play'
lis[ended].className = '';
musicNode.load();
musicNode.play(); 
}else{ 
 
musicNode.src = musicsrc[ended + 1];
lis[ended + 1].className = 'play';
lis[ended].className = '';
musicNode.load();
musicNode.play(); }
}
function getPlay(){ 
//获取正在播放music的li
for (var i = 0; i < len; i++) { 

if (lis[i].getAttribute('class') == 'play') { 

return i
}
}
}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/182597.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年10月13日，如有侵权请联系 cloudcommunity@tencent.com 删除

https