当前位置：首页 > 网页特效 > 音频和视频

HTML5网页底部音乐播放器代码

分类：音频和视频日期：2024-05-14 点击(6) 评论(0)

HTML5网页底部音乐播放器代码

简介

##### 代码结构

------------

1. 引入JS
```javascript
<script src="js/jquery-1.8.3.min.js"></script>
```
2. HTML代码
```javascript
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
```

web299.com

HTML5网页底部音乐播放器代码

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果