今天闲着无事，就想写点东西。然后听了下歌，就打算写个播放器。
于是乎用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.net/182597.html原文链接：https://javaforall.net
