admin管理员组文章数量:1568304
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。
于是乎用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/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://www.elefans.com/dianzi/1725774056a1041725.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论