自己写的一个简单的音乐播放器代码可自定义样式

效果图：

需要的图片：

css部分：

#show_in{
	position:absolute;
	bottom:0px;
		left:0px;
		width: 100%;
	height: 60px;
		border: 1px solid red;
}
#playaudio{
	position:absolute;
	bottom:0px;
	left:0px;
	opacity: 0.9;
	width: 100%;
	height: 60px;
	background-color:#404040;
	border: 1px solid black;
	box-shadow: 0px 0px 10px black;
	
}
#aduioBox{
	width: 1280px;
	height: 50px;
	margin: 0px auto;

}
#list_s{
	position: absolute;
	width: 300px;
	height: 300px;
	border: 1px solid red;
	transform:translate(900px,-300px);
	background-color:#404040;
		border: 1px solid black;
	box-shadow: 0px 0px 10px black;
	z-index: -1;
}
#lis_m{
	
}
#lis_m>li{
	color: white;
	cursor: pointer;
}
#aduioPlay{
	transform: translate(50px,5px);
}
#playUP,#playNext,#playBtn,#vilumeBtn{
	background: url(../img/playbar.png) no-repeat;
	border: 0px;
	border-radius:50px;
	outline: none;
}
#playUP{
	width: 28px;
	height: 28px;

	background-position-x:-1px;
	background-position-y:-131px;
}
#playUP:hover{
	background-position-x:-32px;
	background-position-y:-131px;
}
#playNext{
	width: 28px;
	height: 28px;
	background-position-x:-80px;
	background-position-y:-131px;
}
#playNext:hover{
	background-position-x:-110px;
}
#playBtn{
	width:40px;
	height: 40px;
	
	background-position-x:2px;
	background-position-y:-202px;
}
#playBtn:hover{
	
	background-position-x:-39px;
	background-position-y:-202px;
}
#authorAndMusicName{
	position:absolute;
	transform: translate(210px,-40px);
}
#authorAndMusicName>a{
	text-decoration: none;
	color:white;
}
#authorAndMusicName>a:hover{
	text-decoration: underline;
}
#ProgressBar{
	width: 500px;
	position:absolute;
	transform: translate(200px,-20px);
}
#