audio player

by twobin

HTML

<div id="wrap"></div>

CSS

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td{
	padding:0;
	margin:0;
}
#wrap,#wrap2{
	width:290px;
	margin:100px auto 0;
}

.player{
	font-size:12px;
	color:#333;
	width:290px;
	-moz-border-radius: 5px;
	border-radius-left: 5px;
	-webkit-border-radius: 5px;
	position:relative;
}
.player *{
	padding:0;
	margin:0;
}
.player ul{
	list-style:none;
}
.player .clear{
	clear:both;
	height:0px;
	overflow:hidden;
}
.player_vol{
	float:left;
	width:39px;
	height:24px;
	background:#ccc;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	position:relative;
}
.player_vol_open{
	margin:5px 0 0 1px;
	cursor:pointer;
	position:absolute;
	display:none;
	padding-right:3px;
}
.player_vol_open li{
	display:block;
	float:left;
	margin-left:3px;
	width:4px;
}
.player_vol_open .vol1{
	background:#fff;
	height:3px;
	margin-top:12px;
}
.player_vol_open .vol1 div{
	background:#666;
	height:3px;
}
.player_vol_open .vol2{
	background:#fff;
	height:6px;
	margin-top:9px;
}
.player_vol_open .vol2 div{
	background:#666;
	height:6px;
}
.player_vol_open .vol3{
	background:#fff;
	height:9px;
	margin-top:6px;
}
.player_vol_open .vol3 div{
	background:#666;
	height:9px;
}
.player_vol_open .vol4{
	background:#fff;
	height:12px;
	margin-top:3px;
}
.player_vol_open .vol4 div{
	background:#666;
	height:12px;
	width:2px;
}
.player_vol_open .vol5{
	background:#fff;
	height:15px;
}
.player_vol_open .vol5 div{
	background:#666;
	height:15px;
	width:0px;
}
.player_vol_close{
	position:absolute;
	left:16px;
	top:9px;
}
.player_voice_l{
	width:8px;
	height:6px;
	background:#333;
}
div.player_voice_r{
	border-right:8px solid #333;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
	width:0;
	margin:-11px 0 0 0px;
}
.player_vol_right{
	float:left;
	border-left:7px solid #ccc;
	border-top:12px solid transparent;
	border-bottom:12px solid...

JavaScript

var AudioPlayer = function(options){
	this.wrap = $("#" + options.wrap);
	this.autoplay = typeof(options.autoplay) != "undefined" ? options.autoplay : true;
	this.loop = typeof(options.loop) != "undefined" ? options.loop : true;
	this.volume = typeof(options.volume) != "undefined" ? options.volume : 0.6;
	this.src = options.src;
	this.title = options.title;
	
	this.index = 0;
	this.audio = document.createElement("audio");
	this.wrap.append(this.audio);
	this.init();
	
	this.volOpen = this.wrap.find(".player_vol_open");
	this.volClose = this.wrap.find(".player_vol_close");
	
	this.playBtn = this.wrap.find(".player_play");
	this.playLeft = this.wrap.find(".player_play_left");
	this.playOpen = this.wrap.find(".player_play_open");
	this.playClose = this.wrap.find(".player_play_close");
	
	this.content = this.wrap.find(".player_content");
	this.audioProg = this.wrap.find(".player_prog");
	this.audioName = this.wrap.find(".player_name");
	this.audioTime = this.wrap.find(".player_time");
	this.infoBack = this.wrap.find(".player_info_back");
	this.infoWrap = this.wrap.find(".player_info_wrap");
	
	this.turning = false;
	this.easing = "swing";
	this.time = 300;
		
	this.start();
}
AudioPlayer.prototype = {
	constructor:AudioPlayer,
	start:function(){
		if(this.autoplay) this.play();
		this._bindPlayBtn();
		this._showVol(this.volume);
		this.setVol();
	},
	init:function(){
		var playerHtml = ['<div class="player">',
						'<div class="player_vol">',
							'<div class="player_vol_open">',
								'<ul>',
        							'<li><div class="vol vol1"><div></div></div></li>',
            						'<li><div class="vol vol2"><div></div></div></li>',
            						'<li><div class="vol vol3"><div></div></div></li>',
            						'<li><div class="vol vol4"><div></div></div></li>',
            						'<li><div class="vol vol5"><div></div></div></li>',
        						'</ul>',
           						'<div class="clear"></div>',
        					'</div>',
        					'<div...