黑色质感HTML5播放器代码

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

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

以下是黑色质感HTML5播放器代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>黑色质感HTML5播放器代码</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

</head>
<body>

<div class="example">
	<div class="player">
		<div class="pl"></div>
		<div class="title"></div>
		<div class="artist"></div>
		<div class="cover"></div>
		<div class="controls">
			<div class="play"></div>
			<div class="pause"></div>
			<div class="rew"></div>
			<div class="fwd"></div>
		</div>
		<div class="volume"></div>
		<div class="tracker"></div>
	</div>
	<ul class="playlist hidden">
		<li audiourl="http://zjdx1.baidu.com/Files/DownLoad/sound1/201506/6039.mp3" cover="images/1.jpg" artist="Maroon 5">Sugar.mp3</li>
		
		<li audiourl="http://zjdx1.baidu.com/Files/DownLoad/sound1/201506/6039.mp3" cover="images/2.jpg" artist="平安">洋葱.mp3</li>
		
		<li audiourl="http://zjdx1.baidu.com/Files/DownLoad/sound1/201506/6039.mp3" cover="images/2.jpg" artist="周杰伦">你听得到.mp3</li>
	</ul>
</div>
</body>
</html>

JS代码(main.js):

/** * * HTML5 Audio player with playlist * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php */
jQuery(document).ready(function(){
	// inner variables var song;
	var tracker = $('.tracker');
	var volume = $('.volume');
	function initAudio(elem){
	var url = elem.attr('audiourl');
	var title = elem.text();
	var cover = elem.attr('cover');
	var artist = elem.attr('artist');
	$('.player .title').text(title);
	$('.player .artist').text(artist);
	$('.player .cover').css('background-image','url('+cover+')');
	;
	song = new Audio(url);
	// timeupdate event listener song.addEventListener('timeupdate',function (){
	var curtime = parseInt(song.currentTime,10);
	tracker.slider('value',curtime);
}
);
	$('.playlist li').removeClass('active');
	elem.addClass('active');
}
function playAudio(){
	song.play();
	tracker.slider("option","max",song.duration);
	$('.play').addClass('hidden');
	$('.pause').addClass('visible');
}
function stopAudio(){
	song.pause();
	$('.play').removeClass('hidden');
	$('.pause').removeClass('visible');
}
// play click $('.play').click(function (e){
	e.preventDefault();
	playAudio();
}
);
	// pause click $('.pause').click(function (e){
	e.preventDefault();
	stopAudio();
}
);
	// forward click $('.fwd').click(function (e){
	e.preventDefault();
	stopAudio();
	var next = $('.playlist li.active').next();
	if (next.length == 0){
	next = $('.playlist li:first-child');
}
initAudio(next);
	playAudio();
}
);
	// rewind click $('.rew').click(function (e){
	e.preventDefault();
	stopAudio();
	var prev = $('.playlist li.active').prev();
	if (prev.length == 0){
	prev = $('.playlist li:last-child');
}
initAudio(prev);
	playAudio();
}
);
	// show playlist $('.pl').click(function (e){
	e.preventDefault();
	$('.playlist').fadeIn(300);
}
);
	// playlist elements - click $('.playlist li').click(function (){
	stopAudio();
	initAudio($(this));
	playAudio();
}
);
	// initialization - first element in playlist initAudio($('.playlist li:first-child'));
	// set volume song.volume = 0.8;
	// initialize the volume slider volume.slider({
	range:'min',min:1,max:100,value:80,start:function(event,ui){
}
,slide:function(event,ui){
	song.volume = ui.value / 100;
}
,stop:function(event,ui){
}
,}
);
	// empty tracker slider tracker.slider({
	range:'min',min:0,max:10,start:function(event,ui){
}
,slide:function(event,ui){
	song.currentTime = ui.value;
}
,stop:function(event,ui){
}
}
);
	playAudio();
}
);

CSS代码(styles.css):

*{margin:0;padding:0;}
body{background-color:#aaa;}
header{background-color:rgba(33,33,33,0.9);color:#fff;display:block;font:14px/1.3 Arial,sans-serif;margin-bottom:10px;position:relative;}
header h2{font-size:22px;margin:0px auto;padding:10px 0;width:80%;text-align:center;}
header a,a:visited{text-decoration:none;color:#fcfcfc;}
/* HTML5 Audio player with playlist styles */
.example{margin:50px auto 0;width:400px;}
.player{background:transparent url("../images/spr.png") no-repeat scroll center top;height:162px;position:relative;width:326px;z-index:2;}
.title,.artist{font-family:verdana;left:167px;position:absolute;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;}
.title{color:#FFFFFF;font-size:14px;font-weight:bold;top:23px;}
.artist{color:#EEEEEE;font-size:12px;top:40px;}
.pl{background:transparent url("../images/spr.png") no-repeat scroll -274px -175px;cursor:pointer;height:34px;left:270px;position:absolute;top:20px;width:32px;}
.pl:hover{top:21px;}
.cover{background:transparent;background-size:100% 100%;border-radius:5px 5px 5px 5px;height:94px;left:20px;position:absolute;top:20px;width:94px;}
.controls{cursor:pointer;height:23px;left:167px;position:absolute;top:65px;width:138px;}
.controls .play,.controls .pause,.controls .rew,.controls .fwd{background:transparent url("../images/spr.png") no-repeat scroll 0 0;float:left;height:100%;width:33%;}
.controls .play{background-position:-8px -171px;}
.controls .pause{background-position:-8px -198px;display:none;}
.controls .rew{background-position:-54px -171px;}
.controls .fwd{background-position:-100px -171px;}
.controls .play:hover{background-position:-8px -170px;}
.controls .pause:hover{background-position:-8px -197px;}
.controls .rew:hover{background-position:-54px -170px;}
.controls .fwd:hover{background-position:-100px -170px;}
.hidden{display:none;}
.controls .visible{display:block;}
.volume{height:11px;left:186px;position:absolute;top:96px;width:112px;}
.tracker{height:15px;left:20px;position:absolute;top:126px;width:285px;}
.ui-slider-range{background:transparent url("../images/spr.png") no-repeat scroll 5px -222px;height:100%;position:absolute;top:0;}
.ui-slider-handle{cursor:pointer;height:10px;margin-left:-5px;position:absolute;top:2px;width:10px;z-index:2;}
.volume .ui-slider-handle{background:url("../images/spr.png") no-repeat scroll -201px -188px rgba(0,0,0,0);height:13px;width:13px;}
.playlist{background-color:#333333;border-radius:5px 5px 5px 5px;list-style-type:none;margin:-10px 0 0 2px;padding-bottom:10px;padding-top:15px;position:relative;width:322px;z-index:1;}
.playlist li{font-family:Arial;font-size:14px;line-height:1.5;color:#EEEEEE;cursor:pointer;margin:0 0 5px 15px;}
.playlist li.active{font-weight:bold;}

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