特效描述：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>
