H5帶歌詞滾動的手機音樂播放器代碼



159 635 212



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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表