JS写一个漂亮的音乐播放器

先放上效果图：

正如图中所展示的播放器那样，我们用HTML+CSS+JS将这个效果实现出来。
HTML页面布局

		

			

		
		

			
大咖解读青春期包皮手术
			00:0000:00
			

				

			
			

				

					

					

					

				
				

					


					

				
				
				
			
		
		

		

			

				

					
				
				喜欢
			
			

				

					
				
				收藏
			
		
		

			

			

		
	

将自己想要的样式和按钮统统展示到前端页面上来，然后就是添加样式：

.music{  width: 100%;  border-right: 1px solid rgba(255,255,255,0.5);  box-sizing: border-box; }
.photo{  width: 30%;float:left;}
.photo_pic{ border-radius: 50%;  /* box-shadow:0 0 2px #666, 0 0 10px #666;position: relative;*/ }
.photo_pic img{/*border-radius: 100%*/}
.choose{  height:150px;  }
.choose_obj{  width: 50%;  float: left;  text-align: center;  color: #fff  }
.icon{  margin-top: 40px;  height: 50px;  font-size:50px;  line-height: 50px;  font-family: "iconfont";  cursor: pointer;  text-shadow: 2px 2px 0px #666;  }
.icon.yellow+span{  color: yellow;  }
.icon.pink+span{  color: #f7759f;  }
.choose_obj span{  display: block;  height: 30px;  line-height: 30px;  font-family: "微软雅黑";  font-size: 14px;  }
.cd{display: none;  width: 10px;  height: 10px;  position: absolute;  top:50%;  left: 50%;  margin-top: -15px;  margin-left: -15px;  background: #666;  border: 10px solid #fff;  box-shadow: 0 0 1px #000;  border-radius: 50%;  }
.progress{width: 67%; float:right;  font-family: "iconfont";margin-right: 1%; }
.progress h3{font-size:2rem;}
.lyric{  width: 100%;  }
time{  font-size: 12px;  width: 49px;  text-align: center;  color: #000000;  height: 25px;  line-height: 25px;  float: left;  }
.progress_bar{  position: relative;  width:99%;height: 2px;  margin-top: 5px;  background-color: #000000;cursor: pointer;  }
.progress_cube{  position: absolute;  left: 0;  top: -5px;  width: 4px;  height: 4px;  background-color: #fff;  border:5px solid #064895;  border-radius: 50%;  cursor: pointer;  }
.progress_obj{  line-height: 30px;  color: #000000;font-weight: bold; margin-top:5px;}
.ctrl_btn{  width: 40%;  float: left;  }

.ctrl_btn .btn{  color:black;width: 33.3%;float: left;  text-align: center;  cursor: pointer;  }
.play_btn{  font-size:18px;}
.prev_btn{font-size:12px;}
.next_btn{font-size:12px;}
.ctrl_info{  width:55%;  float: left;  }
.vol{  width:76%;height: 100%;  float: left;margin-left: 4%; color:black;}
.vol_bar{  position: relative;  width:68%;  float: right;  height: 2px;  background-color:#000000;  margin-top: 13px;margin-right:10%; }
.vol_cube{  position: absolute;  left: 0;  top: -4px;  width: 3px;  height: 3px;  background-color: #fff;  border:4px solid #064895;  border-radius: 50%;  cursor: pointer;  }
.list{ width: 20%; height: 100%;  float: left;  text-align: center;  }
.lyric_tit{  color: #f00;  text-align: center;  font-weight: 700;  margin-top: 3px;  }
.lyric_con{  position: relative;  line-height: 26px;  color: #555;  font-size: 14px;  padding: 0px 50px ;  text-align: center;  height: 150px;  overflow: hidden;  margin-top: 15px;  }
#lyric_txt{   left: 0;  top:0;  width: 100%;  }
.lyric_con p.played{  color: #999;  }
.lyric_con p.active{  color: #064895;  font-size: 20px;  font-weight: 700;  }
.audio{  display: none;  }
#list{  position: relative;  cursor: pointer;  }
#list_con{  position: absolute;  bottom: 30px;  right: 0px;  width: 150px;  height: 100px;  color: #666;  padding: 10px 0;  border-radius: 5px;  background: rgba(255,255,255,.8);  font-family: "微软雅黑";  font-size: 14px;  cursor: pointer;  display: none;  }
.anniu{margin: 0rem auto;}
.audio_rmtj{margin: 1.3rem auto;}
.audio_tag{width: 93%; margin: 1.3rem auto;}
.audio_tag li{float:left;width: 22.4%; margin: 1%; background: #f5f5f5; border-radius: 0.3rem;border:1px solid #e8e7e7;text-align: center;font-size: 1.8rem;color:#333; line-height: 210%;display: inline }
.audio_tag li a{display: block}

样式不是死的，所以可以灵活改变。
接下来是JS内容，JS要实现的是播放功能，以及拖动播放条功能，还有快进后退功能，再加上分享功能，歌词跟随播放功能

在这个示例中，JS库基于jq就行。功能设置在JS中一清二楚，所以按着功能一步一步来还是很容易上手的。