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"> <p>歌单</p> <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、查看效果。
