H5带歌词滚动的手机音乐播放器代码



210 839 280



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



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 拖动 自动滚动图片轮播 滑动星星打分 旋转翻转 切换按钮 表单 其他 图片拖动 旋转木马 文字滚动 按钮控制 播放器

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到