jquery音乐播放器插件jplayer特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery音乐播放器插件jplayer特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

<head>
    <meta charset="gb2312">
    <title>jquery音乐播放器插件jplayer</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

</head>

<body>

    <div class="music-player">
        <!--<div style="background-image: url(http://i.imgur.com/yqB0erk.jpg);" class="album"></div>-->

        <div class="info">
            <div class="left">
                <a href="javascript:;" class="icon-shuffle"></a>
                <a href="javascript:;" class="icon-heart"></a>
            </div>
            <div class="center">
                <div class="jp-playlist">
                    <ul>
                        <li></li>
                    </ul>
                </div>

            </div>
            <div class="right">
                <a href="javascript:;" class="icon-repeat"></a>
                <a href="javascript:;" class="icon-share"></a>
            </div>

            <div class="progress jp-seek-bar">
                <span class="jp-play-bar" style="width: 0%"></span>
            </div>
        </div>

        <div class="controls">
            <div class="current jp-current-time">00:00</div>
            <div class="play-controls">
                <a href="javascript:;" class="icon-previous jp-previous" title="previous"></a>
                <a href="javascript:;" class="icon-play jp-play" title="play"></a>
                <a href="javascript:;" class="icon-pause jp-pause" title="pause"></a>
                <a href="javascript:;" class="icon-next jp-next" title="next"></a>
            </div>
            <div class="volume-level jp-volume-bar">
                <span class="jp-volume-bar-value" style="width: 0%"></span>
                <a href="javascript:;" class="icon-volume-up jp-volume-max" title="max volume"></a>
                <a href="javascript:;" class="icon-volume-down jp-mute" title="mute"></a>
            </div>
        </div>
        <div id="jquery_jplayer" class="jp-jplayer"></div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src='js/jquery.jplayer.min.js'></script>
    <script src='js/jplayer.playlist.min.js'></script>
    <script src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

$(document).ready(function(){
	var playlist = [{
	title:"Hidden",artist:"Miaow",mp3:"http://jq22.qiniudn.com/i1.mp3",//oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg",poster:"http://33.media.tumblr.com/0b35eb42176eedbf4a96e52efa760875/tumblr_mxp7a0v3fr1rqx86wo1_500.png"}
,{
	title:"Cro Magnon Man",artist:"The Stark Palace",mp3:"http://jq22.qiniudn.com/i2.mp3",//oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",poster:"http://33.media.tumblr.com/bf9dc125a47dcca91ce5b3575bc3ba92/tumblr_nbmb3j8nU51sq3g2zo1_500.png"}
,{
	title:"Bubble",m4a:"http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg",poster:"http://31.media.tumblr.com/810b1125a8b9e9f192d009ef58dceb07/tumblr_nbe8wsmKuz1rknpqyo1_500.jpg"}
];
	var cssSelector ={
	jPlayer:"#jquery_jplayer",cssSelectorAncestor:".music-player"}
;
	var options ={
	swfPath:"http://cdnjs.cloudflare.com/ajax/libs/jplayer/2.6.4/jquery.jplayer/Jplayer.swf",supplied:"ogv,m4v,oga,mp3"}
;
	var myPlaylist = new jPlayerPlaylist(cssSelector,playlist,options);
}
);

CSS代码(reset.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}

CSS代码(style.css):

*,*:before,*:after{-moz-box-sizing:border-box;box-sizing:border-box;}
html{min-height:100%;}
body{background-size:cover;font-family:"Open Sans",sans-serif;background-color:#eee;background-image:url(../img/bg.jpg);background-position:center;background-repeat:no-repeat;}
.music-player{position:relative;width:350px;height:290px;margin:150px auto;box-shadow:0 0 60px rgba(0,0,0,0.8);border-radius:10px;background:#222;overflow:hidden;z-index:0;}
.music-player img{position:absolute;top:0px;left:0px;bottom:0px;right:0px;z-index:-1;display:block;width:100% !important;height:100% !important;-webkit-filter:blur(2px);filter:blur(2px);}
.music-player .info{width:100%;height:100px;background:#222;background:rgba(0,0,0,0.8);text-align:center;position:relative;}
.music-player .info .jp-playlist li{display:none;}
.music-player .info .jp-playlist li a{font-size:30px;font-weight:300;text-decoration:none;color:#fff;color:rgba(225,225,225,0.4);}
.music-player .info .jp-playlist li a span{font-size:14px;display:block;margin-top:10px;}
.music-player .info .jp-playlist li.jp-playlist-current{display:block;}
.music-player .info .jp-playlist li .jp-free-media,.music-player .info .jp-playlist li .jp-playlist-item-remove{display:none;}
.music-player .info .left,.music-player .info .right{width:25px;position:absolute;top:30px;left:30px;}
.music-player .info .right{left:auto;right:30px;}
.music-player .info [class^="icon-"]{margin:0 0 10px;}
.music-player .info .center{padding:20px 0 0;}
.music-player .progress,.music-player .volume-level{width:100%;height:5px;display:block;background:#000;position:absolute;bottom:0px;cursor:pointer;}
.music-player .progress span,.music-player .volume-level span{position:relative;display:block;background:#ed553b;width:0%;height:5px;}
.music-player .progress span:after,.music-player .volume-level span:after{position:absolute;right:-5px;top:-8px;content:"";width:10px;height:22px;background-image:url(../img/tsqwz1N.jpg);background-position:center;background-repeat:no-repeat;}
.music-player .controls{text-align:center;width:100%;height:190px;background:#982e4b;background:rgba(152,46,75,0.6);}
.music-player .controls .current{font-size:48px;color:#fff;color:rgba(225,225,225,0.4);padding:15px 0 20px;}
.music-player .controls .play-controls a{display:inline-block;width:35px;height:40px;margin:0 30px;}
.music-player .controls .volume-level{position:relative;bottom:auto;width:200px;height:2px;margin:30px auto 0;background:rgba(225,225,225,0.3);}
.music-player .controls .volume-level span{height:2px;}
.music-player .controls .volume-level span:after{right:-11px;top:-8px;width:22px;height:22px;background-image:url(../img/V5i67V2.png);}
.music-player .controls .volume-level a{position:absolute;right:-32px;top:-8px;width:22px;}
.music-player .controls .volume-level a.icon-volume-down{right:auto;left:-25px;}
[class^="icon-"]{width:18px;height:18px;background:url(../img/E09T8tf.png) no-repeat center;display:block;}
.icon-shuffle{background-image:url(../img/AQAxRxS.png);}
.icon-heart{background-image:url(../img/E09T8tf.png);}
.icon-repeat{background-image:url(../img/338F8MX.png);}
.icon-share{background-image:url(../img/PGIC6ME.png);}
.icon-previous{background-image:url(../img/LIqj0nr.png);}
.icon-play{background-image:url(../img/xlBv5aR.png);}
.icon-pause{background-image:url(../img/lIhwduj.png);}
.icon-next{background-image:url(../img/Mb6Nzj5.png);}
.icon-volume-up{background-image:url(../img/qqdoddi.png);}
.icon-volume-down{background-image:url(../img/3iirf2f.png);}
.copyrights{text-align:center;text-transform:capitalize;margin:50px;color:rgba(0,0,0,0.6);}
.copyrights a{color:rgba(152,46,75,0.9);text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)