音乐播放器封装

2024-03-26 10:57:10

<!DOCTYPE >
<html>

    <head>
       

        <title>dj</title>
    </head>

    <body>

        <div class="bodyBox">
            <div class="miusic-bodyPage">
                <div class="bg"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553508024&di=e73a9f3a21b92504cdc7b0aaf398ace5&imgtype=jpg&er=1&src=http%3A%2F%2Fwww2.flightclub.cn%2Fnews%2Fuploads%2Fallimg%2F190217%2F3-1Z21G10Q5-53.jpg" class="bg"></div>
                <div class="bg"><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1860457216,2240747648&fm=11&gp=0.jpg" class="bg"></div>
                <div class="bg"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3575420470,1494367718&fm=11&gp=0.jpg"></div>
            </div>
        </div>

        <div class="minsci-dj-all">
            <div class="minsci-dj-top">
                <div class="music-x"></div>
                <div class="minsci-dj-list1">
                    <img class="minsci-dj-list-img" src="https://p.qpic.cn/music_cover/X9lmt3gQ1KkaezXF13jX3ibKylzcvf5Aap1yGxAAiaNayBeXRpapqk9Q/300?n=1"/>
                </div>
                <div class="minsci-dj-list2">
                    <div class="minsci-dj-name">名字: <span class="minsci-dj-color">7dj</span></div>
                    <div class="minsci-dj-name">歌手: <span class="minsci-dj-color">7妹</span></div>
                    <div class="minsci-dj-name">歌曲：<span class="minsci-dj-color">抖腿</span></div>
            
                    <div class="minsci-dj-name">点赞：<span class="minsci-dj-color">112赞</span></div>
                </div>
                
            </div>
            <div class="minsci-dj-min">
                <div class="music-l">
                    <div class="minsci-play-all music-play"></div>
                    <div class="minsci-no-all music-no"></div>
                </div>
                
                <div class="minsci-all-range">
                    <!--<div class="music-x-range"></div>-->
                    <div class="minsci-time"><div>总时间 <span class='music-max'></span></div></div>
                    <div class="minsci-play-jd"><input class='music-range' type="range" min=0 max=100 value=0 /></div>
                    <div class="minsci-time-r"><div>时间 <span class='music-cur'></span></div></div>
                </div>
                
                <div class="music-yname-all">
                    <div class="minsci-btnd-all music-btnd"></div>
                    <div class="minsci-btne-all music-btne"></div>
                    <div class="music-yname"><div><span class="music-voice">1</span></div></div>
                </div>
                
            </div>


            <div class="music-all" style="display: block;">
                <audio class='music-audio' controls>
                    <source src="https://api.bzqll.com/music/netease/url?key=579621905&id=526307800&br=999000" type="audio/ogg">
                    <source src="https://api.bzqll.com/music/netease/url?key=579621905&id=526307800&br=999000" type="audio/mpeg">
                </audio>
                <div class="music-animation"><span class="music-span"></span></div>
            </div>
        </div>

  
        <script type="text/javascript">
            $(document).ready(function(e) {
                $(".miusic-bodyPage").fullImages({
                    ImgWidth: 1920,
                    ImgHeight: 980,
                    autoplay: 3500,
                    fadeTime: 1500
                });

            });
        </script>

    </body>

</html>

* {
    margin: 0;
    padding: 0;
}

.music-all {
    width: 750px;
    height: 100px;
    /*border: 1px solid red;*/
    background: rgba(18, 18, 34, 0.4);
    margin: 0px auto 30px;
    position: relative;
    border-radius: 8px;
}


/* 进度条 */

.music-range {
    width: 100%;
    height: 5px;
    background: rgba(255,255,255,0.1);
    border-radius: 5px;
    -webkit-appearance: none;
    margin: 0 auto;
    cursor: pointer;
}


/* 进度滑块 */

.music-range::-webkit-slider-thumb {
    width: 15px;
    height: 15px;
    background: #2BDAFC;
    border: 1px solid #2BDAFC;
    cursor: pointer;
    border-radius: 50%;
    -webkit-appearance: none;
}


/*转动*/

.music-animation {
    width: 70px;
    height: 70px;
    background: red;
    margin: 0px auto;
    text-align: center;
    line-height: 70px;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.play-an {
    animation: dong 5s linear infinite;
}


/*.music-span{
                -webkit-animation: zd 10s linear infinite;    
            }
            
            @-webkit-keyframes zd {
                0% {
                    -webkit-transform: rotate(0deg);
                }
                25% {
                    -webkit-transform: rotate(90deg);
                }
                50% {
                    -webkit-transform: rotate(180deg);
                }
                75% {
                    -webkit-transform: rotate(270deg);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                }
            }*/

@keyframes dong {
    0% {
        background: red;
        left: 0px;
        top: 0px;
        width: 10px;
        height: 30px;
    }
    25% {
        background: yellow;
        left: 750px;
        top: 0px;
        width: 30px;
        height: 10px;
    }
    50% {
        background: blue;
        left: 750px;
        top: 100px;
        width: 10px;
        height: 30px;
    }
    75% {
        background: green;
        left: 0px;
        top: 100px;
        width: 30px;
        height: 10px;
    }
    100% {
        background: red;
        left: 0px;
        top: 0px;
        width: 10px;
        height: 30px;
    }
}


/*yinyue*/


.minsci-dj-all {
    min-width: 800px;
    min-height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(18, 18, 34, 0.4);
    border-radius: 8px;
    box-shadow: 0px 10px 50px 0px rgb(88, 65, 58);
}

.minsci-dj-top {
    width: 750px;
    min-height: 100px;
    margin: 40px auto 0;
    background: rgba(18, 18, 34, 0.4);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}


.music-x{
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    right: 16px;
    top: 16px;
    background: url(../images/x.png) no-repeat;
    background-size: 100% 100%;
    display: none;
}
.music-x:hover{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 16px;
    top: 16px;
    background: url(../images/xs.png) no-repeat;
    background-size: 100% 100%;
    animation: yzsl 2s linear infinite;
}
.minsci-dj-top:hover .music-x{
    display: block;
}

@keyframes yzsl {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}
.minsci-dj-min{
    width: 750px;
    min-height: 150px;
    margin: 10px auto ;
    background: rgba(18, 18, 34, 0.4);
    border-radius: 8px;
    position: relative;
}
.minsci-dj-list1{
    width: 200px;
    height: 200px;
    background: rgba(18, 18, 34, 0.4);
    margin: 10px;
    float: left;
    margin-left: 10px;
    border-radius: 6px;
    overflow: hidden;
}
.minsci-dj-list2{
    padding-right: 20px;
    height: 150px;
    margin-top: 10px;
    border-radius: 6px;
    background: rgba(18, 18, 34, 0.4);
    float: left;
    margin-left: 10px;
}
.minsci-dj-name{
    margin-left: 12px;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    padding-top: 10px;
}
.minsci-dj-color{
    color: rgba(255,255,255,0.3);
}
.minsci-dj-list-img{
    width: 100%;
    
}
/*2*/
.minsci-play-all{
    width: 20px;
    height: 20px;
    background: url(../images/bf.png) no-repeat ;
    background-size: 100% 100%;
    margin-top: 100px;
    margin-left: 30px;
    float: left;
}
.minsci-play-all:hover{
    background: url(../images/bfa.png) no-repeat ;
    background-size: 100% 100%;
}
.minsci-no-all{
    width: 20px;
    height: 20px;
    background: url(../images/zt.png) no-repeat ;
    background-size: 100% 100%;
    margin-top: 100px;
    margin-left: 30px;
    float: left;
}
.minsci-no-all:hover{
    background: url(../images/zta.png) no-repeat ;
    background-size: 100% 100%;
}
.minsci-play-jd{
    width: 100%;
    float: left;
    background: rgba(255,255,255,.7);
}
.minsci-btnd-all{
    width: 20px;
    height: 20px;
    background: url(../images/jsa.png) no-repeat ;
    background-size: 100% 100%;
    margin-top: 100px;
    float: right;
    margin-right: 30px;
}
.minsci-btnd-all:hover{
    background: url(../images/js.png) no-repeat ;
    background-size: 100% 100%;
}
.minsci-btne-all{
    width: 20px;
    height: 20px;
    background: url(../images/ja.png) no-repeat ;
    background-size: 100% 100%;
    margin-top: 100px;
    float: right;
    margin-right: 30px;
}
.minsci-btne-all:hover{
    background: url(../images/j.png) no-repeat ;
    background-size: 100% 100%;
}
.minsci-all-range{
    width: 700px;  
    left: 50%;
    bottom: 38px;
    position: absolute;
    transform: translate(-50% ,0%);
    transition:all 0.2s linear 0s;
}
/*.music-x-range{
    width: 20px;
    height: 20px;
    /*position: relative;*/
    right: 16px;
    top: 16px;
    background: url(../images/xs.png) no-repeat;
    background-size: 100% 100%;
}*/
.minsci-time{
    position: absolute;
    left: 0;
    top: -30px;
    color: #31c27c;
}

.minsci-time-r{
    position: absolute;
    right: 0;
    top: -30px;
    color: #31c27c;
}
.music-yname-all{
    float: right;
    position: relative;
    width: 130px;
}
.music-yname{
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50% ,0);
    text-align: center;
    color: aquamarine;
    font-size: 14px;
}
.music-yname-all,
.music-l{
    display: none;
    transition: all .6s linear;
}
.minsci-dj-min:hover .music-yname-all{
    display: block;
}
.minsci-dj-min:hover .music-l{
    display: block;
}
.minsci-dj-min:hover .minsci-all-range{
    width: 480px;
    transition:all 0.2s linear 0s;
}




html {
    margin: 0;
    padding: 0;
}

.miusic-bodyPage {
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

img.bg {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    display: none;
}

.bg img {
    width: 100%;
    height: 100%;
}

var audios = document.getElementsByClassName("music-audio")[0];
            var vol = audios.volume;
            audios.controls = false;

            $('.music-play').on('click', function() {
                audios.play();
                var duration = audios.duration;
                $('.music-max').html(timeleng(duration));
                $(".music-animation").addClass("play-an");
                $(".music-range").attr({
                    'max': duration
                });

                function timer() {
                    var t = parseInt(Math.round(audios.currentTime));
                    $(".music-range").val(t);
                    $('.music-cur').text(timeleng(t));
                    t = parseInt(audios.currentTime);
                    if(t < duration) {
                        setTimeout(timer, 1000);
                    } else {
                        clearTimeout(timer);
                    }
                }
                timer();
            });

            //停止
            $('.music-no').on('click', function() {
                audios.pause();
                $(".music-animation").removeClass("play-an");
            })
            
            audios.onended = function() {
                $(".music-animation").removeClass("play-an")
            };

            //音量大
            $('.music-btnd').click(function() {
                vol = vol > 0 ? (vol * 10 - 1) / 10 : 0;
                audios.volume = vol;
                console.log(vol)
                $(".music-voice").html(vol)
            })
            //音量小
            $('.music-btne').click(function() {
                vol = vol < 1 ? (vol * 10 + 1) / 10 : 1;
                audios.volume = vol;
                console.log(vol)
                $(".music-voice").html(vol)
            })

            //监听滑块，拖动
            $(".music-range").on('change', function() {
                audios.currentTime = this.value;
                console.log(this.value)
                $(".music-range").val(this.value);
            });

            //将秒数转为00:00格式
            function timeleng(time) {
                var m = 0,
                    s = 0,
                    ms = '00',
                    ss = '00';
                time = Math.floor(time % 3600);
                m = Math.floor(time / 60);
                s = Math.floor(time % 60);
                ss = s < 10 ? '0' + s : s + '';
                ms = m < 10 ? '0' + m : m + '';
                return ms + ":" + ss;
            }
            
            //点击关闭框1
            $(".music-x").on("click",function(){
                $(".minsci-dj-top").hide()
            })
            
       /*
 *
 * Images fullPlay
 * Author: Join Fisher
 * Version: 1.0 (1-Jun-2016)
 *
 */

(function($) {

    $.fn.fullImages = function(fisher) {

        var fisher = $.extend({
            ImgWidth: null,
            ImgHeight: null,
            autoplay: null,
            fadeTime: null
        },
        fisher)

        var count = $(this).find("img").length; 
        var nValue = 0;
        var oValue = 0;
        var _this = $(this);
       
        _this.find("img:eq(0)").fadeIn("slow");

        var setIntervalImg = setInterval(function() {

            nValue++
            if (nValue == count) {
                nValue = 0;
            }
            _this.find(" img:eq(" + (nValue) + ")").fadeIn(fisher.fadeTime);
            _this.find(" img:eq(" + (oValue) + ")").fadeOut(fisher.fadeTime);
            oValue = nValue % count;

        },
        fisher.autoplay);

        resizeFun();
        $(window).resize(function(e) {
            resizeFun();
        });

        function resizeFun() {

            /*轮播图全屏*/
            var imgH = fisher.ImgHeight;
            var imgW = fisher.ImgWidth;
            var hValue = imgH / imgW;
            var wValue = imgW / imgH;

            if ($(window).width() / $(window).height() < wValue) {

                _this.find("img").css("width", $(window).height() * wValue);
                _this.find("img").css("margin-left", -(($(window).height() * wValue) - $(window).width()) / 2);
                _this.find("img").css("height", $(window).height());

            } else {

                _this.find("img").css("width", $(window).width());
                _this.find("img").css("margin-left", 0);
                _this.find("img").css("height", $(window).width() * hValue);

            }

        }

    };

} (jQuery));

码农公寓

相关文章