h5 audio网页底部音乐播放器代码



95 376 126



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

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