侧边栏壁纸
博主昵称
漂亮的html5音乐播放器代码 - 难说博客

效果图请看上图,改代码请自行整合,非常漂亮的带列表音乐播放器,歌手图片自旋转效果,跟某些平台的随身听差不多,很好看的音乐播放器效果,喜欢的可以自己试试。本代码需要jquery-1...

漂亮的html5音乐播放器代码

HaoOuBa
2020年5月12日 19:11 星期二 / 4 评论 / 263 阅读

音乐播放器

效果图请看上图,改代码请自行整合,非常漂亮的带列表音乐播放器,歌手图片自旋转效果,跟某些平台的随身听差不多,很好看的音乐播放器效果,喜欢的可以自己试试。本代码需要jquery-1.7.2.min.js支持,请自行下载

HTML代码:

<div id="douban" style="margin:auto">
<div class="grid-music-container f-usn">
    <div class="m-music-play-wrap">
        <div class="u-cover"></div>
        <div class="m-now-info">
            <h1 class="u-music-title"><strong>标题</strong><small>歌手</small></h1>
            <div class="m-now-controls">
                <div class="u-control u-process">
                    <span class="buffer-process"></span>
                    <span class="current-process"></span>
                </div>
                <div class="u-control u-time">00:00/00:00</div>
                <div class="u-control u-volume">
                    <div class="volume-process" data-volume="0.50">
                        <span class="volume-current"></span>
                        <span class="volume-bar"></span>
                        <span class="volume-event"></span>
                    </div>
                    <a class="volume-control"></a>
                </div>
            </div>
            <div class="m-play-controls">
                <a class="u-play-btn prev" title="上一曲"></a>
                <a class="u-play-btn ctrl-play play" title="暂停"></a>
                <a class="u-play-btn next" title="下一曲"></a>
                <a class="u-play-btn mode mode-list current" title="列表循环"></a>
                <a class="u-play-btn mode mode-random" title="随机播放"></a>
                <a class="u-play-btn mode mode-single" title="单曲循环"></a>
            </div>
        </div>
    </div>
    <div class="f-cb">&nbsp;</div>
    <div class="m-music-list-wrap"></div>
</div>
<script>
var musicList = [
    {
        title : '测试歌曲1',
        singer : 'www.su1018.cn',
        cover  : 'http://www.su1018.cn/content/uploadfile/202004/thum-46e21587468353.jpg',
        src    : 'https://img.su1018.cn/%E9%9F%B3%E4%B9%90/%E5%8C%85%E5%AD%90-%E6%A1%A5%E8%BE%B9%E5%A7%91%E5%A8%98.mp3'
    },
    {
        title : '测试歌曲2',
        singer : 'www.su1018.cn',
        cover  : 'http://solog.sc2yun.com/content/uploadfile/201912/thum-b7801575464643.png',
        src    : 'https://img.su1018.cn/%E9%9F%B3%E4%B9%90/%E5%8C%85%E5%AD%90-%E6%A1%A5%E8%BE%B9%E5%A7%91%E5%A8%98.mp3'
    },  
    {
        title : '测试歌曲3',
        singer : 'www.su1018.cn',
        cover  : 'http://solog.sc2yun.com/content/uploadfile/201912/thum-b7801575464643.png',
        src    : 'https://img.su1018.cn/%E9%9F%B3%E4%B9%90/%E5%8C%85%E5%AD%90-%E6%A1%A5%E8%BE%B9%E5%A7%91%E5%A8%98.mp3'
    },
    {
        title : '测试歌曲4',
        singer : 'www.su1018.cn',
        cover  : 'http://solog.sc2yun.com/content/uploadfile/201912/thum-b7801575464643.png',
        src    : 'https://img.su1018.cn/%E9%9F%B3%E4%B9%90/%E5%8C%85%E5%AD%90-%E6%A1%A5%E8%BE%B9%E5%A7%91%E5%A8%98.mp3'
    }
];
new SMusic({
    musicList:musicList
});
</script>
</div>

CSS代码

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);word-wrap: break-word;font-size: inherit;line-height: inherit;overflow: visible;}
header,footer,section,article,aside,nav,address,figure,figcaption,menu,details{display:block;}
.f-cb{height: 0;}
.f-cb:after{display:block;content:" ";height:0;visibility:hidden;clear: both;}
.f-ib{display:inline-block;}
.f-din{display:inline;}
.f-dn{display:none;}
.f-db{display:block;}
.f-fl{float:left;}
.f-fr{float:right;}
.f-fwn{font-weight:normal;}
.f-fwb{font-weight:bold;}
.f-tal{text-align:left;}
.f-tac{text-align:center;}
.f-tar{text-align:right;}
.f-oh{overflow: hidden;zoom: 1;clear: both;}
.f-tdn{text-decoration: none!important;}
.f-vam,.f-vama *{vertical-align:middle;}
.f-wsn{word-wrap:normal;white-space:nowrap;}
.f-pre{overflow:hidden;text-align:left;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;}
.f-wwb{white-space:normal;word-wrap:break-word;word-break:break-all;}
.f-ti{overflow:hidden;text-indent:-30000px;}
.f-lhn{line-height:normal;}
.f-toe{overflow:hidden;word-wrap:normal!important;white-space:nowrap;text-overflow:ellipsis;}
.f-usn{-webkit-user-select:none;user-select:none;}
.f-bsb{-webkit-box-sizing:border-box;box-sizing:border-box;}
.f-cp{cursor: pointer}

/*滚动条美化*/
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-button:vertical{display:none}
::-webkit-scrollbar-track:vertical{background-color:transparent;}
::-webkit-scrollbar-track-piece{background-color:transparent;}
::-webkit-scrollbar-thumb:vertical{background-color:#3792ef;border-radius:6px}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:vertical:active {background-color: #2e86ef}

html,body{
    width: 100%;
    height: 100%;
    background-color: #3792ef;
    overflow: hidden;
    font-family: "Microsoft Yahei","微软雅黑","Helvetica Neue","Hiragino Sans GB",Helvetica,Tahoma,sans-serif;
}

/*SMusic*/
/*播放器整体-----------------------------------------------------------------------------*/
.grid-music-container{
    -webkit-box-shadow:#666 0px 0px 10px; 
    border:solid 1px #CECFD4;
    border-radius:8px;
    width: 710px;
    height: 110px;
    padding: 20px;
    position: absolute;
    top:550px;
    left: 43%;
    margin-top: -108px;
    margin-left: -280px;
    background-color: rgba(255,255,255,0.3);
    font-family: "Microsoft Yahei","微软雅黑","Helvetica Neue","Hiragino Sans GB",Helvetica,Tahoma,sans-serif;
    text-shadow: 1px 0 0 rgba(255,255,255,.7);
}

.grid-music-container .m-music-play-wrap{
    height: 150px;
    width:200px
    position: relative;
    padding-left: 140px;
}
.grid-music-container .u-cover{
    width: 121px;
    height: 121px;
    overflow: hidden;
    background: url(https://img.su1018.cn/%E9%9F%B3%E4%B9%90/music_icons.png) 0 0 no-repeat;
    position: absolute;
    top:13px;
    left: 13px;
}
.grid-music-container .u-cover img{
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    border-radius: 50%;
}
/*播放转动*/
.grid-music-container .u-cover.play{
    -webkit-animation: Circle 10s linear infinite 0s forwards;
    animation: Circle 10s linear infinite 0s forwards;

}

.grid-music-container .u-cover.paused{
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}
@-webkit-keyframes Circle {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
@keyframes Circle {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
/*播放列表-----------------------------------------------------------------------------------------------------------------*/
.grid-music-container .m-now-info{
    width:360px;
    -webkit-box-shadow:#666 0px 0px 10px;
     border-radius:8px;
     border: 1px solid #CECFD4;
}

/*播放标题*/
.grid-music-container .m-now-info h1{
    font-weight: normal;

}
.grid-music-container .m-now-info h1 strong{
    font-size: 30px;
    color: #111210;
    font-weight: normal;

}
.grid-music-container .m-now-info h1 small{
    margin-left: 20px;
    font-size: 14px;
    color: #313230;

}
.grid-music-container .m-now-controls{
    padding-top:10px;
    position: relative;

}
.grid-music-container .m-now-controls .u-control{
    display: inline-block;
    vertical-align:middle;
    font-size: 0;
    overflow: hidden; 

}
/*进度条*/
.grid-music-container .m-now-controls .u-process{
    width: 220px;
    height: 4px;    
    position: relative;
    background-color: #cecfd4;
}
.grid-music-container .m-now-controls .u-process .buffer-process,.grid-music-container .m-now-controls .u-process .current-process{
    display: block;
    width: 0;
    height: 4px;
    position: absolute;
    top:0;
    left: 0;
    background-color: #3792ef;
    z-index: 1;
}
.grid-music-container .m-now-controls .u-process .buffer-process{
    z-index: 0;
    background-color: #c1c2c0;
}
.grid-music-container .m-now-controls .u-time{
    margin-left: 10px;
    font-size: 12px;
    color: #585957;
}
.grid-music-container .m-now-controls .u-volume{
    overflow: visible;
    text-align: center;
    position: relative;
    margin-left: 20px;
}
.grid-music-container .u-volume .volume-process{
    width: 3px;
    height: 50px;
    background: #cecfd4;
    position: absolute;
    top: -54px;
    left: 6px;
    cursor: pointer;
    visibility: hidden; /*设置不可见性,最好不要使用display:none,不然高度很难获取*/
}
.grid-music-container .u-volume .volume-process.show{
    visibility: visible;
}
.grid-music-container .u-volume .volume-process .volume-current,
.grid-music-container .u-volume .volume-process .volume-event{
    display: inline-block;
    width: 3px;
    height: 50%;
    background-color: #3792ef;
    position: absolute;
    left: 0;
    bottom:0;
    -webkit-transition: height .2s linear;
    transition: height .2s linear;
}
.grid-music-container .u-volume .volume-process .volume-event{
    width: 21px;
    left: -10px;
    background: none;
    height: 100%;
    z-index: 1;
}
.grid-music-container .u-volume .volume-process .volume-bar{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: #fff;
    border: 1px solid #a8a9a7;
    position: absolute;
    left: -3px;
    bottom: 50%;
    -webkit-transition: bottom .2s linear;
    transition: bottom .2s linear;
   /* z-index: 2;*/
   /* opacity: 0;*/
}
.grid-music-container .u-volume .volume-process .volume-bar:hover,
.grid-music-container .u-volume .volume-process .volume-bar:active{
    background-color: #f1f2f0;
}
.grid-music-container .u-volume .volume-control{
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url(https://img.su1018.cn/%E9%9F%B3%E4%B9%90/music_icons.png) -140px -80px no-repeat;
    cursor: pointer;
}
.grid-music-container .u-volume .volume-control:hover{
    background-position: -158px -80px;
}
.grid-music-container .u-volume .volume-control.muted{
    background-position: -140px -98px;
}
.grid-music-container .u-volume .volume-control.muted:hover{
    background-position: -158px -98px;
}
/*歌曲播放列表***************************************************************/
.grid-music-container .m-music-list-wrap{
    -webkit-box-shadow:#666 0px 0px 10px;
     border-radius:8px;
     border: 1px solid #CECFD4;
    margin-left: 515px;
    margin-right: 25px;
    margin-top:-150px;
    height: 111px;
    width:200px;
    overflow:hidden;
    overflow-x: hidden;
    overflow-y: auto;

}
.grid-music-container .m-music-list-wrap ul{}
.grid-music-container .m-music-list-wrap li{
    display: block;
    line-height: 30px;
    padding: 0 10px;
    cursor: pointer;
    color: #383937;
    font-size: 14px;
}
.grid-music-container .m-music-list-wrap li strong{
    font-size: 16px;
    font-weight: normal;
}
.grid-music-container .m-music-list-wrap li:hover,.grid-music-container .m-music-list-wrap li.current{
    background-color: rgba(255,255,255,.7);
    color: #3792ef;
}
.grid-music-container .m-music-list-wrap li.current{
    background-color: transparent;
}
.grid-music-container .m-play-controls{
    margin-top: 10px;
    position:relative;
    top:-7px;
}
.grid-music-container .m-play-controls a{
    display: inline-block;
    vertical-align: middle;
}
.grid-music-container .m-play-controls .u-play-btn{
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 15px;
    cursor: pointer;
}
.u-play-btn{
    background: url(https://img.su1018.cn/%E9%9F%B3%E4%B9%90/music_icons.png) -220px 0 no-repeat;
}
.u-play-btn.prev,.u-play-btn.next{
    background-position: -220px 0;
}
.u-play-btn.prev:hover,.u-play-btn.next:hover{
    background-position: -220px -36px;
}
.u-play-btn.prev{
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
/*播放暂停*/
.u-play-btn.play{
    background-position: -250px 0;
}
.u-play-btn.play:hover{
    background-position: -250px -36px;
}
.u-play-btn.paused{
    background-position: -280px 0;
}
.u-play-btn.paused:hover{
    background-position: -280px -36px;
}
.u-play-btn.mode{
    width: 20px!important;
    height: 18px!important;
    margin-right: 10px!important;
}
.u-play-btn.mode-list{
    background-position: -181px -98px;
    margin-left: 65px;
}
.u-play-btn.mode-list.current{
    background-position: -221px -98px;
}
.u-play-btn.mode-random{
    background-position: -201px -80px;
}
.u-play-btn.mode-random.current{
    background-position: -241px -80px;
}
.u-play-btn.mode-single{
    background-position: -181px -80px;
}
.u-play-btn.mode-single.current{
    background-position: -221px -80px;
}
body {
    text-align      : center;
    font-family     : "Roboto",Arial;
    background      : #EBEBEB;
}
.knoxlogo {
    height          : 100px;
}
.btn {
    background        : #0090FF;
    border-radius     : 5px; 
    border            : 0;
    color             : #FFF;
    cursor            : pointer;
    display           : inline-block;  
    font-size         : 12px;
    height            : 40px;
    line-height       : 40px;
    min-width         : 110px; 
    padding           : 0 10px 0 75px;
    text-align        : left;
    text-decoration   : none;
    text-transform    : uppercase; 
    border            : 2px solid #0090FF;
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true)";zoom:1;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ff123852,Positive=true);

  -moz-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.2);
  box-shadow:0px 2px 2px rgba(0,0,0,0.2);
  -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=2,Color=#33000000,Positive=true);
}
.btn span {

    background        : #fff url('crowne_icon.png') 8px no-repeat;
   position: absolute;
   left: 0;
   width: 60px;
    -webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.btn:active
{
    top: 2px;
    border-bottom: 2px solid #0090FF;
    -moz-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:0px 1px 0px rgba(255,255,255,0.5);
box-shadow:0px 1px 0px rgba(255,255,255,0.5);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#ccffffff,Positive=true);
}

/**************************
 ***** HINT STYLING *******
 **************************/

.hint { position: relative; display: inline-block; }

.hint:before, .hint:after {
            position: absolute;
            opacity: 0;
            z-index: 1000000;
            -webkit-transition: 0.3s ease;
            -moz-transition: 0.3s ease;
  pointer-events: none;
}       
.hint:hover:before, .hint:hover:after {
    opacity: 1;
}
.hint:before {
    content: '';
    position: absolute;
    background: transparent;
    border: 6px solid transparent;
    position: absolute;
}   
.hint:after {
    content: attr(data-hint);
    background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 10px;
            font-size: 12px;
    white-space: nowrap;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}

/* top */

.hint-top:before {
    bottom: 100%;
    left: 50%;
    margin: 0 0 -18px 0;
    border-top-color: rgba(0, 0, 0, 0.8);
}       
.hint-top:after {
    bottom: 100%;
    left: 50%;
    margin: 0 0 -6px -10px;
}
.hint-top:hover:before {
    margin-bottom: -10px;
}
.hint-top:hover:after {
    margin-bottom: 2px;
}

/* default: bottom */

.hint-bottom:before {
    top: 100%;
    left: 50%;
    margin: -14px 0 0 0;
    border-bottom-color: rgba(0, 0, 0, 0.8);
}   
.hint-bottom:after {
    top: 100%;
    left: 50%;
    margin: -2px 0 0 -10px;
}
.hint-bottom:hover:before {
    margin-top: -6px;
}
.hint-bottom:hover:after {
    margin-top: 6px;
}

/* right */

.hint-right:before {
    left: 100%;
    bottom: 50%;
    margin: 0 0 -4px -8px;
    border-right-color: rgba(0,0,0,0.8);
}       
.hint-right:after {
    left: 100%;
    bottom: 50%;
    margin: 0 0 -13px 4px;
}
.hint-right:hover:before {
    margin: 0 0 -4px -0;
}
.hint-right:hover:after {
    margin: 0 0 -13px 12px;
}

JS代码

!
function(a) {
    function b(a, b) {
        0 == c(a, b) && (a.className += " " + b)
    }
    function c(a, b) {
        return !! a.className.match(new RegExp("(\\s|^)" + b + "(\\s|$)"))
    }
    function d(a, b) {
        var d = a.className;
        c(a, b) && (d = d.replace(new RegExp("(\\s|^)" + b + "(\\s|$)"), " "), d = d.replace(/(^\s*)|(\s*$)/g, ""), a.className = d)
    }
    function e(a, e) {
        c(a, e) ? d(a, e) : b(a, e)
    }
    function f(a) {
        return document.querySelector(a)
    }
    function g(a, b) {
        for (var c in b) b.hasOwnProperty(c) && (a[c] = b[c]);
        return a
    }
    function h(a) {
        var b, c, d, e = "";
        return b = String(parseInt(a / 3600, 10)),
        c = String(parseInt(a % 3600 / 60, 10)),
        d = String(parseInt(a % 60, 10)),
        "0" != b && (1 == b.length && (b = "0" + b), e += b + ":"),
        1 == c.length && (c = "0" + c),
        e += c + ":",
        1 == d.length && (d = "0" + d),
        e += d
    }
    function j(a) {
        var b = this.config;
        this.config = g(b, a),
        this.musicList = this.config.musicList || [],
        this.musicLength = this.musicList.length,
        this.musicLength && f("body") || (this.musicDom.listWrap.innerHTML = "<p>\u6682\u65e0\u64ad\u653e\u8bb0\u5f55...</p>"),
        this.audioDom = null,
        this.init()
    }
    var i = null;
    j.prototype = {
        config: {
            musicList: [],
            defaultVolume: .7,
            defaultIndex: 0
        },
        createListDom: function() {
            var a = 0,
            b = "<ul>";
            for (a; a < this.musicLength; a++) b += '<li class="f-toe"><strong>' + this.musicList[a].title + "</strong> -- <small>" + this.musicList[a].singer + "</small></li>";
            b += "</ul>",
            this.musicDom.listWrap.innerHTML = b
        },
        setBuffer: function(a, b) {
            var c = b.parentNode.offsetWidth;
            i = setInterval(function() {
                var d = a.buffered.length;
                if (d > 0 && void 0 != a.buffered) {
                    var e = a.buffered.end(d - 1) / a.duration * c;
                    b.style.width = e + "px",
                    Math.abs(a.duration - a.buffered.end(d - 1)) < 1 && (b.style.width = c + "px", clearInterval(i))
                }
            },
            1e3)
        },
        resetPlayer: function(a) {
            a >= this.musicLength - 1 && (a = this.musicLength - 1),
            0 >= a && (a = 0),
            this.currentMusic = a;
            var c = this.musicList[a],
            e = this,
            f = function() {
                return e.setBuffer(this, e.musicDom.bufferProcess)
            };
            this.audioDom.removeEventListener("canplay", f, !1),
            clearInterval(i),
            this.musicDom.bufferProcess.style.width = "0px",
            this.musicDom.curProcess.style.width = "0px",
            this.audioDom.src = c.src,
            this.musicDom.cover.innerHTML = '<img src="' + c.cover + '" title="' + c.title + " -- " + c.singer + '">',
            this.musicDom.title.innerHTML = "<strong>" + c.title + "</strong><small>" + c.singer + "</small>";
            var g = document.querySelectorAll(".m-music-list-wrap li"),
            h = 0;
            for (h; h < this.musicLength; h++) h == a ? b(g[h], "current") : d(g[h], "current");
            this.audioDom.addEventListener("canplay", f, !1),
            this.play()
        },
        setVolume: function(a) {
            var c = this.musicDom.volume,
            e = c.volumeEventer.offsetHeight || 50;
            0 >= a && (a = 0),
            a >= 1 && (a = 1),
            this.audioDom.volume = a;
            var f = e * a;
            c.volumeCurrent.style.height = f + "px",
            c.volumeCtrlBar.style.bottom = f + "px",
            c.volumeProcess.setAttribute("data-volume", a),
            0 == a ? (b(c.volumeControl, "muted"), this.audioDom.muted = !0) : (d(c.volumeControl, "muted"), this.audioDom.muted = !1)
        },
        initPlay: function() {
            var a = this.config.defaultIndex;
            this.setVolume(this.config.defaultVolume),
            this.audioDom.load(),
            this.resetPlayer(a)
        },
        play: function() {
            var a = this.musicDom.button.ctrl;
            this.audioDom.play(),
            d(a, "paused"),
            b(a, "play"),
            a.setAttribute("title", "\u6682\u505c"),
            d(this.musicDom.cover, "paused"),
            b(this.musicDom.cover, "play")
        },
        pause: function() {
            var a = this.musicDom.button.ctrl;
            this.audioDom.pause(),
            d(a, "play"),
            b(a, "paused"),
            a.setAttribute("title", "\u64ad\u653e"),
            d(this.musicDom.cover, "play"),
            b(this.musicDom.cover, "paused")
        },
        getRandomIndex: function() {
            var a = this.currentMusic,
            b = this.musicLength,
            c = 0,
            d = [];
            for (c; b > c; c++) c != a && d.push(c);
            var e = parseInt(Math.random() * d.length);
            return d[e]
        },
        playByMode: function(a) {
            var b = this.playMode,
            c = this.currentMusic,
            d = this.musicLength,
            e = c;
            1 == b ? "prev" == a ? e = d - 1 >= c && c > 0 ? c - 1 : d - 1 : ("next" == a || "ended" == a) && (e = c >= d - 1 ? 0 : c + 1) : 2 == b ? e = this.getRandomIndex() : 3 == b && (e = "prev" == a ? d - 1 >= c && c > 0 ? c - 1 : d - 1 : "next" == a ? c >= d - 1 ? 0 : c + 1 : c),
            this.resetPlayer(e)
        },
        action: function() {
            var a = this,
            g = this.musicDom.volume,
            i = this.musicDom.button;
            this.audioDom.addEventListener("timeupdate",
            function() {
                var b = this;
                if (!isNaN(b.duration)) {
                    var c = h(b.currentTime),
                    d = h(b.duration),
                    e = b.currentTime / b.duration * a.musicDom.bufferProcess.parentNode.offsetWidth;
                    a.musicDom.time.innerHTML = "" + c + "/" + d,
                    a.musicDom.curProcess.style.width = e + "px"
                }
            },
            !1),
            this.audioDom.addEventListener("ended",
            function() {
                a.playByMode("ended")
            },
            !1),
            g.volumeControl.addEventListener("click",
            function(d) {
                d = d || window.event,
                d.stopPropagation(),
                c(g.volumeProcess, "show") ? (e(this, "muted"), a.audioDom.muted = c(this, "muted") ? !0 : !1) : b(g.volumeProcess, "show")
            },
            !1),
            document.addEventListener("click",
            function(a) {
                a = a || window.event,
                a.stopPropagation();
                var b = a.target || a.srcElement;
                b.parentNode !== g.volumeProcess && b.parentNode !== f(".grid-music-container .u-volume") && d(g.volumeProcess, "show")
            },
            !1),
            g.volumeEventer.addEventListener("click",
            function(b) {
                b = b || window.event,
                b.stopPropagation();
                var c = this.offsetHeight,
                d = b.offsetY,
                e = (c - d) / c;
                a.setVolume(e)
            },
            !1);
            var j = document.querySelectorAll(".m-music-list-wrap li"),
            k = 0;
            for (k; k < this.musicLength; k++) !
            function(b) {
                j[b].addEventListener("click",
                function() {
                    a.resetPlayer(b)
                },
                !1)
            } (k);
            i.ctrl.addEventListener("click",
            function() {
                c(this, "play") ? a.pause() : a.play()
            },
            !1),
            i.prev.addEventListener("click",
            function() {
                a.playByMode("prev")
            },
            !1),
            i.next.addEventListener("click",
            function() {
                a.playByMode("next")
            },
            !1),
            i.listCircular.addEventListener("click",
            function() {
                b(this, "current"),
                d(i.singleCircular, "current"),
                d(i.randomPlay, "current"),
                a.playMode = 1
            }),
            i.randomPlay.addEventListener("click",
            function() {
                b(this, "current"),
                d(i.singleCircular, "current"),
                d(i.listCircular, "current"),
                a.playMode = 2
            }),
            i.singleCircular.addEventListener("click",
            function() {
                b(this, "current"),
                d(i.listCircular, "current"),
                d(i.randomPlay, "current"),
                a.playMode = 3
            })
        },
        init: function() {
            this.musicDom = {
                music: f(".grid-music-container"),
                cover: f(".grid-music-container .u-cover"),
                title: f(".grid-music-container .u-music-title"),
                curProcess: f(".grid-music-container .current-process"),
                bufferProcess: f(".grid-music-container .buffer-process"),
                time: f(".grid-music-container .u-time"),
                listWrap: f(".grid-music-container .m-music-list-wrap"),
                volume: {
                    volumeProcess: f(".grid-music-container .volume-process"),
                    volumeCurrent: f(".grid-music-container .volume-current"),
                    volumeCtrlBar: f(".grid-music-container .volume-bar"),
                    volumeEventer: f(".grid-music-container .volume-event"),
                    volumeControl: f(".grid-music-container .volume-control")
                },
                button: {
                    ctrl: f(".grid-music-container .ctrl-play"),
                    prev: f(".grid-music-container .prev"),
                    next: f(".grid-music-container .next"),
                    listCircular: f(".grid-music-container .mode-list"),
                    randomPlay: f(".grid-music-container .mode-random"),
                    singleCircular: f(".grid-music-container .mode-single")
                }
            },
            this.currentMusic = this.config.defaultIndex || 0,
            this.playMode = 1,
            this.audioDom = document.createElement("audio"),
            this.createListDom(),
            this.initPlay(),
            this.action()
        }
    },
    a = a || window,
    a.SMusic = function(a) {
        return new j(a)
    }
} (window);

    往下面翻翻看

    OωO
    取消

难说博客
登陆 注册

  • 634运行天数
  • 909评论数量
  • 400文章数量

热门文章

老虎控台中文操作界面

标签列表

最新评论


专属相册,记录属于我和你的每一个瞬间

小控心满眼都是小包子

查看相册