特效描述:H5带歌词滚动 手机音乐播放器。# 实现功能 1. 移动端布局自适应。 2. 歌曲列表点播。 3. 上一首,下一首,可设置是否循环播放。 4. 暂停,快进,快退功能。 5. 海报旋转功能。 6. 进度条拖拽功能。 7. 歌词滚动,高亮同步。 # 技术要点 1. Html5 Audio 属性和方法。 2. Json 数据处理。 3. Ajax 数据请求。 4. Js字符串处理方法,正则表达式。 5. JQ动画及jquery.rotate旋转动画插件 6. Js基础知识运用
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/mobile.css"> <link rel="stylesheet" href="audio/css/audio_player.css">
2. 引入JS
<script src="js/jquery.min.js"></script> <script src="audio/js/jquery.rotate.min.js"></script> <script src="audio/js/audio_player.js"></script>
3. HTML代码
<div class="bg_white mb_20 pb_20 pad30"> <div class="box_radio"> <div class="book_title"> <div class="audio_title"> </div> </div> <div class="audio_box"> <!--音乐控制面板--> <div class="audio_btn"> <!--快退--> <img class="btn_fr" src="audio/img/btn_fr.png" alt=""> <!--旋转碟片--> <div class="cover" id="play"></div> <!--暂停/播放按钮--> <div class="btn_play btn_pause"></div> <!--快进--> <img class="btn_ff" src="audio/img/btn_ff.png" alt=""> </div> <div class="music-nav"> <!--当前时间--> <div class="time" id="time_cur"> </div> <!--进度条--> <div class="audio_progress"> <span class="audio_line"></span> <span class="audio_blue"></span> <span class="audio_dot"></span> <input type="range" min="0" max="0" step="0.4" value="0" id="scale" > </div> <!--歌曲时长--> <div class="time" id="time_long"></div> </div> <audio id="music" src="" > Your browser does not support HTML5 audio. </audio> </div> </div> </div> <div class="bg_white mb_20 pb_20 pad30"> <div class="des_title"> </div> <div class="des_sub_title"> <span class="green_line"></span> 歌词 </div> <div class="des_info lyric_wrap" > <ul id="lyric_list"> </ul> </div> <div class="des_sub_title"> <span class="green_line"></span> 歌手 </div> <div class="des_info" id="singer"></div> </div> <!--底部导航--> <div class="height100"></div> <ul class="tabbar"> <img class="btn_up" src="images/btn_up.png" alt=""> <div class="pupbox"> <img class="btn_down" src="images/btn_down.png" alt=""> <!--歌曲列表--> <ul class="song_list"> </ul> </div> <li> <div class="btn_prev"> <span>上一首</span> </div> </li> <li> <div class="btn_next"> <span>下一首</span> </div> </li> </ul> <!--旋转动画插件--> <!--音频播放器--> <script> $(function () { var $pupbox = $(".pupbox"), $btnUp = $(".btn_up"), $btnDown = $(".btn_down"); $pupbox.hide(); $btnUp.show(); /*弹窗*/ $btnDown.click(function(){ $pupbox.slideUp(500); $btnUp.delay(500).show(0) }); $btnUp.click(function(){ $pupbox.slideDown(500); $(this).hide(0) }); }); </script>