html5+css3+jq实现音乐播放器播放特效
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。
<body style="height: 999px">
<div class="audio-box">
<div class="audio-container">
<div class="audio-view">
<div class="audio-cover" ></div>
<div class="audio-body">
<h3 class="audio-title">未知歌曲</h3>
<div class="audio-backs">
<div class="audio-this-time">00:00</div>
<div class="audio-count-time">00:00</div>
<div class="audio-setbacks">
<i class="audio-this-setbacks">
<span class="audio-backs-btn"></span>
</i>
<span class="audio-cache-setbacks">
</span>
</div>
</div>
</div>
<div class="audio-btn">
<div class="audio-select">
<div class="audio-prev"></div>
<div class="audio-play"></div>
<div class="audio-next"></div>
<div class="audio-menu"></div>
<div class="audio-volume"></div>
</div>
<div class="audio-set-volume">
<div class="volume-box">
<i><span></span></i>
</div>
</div>
<div class="audio-list">
<div class="audio-list-head">
歌单
<span class="menu-close">关闭</span>
</div>
<ul class="audio-inline">
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
4、书写css代码。
* { margin: 0; padding: 0; }
body { font-family: "微软雅黑"; }
ul li { list-style-type: none; }
.audio-box { position: fixed; width: 100%; bottom: 0; left: 0; background-color: #000; background-color: rgba(0,0,0,1); color: #fff; }
.audio-container { width: 1000px; margin: auto; }
.audio-view { position: relative; padding-left: 100px; padding-right: 180px; height: 100px; }
.audio-cover { width: 100px; height: 100px; overflow: hidden; position: absolute; left: 0; top: 0; background-size: auto 100%; background-repeat: no-repeat; background-position: center center; background-color: #000; }
.audio-cover img { display: block; height: 100%; margin: auto; }
.audio-body { padding: 0 10px; }
.audio-title { font-weight: 400; font-size: 20px; line-height: 40px; overflow: hidden; }
.audio-backs { position: relative; padding-left: 60px; padding-right: 60px; margin-top: 10px; height: 20px; }
.audio-this-time, .audio-count-time { position: absolute; top: 0; width: 60px; font-size: 16px; height: 20px; line-height: 20px; }
.audio-this-time { left: 0; }
.audio-count-time { right: 0; text-align: right; }
.audio-setbacks { height: 6px; border-radius: 3px; background-color: #333; }
.audio-setbacks { position: relative; top: 50%; }
.audio-cache-setbacks, .audio-this-setbacks { height: 100%; position: absolute; left: 0; top: 0; border-radius: 3px; }
.audio-cache-setbacks { background-color: #535353; z-index: 1; cursor: pointer; }
.audio-this-setbacks { background-color: #c70c0c; z-index: 2; }
.audio-backs-btn { position: absolute; width: 14px; height: 14px; margin-top: -7px; top: 50%; right: -7px; background-color: #fff; border-radius: 50%; cursor: pointer; }
.audio-btn { position: absolute; width: 150px; height: 100px; right: 0; top: 0; }
.audio-select { height: 20px; margin-top: 50px; width: 150px; float: right; }
.audio-select > div { width: 20px; height: 20px; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; float: left; cursor: pointer; }
.audio-select > div + div { margin-left: 10px; }
.audio-prev { background-image: url('../images/prev.png'); }
.audio-next { background-image: url('../images/next.png'); }
.audio-play { background-image: url('../images/play.png'); }
.audio-stop { background-image: url('../images/pause.png'); }
.audio-menu { background-image: url('../images/menu.png'); }
.audio-volume { background-image: url('../images/volume.png'); }
.audio-list { position: absolute; right: 0; color: #000; background-color: #fff; bottom: 100px; border: 1px solid #ccc; width: 240px; border-radius: 5px; padding-top: 10px; display: none; }
.audio-list-head { position: relative; padding-bottom: 10px; }
.audio-list-head p { padding-left: 8px; font-size: 18px; }
.audio-list-head span { position: absolute; right: 8px; top: 0; font-size: 12px; display: block; width: 35px; line-height: 25px; border: 1px solid #ccc; border-radius: 3px; text-align: center; cursor: pointer; }
.audio-inline { height: 165px; overflow-y: scroll; }
.audio-inline li { font-size: 16px; line-height: 2; padding-left: 8px; padding-right: 8px; border-top: 1px solid #ccc; }
.audio-inline a { font-size: inherit; color: inherit; text-decoration: none; height: 32px; overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.menu-show, .audio-show-volume { display: block !important; }
.audio-set-volume { background-color: #000; background-color: rgba(0,0,0,0.5); position: absolute; bottom: 100px; width: 30px; height: 120px; right: 5px; z-index: 999; display: none; }
.volume-box { width: 5px; margin: auto; display: block; position: relative; background-color: #000; border-radius: 2.5px; height: 100px; bottom: -10px; }
.volume-box span { display: block; width: 11px; height: 11px; position: absolute; background-color: #fff; border-radius: 50%; margin-left: -5.5px; margin-top: -5.5px; left: 50%; cursor: pointer; }
.volume-box i { position: absolute; width: 100%; border-radius: 2.5px; background-color: #c70c0c; height: 0; display: block; bottom: 0; }
5、书写并添加js代码。
<script src="js/jquery.min.js"></script>
<script src="js/audio.js"></script>
<script>
$(function(){
var song = [
{
'cover' : '歌曲封面图',
'src' : '歌曲链接地址',
'title' : '歌曲名'
},
{
'cover' : '歌曲封面图',
'src' : '歌曲链接地址',
'title' : '歌曲名'
},
{
'cover' : '歌曲封面图',
'src' : '歌曲链接地址',
'title' : '歌曲名'
},
{
'cover' : '歌曲封面图',
'src' : '歌曲链接地址',
'title' : '歌曲名'
},
{
'cover' : '歌曲封面图',
'src' : '歌曲链接地址',
'title' : '歌曲名'
}
];
var audioFn = audioPlay({
song : song,
autoPlay : true
});
audioFn.newSong({
'cover' : 'images/cover5.jpg',
'src' : 'http://webmp3-1253691995.costj.myqcloud.com/audio/baab.mp3',
'title' : 'B.A.A.B'
},false);
});
</script>
6、书写audio.js代码。
7、代码整体结构。
8、查看效果。
