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



153 608 203



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

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