網頁實現一個簡單的音樂播放器（大佬別看。(⊙﹏⊙)）

Ra2bit ~發表於2020-01-13
網頁播放器

今天閒著無事，就想寫點東西。然後聽了下歌，就打算寫個播放器。
於是乎用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了
你的點贊是我最大的動力。。。萌新前進中

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
     	}
      }
}

相關文章