HTML5列表式音乐播放器SMusic特效代码

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

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

以下是 HTML5列表式音乐播放器SMusic特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="src/css/smusic.css"/>
<title>HTML5列表式音乐播放器SMusic</title>
</head>
<body>
<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 src="src/js/smusic.min.js"></script>
<script>
var musicList = [
	{
		title : 'Sugar',
		singer : 'Maroon 5',
		cover  : 'images/Maroon5.jpg',
		src    : 'http://zjdx1.13141618.taobao.com/Files/DownLoad/sound1/201506/6039.mp3'
	},
	{
		title : '洋葱',
		singer : '平安',
		cover  : 'images/yangcong.jpg',
		src    : 'http://zjdx1.13141618.taobao.com/Files/DownLoad/sound1/201506/6039.mp3'
	},	
	{
		title : '她说',
		singer : '张碧晨',
		cover  : 'images/yangcong.jpg',
		src    : 'http://zjdx1.13141618.taobao.com/Files/DownLoad/sound1/201506/6039.mp3'
	},
	{
		title : '海阔天空',
		singer : 'beyond',
		cover  : 'images/yangcong.jpg',
		src    : 'http://zjdx1.13141618.taobao.com/Files/DownLoad/sound1/201506/6039.mp3'
	}
];
new SMusic({
	musicList:musicList
});
</script>
</body>
</html>

JS代码(smusic.min.js):

/** * SMusic * Author:Smohan * Version:1.0.0 * url:http://www.smohan.net/lab/smusic.html * download：http://www.sucaijiayuan.com * 使用请保留以上信息 */
!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);

CSS代码(smusic.css):

/** * SMusic * Author:Smohan * Version:1.0.0 * url:http://www.smohan.net/lab/smusic.html * 使用请保留以上信息 */
@charset "utf-8";/*reset*/
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{width:520px;height:276px;padding:20px;position:absolute;top:50%;left:50%;margin-top:-158px;margin-left:-280px;background-color:rgba(255,255,255,.7);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;position:relative;padding-left:140px;}
.grid-music-container .u-cover{width:121px;height:121px;overflow:hidden;background:url(../img/music_icons.png) 0 0 no-repeat;position:absolute;top:0;left:0;}
.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{height:100%;}
.grid-music-container .m-now-info h1{font-weight:normal;}
.grid-music-container .m-now-info h1 strong{font-size:18px;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:30px;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(../img/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{margin-left:135px;margin-right:25px;height:120px;border:1px solid rgba(255,255,255,.7);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;}
.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(../img/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;}

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