h5 audio網頁底部音樂播放器代碼



98 390 131



特效描述:h5 audio網頁底部 音樂播放器,h5簡單的audio mp3音樂播放器,固定在頁面頂部音樂播放器代碼,支持移動端可拖動播放進度條。

代碼結構

1. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>

2. HTML代碼

        <div class="myaudio">
            <div class="myaudio-center">
                <audio id="aud">
                    <source src='bg.mp3' type='audio/ogg' width='300px' >
                    <source src='bg.mp3' type='audio/mpeg' width='300px' >
                    <source src='bg.mp3' type='audio/wav' width='300px' >
                    瀏覽器不支持此格式
                </audio>
                <div class="aud-btn">
                    <img src="images/play.png" id="play" />
                </div>
                <div class="aud-show">
                    <div id="Progress-time">00:00</div> 
                    <div id="Progress">
                        <span id="jin"></span><span id="yuan"></span> 
                    </div> 
                    <div id="Progress-end">00:00</div> 
                </div>
            </div>
        </div>
        <script type="text/javascript">
            //底部顯示區域總寬度
            var footerW = $('.myaudio').width();
            //中央顯示區域的寬度
            var audioW = $('.myaudio-center').width();
            //alert(footerW);
            //alert(audioW);
            $('.myaudio-center').css({'left':(footerW-audioW)/2})
            $('.aud-show').css({'width':audioW-70})
            $('#Progress').css({'width':audioW-170})
            var i=0;
            $('#play').click(function () {
                i++;
                if (i % 2 != 0) {
                    $(this).attr('src', 'images/pause.png');
                    aud_play();
                } else {
                    $(this).attr('src', 'images/play.png');
                    aud_pause()
                }
            }) 
            var music;
            var audio = document.getElementById("aud");
            function aud_play(q=0) {
                audio.currentTime = q;
                audio.play();
                music = setInterval(function () {
                    var curtime = audio.currentTime.toFixed(2);//播放進度
                    var durtime = audio.duration.toFixed(2);//播放時間
                    var str = "00:00";
                    var time = formatSeconds(curtime);
                    var time1 = str.substring(0, str.length - formatSeconds(durtime).length) + formatSeconds(durtime);
                    $('#Progress-time').html(time);
                    $('#Progress-end').html(time1);
                    $width = curtime / durtime * (audioW - 181);
                    $('#jin').css({width: $width})
                    $('#yuan').css({left: $width})
                }, 100);
            }
            function aud_pause() {
                document.getElementById("aud").pause();
                clearInterval(music);
            }
            function formatSeconds(value) {
                var theTime = parseInt(value);// 秒
                var theTime1 = 0;// 分
                var theTime2 = 0;// 小時
                if (theTime > 60) {
                    theTime1 = parseInt(theTime / 60);
                    theTime = parseInt(theTime % 60);
                    if (theTime1 > 60) {
                        theTime2 = parseInt(theTime1 / 60);
                        theTime1 = parseInt(theTime1 % 60);
                    }
                }
                var result = "" + theTime;
                result  =   (result.length==1)?'0'+result:result;
                if (theTime1 > 0) {
                    theTime1  =   (theTime1.length==1)?'0'+theTime1:theTime1;
                    result = "" + theTime1 + ":" + result;
                }
                if (theTime2 > 0) {
                    theTime2  =   (theTime2.length==1)?'0'+theTime2:theTime2;
                    result = "" + theTime2 + ":" + result;
                }
                result =   (result.length==2)?'00:'+result:result;
                return result;
            }
            var cont = $("#yuan");
            var contW = $("#yuan").width();
            var startX, sX, moveX, disX;
            var winW = $('#Progress').width();
            $("#yuan").on({//綁定事件
                touchstart: function (e) {
                    startX = e.originalEvent.targetTouches[0].pageX;    //獲取點擊點的X坐標 
                    sX = $(this).offset().left-110;//相對于當前窗口X軸的偏移量
                    leftX = startX - sX;//鼠標所能移動的最左端是當前鼠標距div左邊距的位置
                    rightX = winW - contW + leftX;//鼠標所能移動的最右端是當前窗口距離減去鼠標距div最右端位置
                },
                touchmove: function (e) {
                    //aud_pause();
                    e.preventDefault();
                    moveX = e.originalEvent.targetTouches[0].pageX;//移動過程中X軸的坐標
                    if(moveX<leftX){moveX=leftX;}                               
                    if(moveX>rightX){moveX=rightX;}
                    $(this).css({
                        "left":moveX+sX-startX,
                    });
                    $('#jin').width($(this).width()+moveX+sX-startX);
                   var w = audio.duration.toFixed(2)*($('#jin').width()/winW)
                    $('#play').attr('src', 'images/pause.png');
                    aud_play(w)
                },
                mousedown: function (ev) {
                    aud_pause()
                    var patch = parseInt($(this).css("height")) / 2;
                    var left1 = parseInt($(this).parents('.myaudio-center').css("left"));
                    $(this).mousemove(function (ev) {
                        var oEvent = ev || event;
                       // console.log(oEvent);
                        var oX = oEvent.clientX;
                        console.log(oX);
                        var l = oX - patch-left1-115;//115為$("#yuan")的起始位置到$('.myaudio-center')左邊的距離
                        console.log(l);
                        var w = $(window).width() - $(this).width();
                        console.log(w);
                        if (l < 0) {
                            l = 0
                        }
                        if (l > w) {
                            l = w
                        }
                        $(this).css({left: l})
                        $('#jin').width($(this).width()+l);
                        var w = audio.duration.toFixed(2)*($('#jin').width()/winW)
                         $('#play').attr('src', 'images/pause.png');
                         aud_play(w)
                    });
                    $(this).mouseup(function () {
                        $(this).unbind('mousemove');
                    });
                }
            });
        </script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 圖片拖動 圖片拖拽 按鈕控制 播放器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子