JS写一个漂亮的音乐播放器
先放上效果图：
正如图中所展示的播放器那样，我们用HTML+CSS+JS将这个效果实现出来。
HTML页面布局
![]()
大咖解读青春期包皮手术
将自己想要的样式和按钮统统展示到前端页面上来，然后就是添加样式：
.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中一清二楚，所以按着功能一步一步来还是很容易上手的。