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

全栈程序员-站长 • 2022年10月13日上午6:16 • 未分类 • 阅读 1

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

今天闲着无事，就想写点东西。然后听了下歌，就打算写个播放器。
于是乎用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
     	}
      }
}