网页实现一个简单的音乐播放器（大佬别看。(⊙﹏⊙)）

最新推荐文章于 2024-10-06 21:50:41 发布

置顶魔力Tow

最新推荐文章于 2024-10-06 21:50:41 发布

阅读量10w+

点赞数 294

分类专栏：前端 js html 文章标签：一个简单的音乐播放器

本文链接：https://blog.csdn.net/qq_44210563/article/details/102826406

版权

前端同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

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