jQuery虾米音乐播放器样式代码

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

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

以下是 jQuery虾米音乐播放器样式代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<title>jQuery虾米音乐播放器样式代码</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/scroll.css">
<link rel="stylesheet" type="text/css" href="css/xiami.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/canvas.js"></script>
<script type="text/javascript" src="js/mousewheel.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript" src="js/xiami.js"></script>

</head>
<body>
	<!--模糊画布-->
	<div class="blur">
		<canvas style="width:1366px;height:700px;opacity:0;" width="1366" height="700" id="canvas">
	</div>
	<div class="playerMain">
		<div class="top">
			<a href="#" class="logo"></a>
			<div class="search">
				<div type="submit" class="searchBtn"></div>
				<input type="text" class="searchTxt">
			</div>
			<div class="mainNav">
				<div class="tipLogin">
					马上
					<a href="#" class="loginA">登录</a>
				</div>
				<a href="#" class="myroom"></a>
			</div>
		</div>
		<div class="middle">
			<div class="mainWrap">
				<div class="leftBar">
					<ul class="menuUL">
						<li class="menuLi cur">
							<a href="#">
								<i class="icon iplay"></i>
								正在播放
							</a>
						</li>
						<li class="menuLi">
							<a href="#">
								<i class="icon ihst"></i>
								播放历史
							</a>
						</li>
						<li class="menuLi">
							<a href="#">
								<i class="icon ishouc"></i>
								我收藏的单曲
							</a>
						</li>
					</ul>
					<div class="collectOut">
						<span class="colS">我创建的精选集</span>
						<a href="#" class="colA"></a>
					</div>
					<div class="cellectList"></div>
					<audio id="audio" src="http://zjdx1.baidu.com/Files/DownLoad/sound1/201507/6065.mp3"></audio>			
				</div>
				<div class="mainBody">
					<div class="playHd">
						<div class="phInner">
							<div class="col">歌曲(50)</div>
							<div class="col">演唱者</div>
							<div class="col">专辑</div>
						</div>
					</div>
					<div class="playBd">
						<div class="scrollView">
							<!-- <div class="scroll"></div> -->
							<ul class="songUL">
								<li class="songList">
									<div class="songLMain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start" >
											<em sonN="1">1</em>
										</div>
										<div class="songBd">
											<div class="col colsn">盛夏光年</div>
											<div class="col colcn">陈冰</div>
											<div class="col">好声音第三季</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more" style="display:none"></a>
											<a class="cicon dele" style="display:none"></a>
										</div>
									</div>									
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start" >
											<em sonN="2">2</em>
										</div>
										<div class="songBd">
											<div class="col colsn">漂洋过海来看你(Live)</div>
											<div class="col colcn">刘明湘</div>
											<div class="col">好声音第三季</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="3">3</em>
										</div>
										<div class="songBd">
											<div class="col colsn">Autobots Reunite</div>
											<div class="col colcn">Steve Jablonsky</div>
											<div class="col">《变形金刚4：绝迹重生》</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="4">4</em>
										</div>
										<div class="songBd">
											<div class="col colsn">Halo</div>
											<div class="col colcn">Martin</div>
											<div class="col">Halo Legends: Original Soundtrack</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="5">5</em>
										</div>
										<div class="songBd">
											<div class="col colsn">Pearl White Story</div>
											<div class="col colcn">S.E.N.S</div>
											<div class="col">君に届け 2ND SEASON オリジナル・サウンドトラック</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="6">6</em>
										</div>
										<div class="songBd">
											<div class="col colsn">break the sword of justice</div>
											<div class="col colcn">梶浦由記</div>
											<div class="col">NHKアニメーション ｢ツバサ・クロニクル｣ オリジナルサウンドトラック Future Soundscape I</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="7">7</em>
										</div>
										<div class="songBd">
											<div class="col colsn">The children</div>
											<div class="col colcn">Ramin Djawadi</div>
											<div class="col">《权力的游戏第四季》</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="8">8</em>
										</div>
										<div class="songBd">
											<div class="col colsn">Pacific Rim</div>
											<div class="col colcn">Ramin Djawadi</div>
											<div class="col">《环太平洋》</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="9">9</em>
										</div>
										<div class="songBd">
											<div class="col colsn">四つ葉のクローバー</div>
											<div class="col colcn">林有三</div>
											<div class="col">ハチミツとクローバー オリジナルサウンドトラック</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="10">10</em>
										</div>
										<div class="songBd">
											<div class="col colsn">Icarus</div>
											<div class="col colcn">Ivan Torrent</div>
											<div class="col">Icarus</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList">
									<div class="songLmain">
										<div class="check">
											<input class="checkIn" type="checkbox" select="0">
										</div>
										<div class="start">
											<em sonN="11">11</em>
										</div>
										<div class="songBd">
											<div class="col colsn">th3 awak3n1ng</div>
											<div class="col colcn">Ivan Torrent</div>
											<div class="col">Icarus</div>
										</div>
										<div class="control">
											<a class="cicon love"></a>
											<a class="cicon more"></a>
											<a class="cicon dele"></a>
										</div>
									</div>
								</li>
								<li class="songList"></li>
							</ul>
						</div>
					</div>
					<div class="playFt">
						<div class="track">
							<div class="uiCheck">
								<input class="checkAll" type="checkbox" select="0">
							</div>
							<div class="uiItem">
								<a href="#" class="itIcon itDele">删除</a>
							</div>
							<div class="uiItem">
								<a href="#" class="itIcon itShou">收藏</a>
							</div>
							<div class="uiItem">
								<a href="#" class="itIcon itJin">添加到精选集</a>
							</div>
							<div class="uiItem">
								<a href="#" class="itIcon itMore">更多</a>
							</div>
						</div>
					</div>
				</div>
				<div class="mainOuther">
					<div class="albumCover">
						<a href="#">
							<img src="images/2.jpg" id="canvas1">
						</a>
					</div>
					<div class="albumSale">
						<a href="#" class="asA">
							<img src="">
						</a>
					</div>
					<div id="lyr"></div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="playerWrap">
				<div class="playerCon">
					<a href="#" class="pbtn prevBtn"></a>
					<a href="#" class="pbtn playBtn" isplay="0"></a>
					<a href="#" class="pbtn nextBtn"></a>
					<a href="#" class="mode"></a>
				</div>
				<div class="playInfo">
					<div class="trackInfo">
						<a href="#" class="songName">漂洋过海来看你(Live)</a>
						-
						<a href="#" class="songPlayer">刘明湘</a>
						<div class="trackCon">
							<a href="#" class="tc1"></a>
							<a href="#" class="tc2"></a>
							<a href="#" class="tc3"></a>
						</div>
					</div>
					<div class="playerLength">
						<div class="position">00:00</div>
						<div class="progress">
							<div class="pro1"></div>
							<div class="pro2">
								<a href="#" class="dian"></a>
							</div> 
						</div>
						<div class="duration">03:35</div>
					</div>
				</div>
				<div class="vol">
					<a href="#" class="pinBtn"></a>
					<div class="volm">
						<div class="volSpeaker"></div>
						<div class="volControl">
							<a href="#" class="dian2"></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

JS代码(canvas.js):

/*StackBlur - a fast almost Gaussian Blur For CanvasVersion:0.5Author:Mario KlingemannContact:mario@quasimondo.comWebsite:http://www.quasimondo.com/StackBlurForCanvasTwitter:@quasimondoIn case you find this class useful - especially in commercial projects -I am not totally unhappy for a small donation to my PayPal accountmario@quasimondo.deOr support me on flattr:https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascriptCopyright (c) 2010 Mario KlingemannPermission is hereby granted,free of charge,to any personobtaining a copy of this software and associated documentationfiles (the "Software"),to deal in the Software withoutrestriction,including without limitation the rights to use,copy,modify,merge,publish,distribute,sublicense,and/or sellcopies of the Software,and to permit persons to whom theSoftware is furnished to do so,subject to the followingconditions:The above copyright notice and this permission notice shall beincluded in all copies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS OR IMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIESOF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE ANDNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHTHOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHER LIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISINGFROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OROTHER DEALINGS IN THE SOFTWARE.*/
var mul_table = [ 512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259];
	var shg_table = [ 9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24 ];
	function stackBlurImage( imageID,canvasID,radius,blurAlphaChannel ){
	var img = document.getElementById( imageID );
	var w = img.naturalWidth;
	var h = img.naturalHeight;
	var canvas = document.getElementById( canvasID );
	canvas.style.width = w + "px";
	canvas.style.height = h + "px";
	canvas.width = w;
	canvas.height = h;
	var context = canvas.getContext("2d");
	context.clearRect( 0,0,w,h );
	context.drawImage( img,0,0 );
	if ( isNaN(radius) || radius < 1 ) return;
	if ( blurAlphaChannel )stackBlurCanvasRGBA( canvasID,0,0,w,h,radius );
	elsestackBlurCanvasRGB( canvasID,0,0,w,h,radius );
}
function stackBlurCanvasRGBA( id,top_x,top_y,width,height,radius ){
	if ( isNaN(radius) || radius < 1 ) return;
	radius |= 0;
	var canvas = document.getElementById( id );
	var context = canvas.getContext("2d");
	var imageData;
	try{
	try{
	imageData = context.getImageData( top_x,top_y,width,height );
}
catch(e){
	// NOTE:this part is supposedly only needed if you want to work with local files// so it might be okay to remove the whole try/catch block and just use//imageData = context.getImageData( top_x,top_y,width,height );
	try{
	netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
	imageData = context.getImageData( top_x,top_y,width,height );
}
catch(e){
	//alert("Cannot access local image");
	throw new Error("unable to access local image data:" + e);
	return;
}
}
}
catch(e){
	//alert("Cannot access image");
	throw new Error("unable to access image data:" + e);
}
var pixels = imageData.data;
	var x,y,i,p,yp,yi,yw,r_sum,g_sum,b_sum,a_sum,r_out_sum,g_out_sum,b_out_sum,a_out_sum,r_in_sum,g_in_sum,b_in_sum,a_in_sum,pr,pg,pb,pa,rbs;
	var div = radius + radius + 1;
	var w4 = width << 2;
	var widthMinus1 = width - 1;
	var heightMinus1 = height - 1;
	var radiusPlus1 = radius + 1;
	var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2;
	var stackStart = new BlurStack();
	var stack = stackStart;
	for ( i = 1;
	i < div;
	i++ ){
	stack = stack.next = new BlurStack();
	if ( i == radiusPlus1 ) var stackEnd = stack;
}
stack.next = stackStart;
	var stackIn = null;
	var stackOut = null;
	yw = yi = 0;
	var mul_sum = mul_table[radius];
	var shg_sum = shg_table[radius];
	for ( y = 0;
	y < height;
	y++ ){
	r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;
	r_out_sum = radiusPlus1 * ( pr = pixels[yi] );
	g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] );
	b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] );
	a_out_sum = radiusPlus1 * ( pa = pixels[yi+3] );
	r_sum += sumFactor * pr;
	g_sum += sumFactor * pg;
	b_sum += sumFactor * pb;
	a_sum += sumFactor * pa;
	stack = stackStart;
	for( i = 0;
	i < radiusPlus1;
	i++ ){
	stack.r = pr;
	stack.g = pg;
	stack.b = pb;
	stack.a = pa;
	stack = stack.next;
}
for( i = 1;
	i < radiusPlus1;
	i++ ){
	p = yi + (( widthMinus1 < i ? widthMinus1:i ) << 2 );
	r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i );
	g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs;
	b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs;
	a_sum += ( stack.a = ( pa = pixels[p+3])) * rbs;
	r_in_sum += pr;
	g_in_sum += pg;
	b_in_sum += pb;
	a_in_sum += pa;
	stack = stack.next;
}
stackIn = stackStart;
	stackOut = stackEnd;
	for ( x = 0;
	x < width;
	x++ ){
	pixels[yi+3] = pa = (a_sum * mul_sum) >> shg_sum;
	if ( pa != 0 ){
	pa = 255 / pa;
	pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa;
	pixels[yi+1] = ((g_sum * mul_sum) >> shg_sum) * pa;
	pixels[yi+2] = ((b_sum * mul_sum) >> shg_sum) * pa;
}
else{
	pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0;
}
r_sum -= r_out_sum;
	g_sum -= g_out_sum;
	b_sum -= b_out_sum;
	a_sum -= a_out_sum;
	r_out_sum -= stackIn.r;
	g_out_sum -= stackIn.g;
	b_out_sum -= stackIn.b;
	a_out_sum -= stackIn.a;
	p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p:widthMinus1 ) ) << 2;
	r_in_sum += ( stackIn.r = pixels[p]);
	g_in_sum += ( stackIn.g = pixels[p+1]);
	b_in_sum += ( stackIn.b = pixels[p+2]);
	a_in_sum += ( stackIn.a = pixels[p+3]);
	r_sum += r_in_sum;
	g_sum += g_in_sum;
	b_sum += b_in_sum;
	a_sum += a_in_sum;
	stackIn = stackIn.next;
	r_out_sum += ( pr = stackOut.r );
	g_out_sum += ( pg = stackOut.g );
	b_out_sum += ( pb = stackOut.b );
	a_out_sum += ( pa = stackOut.a );
	r_in_sum -= pr;
	g_in_sum -= pg;
	b_in_sum -= pb;
	a_in_sum -= pa;
	stackOut = stackOut.next;
	yi += 4;
}
yw += width;
}
for ( x = 0;
	x < width;
	x++ ){
	g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;
	yi = x << 2;
	r_out_sum = radiusPlus1 * ( pr = pixels[yi]);
	g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]);
	b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]);
	a_out_sum = radiusPlus1 * ( pa = pixels[yi+3]);
	r_sum += sumFactor * pr;
	g_sum += sumFactor * pg;
	b_sum += sumFactor * pb;
	a_sum += sumFactor * pa;
	stack = stackStart;
	for( i = 0;
	i < radiusPlus1;
	i++ ){
	stack.r = pr;
	stack.g = pg;
	stack.b = pb;
	stack.a = pa;
	stack = stack.next;
}
yp = width;
	for( i = 1;
	i <= radius;
	i++ ){
	yi = ( yp + x ) << 2;
	r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i );
	g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs;
	b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs;
	a_sum += ( stack.a = ( pa = pixels[yi+3])) * rbs;
	r_in_sum += pr;
	g_in_sum += pg;
	b_in_sum += pb;
	a_in_sum += pa;
	stack = stack.next;
	if( i < heightMinus1 ){
	yp += width;
}
}
yi = x;
	stackIn = stackStart;
	stackOut = stackEnd;
	for ( y = 0;
	y < height;
	y++ ){
	p = yi << 2;
	pixels[p+3] = pa = (a_sum * mul_sum) >> shg_sum;
	if ( pa > 0 ){
	pa = 255 / pa;
	pixels[p] = ((r_sum * mul_sum) >> shg_sum ) * pa;
	pixels[p+1] = ((g_sum * mul_sum) >> shg_sum ) * pa;
	pixels[p+2] = ((b_sum * mul_sum) >> shg_sum ) * pa;
}
else{
	pixels[p] = pixels[p+1] = pixels[p+2] = 0;
}
r_sum -= r_out_sum;
	g_sum -= g_out_sum;
	b_sum -= b_out_sum;
	a_sum -= a_out_sum;
	r_out_sum -= stackIn.r;
	g_out_sum -= stackIn.g;
	b_out_sum -= stackIn.b;
	a_out_sum -= stackIn.a;
	p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p:heightMinus1 ) * width )) << 2;
	r_sum += ( r_in_sum += ( stackIn.r = pixels[p]));
	g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1]));
	b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2]));
	a_sum += ( a_in_sum += ( stackIn.a = pixels[p+3]));
	stackIn = stackIn.next;
	r_out_sum += ( pr = stackOut.r );
	g_out_sum += ( pg = stackOut.g );
	b_out_sum += ( pb = stackOut.b );
	a_out_sum += ( pa = stackOut.a );
	r_in_sum -= pr;
	g_in_sum -= pg;
	b_in_sum -= pb;
	a_in_sum -= pa;
	stackOut = stackOut.next;
	yi += width;
}
}
context.putImageData( imageData,top_x,top_y );
}
function stackBlurCanvasRGB( id,top_x,top_y,width,height,radius ){
	if ( isNaN(radius) || radius < 1 ) return;
	radius |= 0;
	var canvas = document.getElementById( id );
	var context = canvas.getContext("2d");
	var imageData;
	try{
	try{
}
catch(e){
	// NOTE:this part is supposedly only needed if you want to work with local files// so it might be okay to remove the whole try/catch block and just use// imageData = context.getImageData( top_x,top_y,width,height );
	try{
	netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
	imageData = context.getImageData( top_x,top_y,width,height );
}
catch(e){
	alert("Cannot access local image");
	throw new Error("unable to access local image data:" + e);
	return;
}
}
}
catch(e){
	//alert("Cannot access image");
	throw new Error("unable to access image data:" + e);
}
var pixels = imageData.data;
	var x,y,i,p,yp,yi,yw,r_sum,g_sum,b_sum,r_out_sum,g_out_sum,b_out_sum,r_in_sum,g_in_sum,b_in_sum,pr,pg,pb,rbs;
	var div = radius + radius + 1;
	var w4 = width << 2;
	var widthMinus1 = width - 1;
	var heightMinus1 = height - 1;
	var radiusPlus1 = radius + 1;
	var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2;
	var stackStart = new BlurStack();
	var stack = stackStart;
	for ( i = 1;
	i < div;
	i++ ){
	stack = stack.next = new BlurStack();
	if ( i == radiusPlus1 ) var stackEnd = stack;
}
stack.next = stackStart;
	var stackIn = null;
	var stackOut = null;
	yw = yi = 0;
	var mul_sum = mul_table[radius];
	var shg_sum = shg_table[radius];
	for ( y = 0;
	y < height;
	y++ ){
	r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0;
	r_out_sum = radiusPlus1 * ( pr = pixels[yi] );
	g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] );
	b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] );
	r_sum += sumFactor * pr;
	g_sum += sumFactor * pg;
	b_sum += sumFactor * pb;
	stack = stackStart;
	for( i = 0;
	i < radiusPlus1;
	i++ ){
	stack.r = pr;
	stack.g = pg;
	stack.b = pb;
	stack = stack.next;
}
for( i = 1;
	i < radiusPlus1;
	i++ ){
	p = yi + (( widthMinus1 < i ? widthMinus1:i ) << 2 );
	r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i );
	g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs;
	b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs;
	r_in_sum += pr;
	g_in_sum += pg;
	b_in_sum += pb;
	stack = stack.next;
}
stackIn = stackStart;
	stackOut = stackEnd;
	for ( x = 0;
	x < width;
	x++ ){
	pixels[yi] = (r_sum * mul_sum) >> shg_sum;
	pixels[yi+1] = (g_sum * mul_sum) >> shg_sum;
	pixels[yi+2] = (b_sum * mul_sum) >> shg_sum;
	r_sum -= r_out_sum;
	g_sum -= g_out_sum;
	b_sum -= b_out_sum;
	r_out_sum -= stackIn.r;
	g_out_sum -= stackIn.g;
	b_out_sum -= stackIn.b;
	p = ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p:widthMinus1 ) ) << 2;
	r_in_sum += ( stackIn.r = pixels[p]);
	g_in_sum += ( stackIn.g = pixels[p+1]);
	b_in_sum += ( stackIn.b = pixels[p+2]);
	r_sum += r_in_sum;
	g_sum += g_in_sum;
	b_sum += b_in_sum;
	stackIn = stackIn.next;
	r_out_sum += ( pr = stackOut.r );
	g_out_sum += ( pg = stackOut.g );
	b_out_sum += ( pb = stackOut.b );
	r_in_sum -= pr;
	g_in_sum -= pg;
	b_in_sum -= pb;
	stackOut = stackOut.next;
	yi += 4;
}
yw += width;
}
for ( x = 0;
	x < width;
	x++ ){
	g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0;
	yi = x << 2;
	r_out_sum = radiusPlus1 * ( pr = pixels[yi]);
	g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]);
	b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]);
	r_sum += sumFactor * pr;
	g_sum += sumFactor * pg;
	b_sum += sumFactor * pb;
	stack = stackStart;
	for( i = 0;
	i < radiusPlus1;
	i++ ){
	stack.r = pr;
	stack.g = pg;
	stack.b = pb;
	stack = stack.next;
}
yp = width;
	for( i = 1;
	i <= radius;
	i++ ){
	yi = ( yp + x ) << 2;
	r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i );
	g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs;
	b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs;
	r_in_sum += pr;
	g_in_sum += pg;
	b_in_sum += pb;
	stack = stack.next;
	if( i < heightMinus1 ){
	yp += width;
}
}
yi = x;
	stackIn = stackStart;
	stackOut = stackEnd;
	for ( y = 0;
	y < height;
	y++ ){
	p = yi << 2;
	pixels[p] = (r_sum * mul_sum) >> shg_sum;
	pixels[p+1] = (g_sum * mul_sum) >> shg_sum;
	pixels[p+2] = (b_sum * mul_sum) >> shg_sum;
	r_sum -= r_out_sum;
	g_sum -= g_out_sum;
	b_sum -= b_out_sum;
	r_out_sum -= stackIn.r;
	g_out_sum -= stackIn.g;
	b_out_sum -= stackIn.b;
	p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p:heightMinus1 ) * width )) << 2;
	r_sum += ( r_in_sum += ( stackIn.r = pixels[p]));
	g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1]));
	b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2]));
	stackIn = stackIn.next;
	r_out_sum += ( pr = stackOut.r );
	g_out_sum += ( pg = stackOut.g );
	b_out_sum += ( pb = stackOut.b );
	r_in_sum -= pr;
	g_in_sum -= pg;
	b_in_sum -= pb;
	stackOut = stackOut.next;
	yi += width;
}
}
context.putImageData( imageData,top_x,top_y );
}
function BlurStack(){
	this.r = 0;
	this.g = 0;
	this.b = 0;
	this.a = 0;
	this.next = null;
}

JS代码(scroll.js):

/* RollBar - jQuery ScrollBar Plugin ----------------------------------------------- @author flGravity @created 4/4/12 @version 1.5 @site http://codecanyon.net/user/flGravity*/
(function($){
	function RollBar(c,s){
	this.container=$(c);
	this.settings=s;
	this.timer=0;
	this.before={
	'v':0,'h':0}
;
	this.touch={
}
;
	this.pressed=0;
	this.vslider=$('<div/>',{
	'class':'rollbar-handle'}
);
	this.vpath=$('<div/>',{
	'class':'rollbar-path-vertical'}
);
	this.hslider=$('<div/>',{
	'class':'rollbar-handle'}
);
	this.hpath=$('<div/>',{
	'class':'rollbar-path-horizontal'}
);
	this.sliders=this.vslider.add(this.hslider);
	this.container.css({
	'position':'relative','overflow':'hidden'}
).contents().filter(this.settings.contentFilter).wrapAll('<div class="rollbar-content"></div>');
	this.content=this.container.children('.rollbar-content').css({
	'position':'relative','top':0,'left':0,'overflow':'hidden'}
);
	if(this.settings.scroll=='horizontal'){
	this.container.prepend(this.hpath.append(this.hslider))}
else if(this.settings.scroll=='vertical'){
	this.container.prepend(this.vpath.append(this.vslider))}
else{
	this.container.prepend(this.vpath.append(this.vslider),this.hpath.append(this.hslider))}
this.vpath.add(this.hpath).css({
	'z-index':this.settings.zIndex,'display':'none'}
);
	this.vslider.css({
	'height':this.settings.sliderSize,'opacity':this.settings.sliderOpacity}
);
	this.hslider.css({
	'width':this.settings.sliderSize,'opacity':this.settings.sliderOpacity}
);
	if(this.settings.sliderOpacity){
	this.sliders.hover(this.fixFn(function(){
	this.sliders.stop().fadeTo(this.settings.sliderOpacityTime,1)}
),this.fixFn(function(){
	if(!this.pressed){
	this.sliders.stop().fadeTo(this.settings.sliderOpacityTime,this.settings.sliderOpacity)}
}
))}
this.init();
	this.pathSize();
	this.bindEvent($(window),'load',function(){
	setTimeout(this.fixFn(this.checkScroll),10)}
);
	if(this.settings.lazyCheckScroll>0){
	setInterval(this.fixFn(function(){
	this.checkScroll();
	this.pathSize()}
),this.settings.lazyCheckScroll)}
}
RollBar.prototype.checkScroll=function(){
	this.vtrack=this.vpath.height()-this.vslider.height();
	this.htrack=this.hpath.width()-this.hslider.width();
	this.vdiff=this.content.height()-this.container.height();
	this.hdiff=this.content.width()-this.container.width();
	if(!this.settings.autoHide)return;
	if(this.vdiff>0){
	this.vpath.fadeIn(this.settings.autoHideTime)}
else{
	this.vpath.fadeOut(this.settings.autoHideTime)}
if(this.hdiff>0){
	this.hpath.fadeIn(this.settings.autoHideTime)}
else{
	this.hpath.fadeOut(this.settings.autoHideTime)}
}
;
	RollBar.prototype.pathSize=function(){
	var a=parseInt(this.settings.pathPadding,10);
	this.vpath.css({
	'top':a+'px','height':this.container.height()-2*a+'px'}
);
	this.hpath.css({
	'left':a+'px','width':this.container.width()-2*a+'px'}
)}
;
	RollBar.prototype.scroll=function(v,h,e){
	var a=0;
	var b=0;
	if(v<0){
	v=0}
if(v>this.vtrack){
	v=this.vtrack}
this.vslider.css('top',v+'px');
	if(h<0){
	h=0}
if(h>this.htrack){
	h=this.htrack}
this.hslider.css('left',h+'px');
	if(this.vdiff>0){
	b=v/this.vtrack;
	this.content.css('top',Math.round(-this.vdiff*b));
	if(e&&(v&&v!=this.vtrack)){
	e.stopPropagation();
	e.preventDefault()}
}
if(this.hdiff>0){
	a=h/this.htrack;
	this.content.css('left',Math.round(-this.hdiff*a));
	if(e&&(h&&h!=this.htrack)){
	e.stopPropagation();
	e.preventDefault()}
}
if(this.before.v!=b||this.before.h!=a){
	if(typeof this.settings.onscroll=='function'){
	this.settings.onscroll.call(this.container.get(0),b,a)}
this.before.v=b;
	this.before.h=a}
}
;
	RollBar.prototype.easeScroll=function(v,h){
	var n=0;
	var a=Math.floor(this.settings.scrollTime/this.settings.scrollInterval);
	var b=this.vslider.position().top;
	var c=this.hslider.position().left;
	var d=$.easing[this.settings.scrollEasing]||$.easing.linear;
	this.sliders.stop().fadeTo(this.settings.sliderOpacityTime,1);
	window.clearInterval(this.timer);
	this.timer=window.setInterval(this.fixFn(function(){
	this.scroll(b+d(n/a,n,0,1,a)*v,c+d(n/a,n,0,1,a)*h);
	if(++n>a){
	window.clearInterval(this.timer);
	this.sliders.stop().fadeTo(this.settings.sliderOpacityTime,this.settings.sliderOpacity)}
}
),this.settings.scrollInterval)}
;
	RollBar.prototype.fixFn=function(f,s){
	var a=this;
	return function(){
	f.apply(s||a,Array.prototype.slice.call(arguments))}
}
;
	RollBar.prototype.bindEvent=function(t,e,f,s){
	return t.bind(e,this.fixFn(f,s))}
;
	RollBar.prototype.init=function(){
	var f=$(window.document);
	this.bindEvent(this.sliders,'mousedown',function(e){
	this.pressed=(e.target===this.vslider.get(0))?1:2;
	var a=e.pageX;
	var b=e.pageY;
	var c=this.vslider.position().top;
	var d=this.hslider.position().left;
	this.bindEvent(f,'mousemove',function(e){
	if(this.pressed==1){
	this.scroll(c+(e.pageY-b),d)}
else{
	this.scroll(c,d+(e.pageX-a))}
}
);
	this.bindEvent(f,'selectstart',function(e){
	e.preventDefault()}
)}
);
	this.bindEvent(f,'mouseup',function(e){
	if(this.pressed==1&&e.target!==this.vslider.get(0)){
	this.vslider.fadeTo(this.settings.sliderOpacityTime,this.settings.sliderOpacity)}
else if(this.pressed==2&&e.target!==this.hslider.get(0)){
	this.hslider.fadeTo(this.settings.sliderOpacityTime,this.settings.sliderOpacity)}
this.pressed=0;
	f.unbind('mousemove');
	f.unbind('selectstart')}
);
	this.bindEvent(this.container,'touchstart',function(e){
	var a=e.originalEvent;
	var b=a.changedTouches[0];
	this.touch.sx=b.pageX;
	this.touch.sy=b.pageY;
	this.touch.sv=this.vslider.position().top;
	this.touch.sh=this.hslider.position().left;
	this.sliders.stop().fadeTo(this.settings.sliderOpacityTime,1);
	if(this.settings.blockGlobalScroll&&(this.vdiff||this.hdiff)){
	a.stopPropagation()}
}
);
	this.bindEvent(this.container,'touchmove',function(e){
	var a=e.originalEvent;
	var b=a.targetTouches[0];
	this.scroll(this.touch.sv+(this.touch.sy-b.pageY)*this.settings.touchSpeed,this.touch.sh+(this.touch.sx-b.pageX)*this.settings.touchSpeed,e);
	if(this.settings.blockGlobalScroll&&(this.vdiff||this.hdiff)){
	a.preventDefault();
	a.stopPropagation()}
}
);
	this.bindEvent(this.container,'touchend touchcancel',function(e){
	var a=e.originalEvent;
	var b=a.changedTouches[0];
	this.sliders.stop().fadeTo(this.settings.sliderOpacityTime,this.settings.sliderOpacity);
	if(this.settings.blockGlobalScroll&&(this.vdiff||this.hdiff)){
	a.stopPropagation()}
}
);
	var g=this.vpath.height(),htrack=this.hpath.width();
	this.bindEvent($(window),'resize',function(){
	this.pathSize();
	this.checkScroll();
	if(this.vdiff<=0){
	this.content.css('top',0)}
if(this.hdiff<=0){
	this.content.css('left',0)}
this.scroll(Math.round(parseInt(this.vslider.css('top'),10)*this.vpath.height()/g),Math.round(parseInt(this.hslider.css('left'),10)*this.hpath.width()/htrack));
	g=this.vpath.height();
	htrack=this.hpath.width()}
);
	this.bindEvent(this.container,'mousewheel',function(e,a,b,c){
	var d=e.target.nodeName;
	if(d=='TEXTAREA'||(d=='SELECT'||d=='OPTION')){
	e.stopPropagation();
	return}
this.scroll(this.vslider.position().top-this.settings.wheelSpeed*c,this.hslider.position().left+this.settings.wheelSpeed*b,e);
	this.sliders.stop().fadeTo(this.settings.sliderOpacityTime,1);
	window.clearTimeout(this.timer);
	this.timer=window.setTimeout(this.fixFn(function(){
	this.sliders.stop().fadeTo(this.settings.sliderOpacityTime,this.settings.sliderOpacity)}
),this.settings.sliderOpacityDelay);
	if(this.settings.blockGlobalScroll&&(this.vdiff||this.hdiff)){
	e.preventDefault();
	e.stopPropagation()}
}
);
	this.bindEvent(f,'keydown',function(e){
	var a=0,vkey=0;
	vkey=(e.keyCode==38)?-this.settings.keyScroll:vkey;
	vkey=(e.keyCode==40)?this.settings.keyScroll:vkey;
	a=(e.keyCode==37)?-this.settings.keyScroll:a;
	a=(e.keyCode==39)?this.settings.keyScroll:a;
	if(vkey||a){
	this.easeScroll(vkey,a)}
}
);
	this.bindEvent(this.container,"dragstart",function(e){
	e.preventDefault()}
);
	this.bindEvent(this.container,'rollbar',function(e,v,h,a){
	e.stopPropagation();
	if(v==='reset'){
	this.container.find('.rollbar-content,.rollbar-handle').css({
	top:0,left:0}
);
	return}
v=v||0;
	h=h||0;
	if(/^[-\d\.]+$/.test(v)){
	v=parseFloat(v);
	if(Math.abs(v)<=1&&!a){
	v*=this.vtrack}
else{
	v=v+v*(this.vtrack/this.vdiff-1)}
}
if(/^[-\d\.]+$/.test(h)){
	h=parseFloat(h);
	if(Math.abs(h)<=1&&!a){
	h*=this.htrack}
else{
	h=h+h*(this.htrack/this.hdiff-1)}
}
this.easeScroll(v,h)}
)}
;
	$.fn.rollbar=function(s){
	var a={
	scroll:'both',autoHide:true,autoHideTime:'fast',lazyCheckScroll:1000,blockGlobalScroll:false,contentFilter:'*',sliderSize:'30%',sliderOpacity:0.5,sliderOpacityTime:200,sliderOpacityDelay:1000,wheelSpeed:20,touchSpeed:0.3,pathPadding:'5px',keyScroll:100,scrollTime:500,scrollInterval:15,scrollEasing:'swing',zIndex:100,onscroll:function(){
}
}
;
	$.extend(a,s);
	return this.each(function(){
	new RollBar(this,a)}
)}
}
)(jQuery);

JS代码(xiami.js):

$(window).load(function(){
	//loadBG();
	fPlay();
}
);
	$(function(){
	//setTimeout("fPlay()",500);
	/*歌曲列表效果*/
$(".songList").hover(function(){
	$(this).find(".more").show();
	$(this).find(".dele").show();
}
,function(){
	$(this).find(".more").hide();
	$(this).find(".dele").hide();
}
);
	/*自定义滚动条*/
$(".songUL").rollbar({
	zIndex:80}
);
	//$("#lyr").rollbar({
	zIndex:80}
);
	/*复选框*/
$(".checkIn").click(function(){
	var s=$(this).attr("select");
	if (s==0){
	$(this).css("background-position","-37px -710px");
	$(this).attr("select","1");
}
;
	if (s==1){
	$(this).css("background-position","");
	$(this).attr("select","0");
}
;
}
);
	$(".checkAll").click(function(){
	var s=$(this).attr("select");
	if (s==0){
	$(this).css("background-position","-37px -710px");
	$(".checkIn[select='0']").css("background-position","-37px -710px");
	$(".checkIn[select='0']").attr("select","1");
	$(this).attr("select","1");
}
;
	if (s==1){
	$(this).css("background-position","");
	$(".checkIn[select='1']").css("background-position","");
	$(".checkIn[select='1']").attr("select","0");
	$(this).attr("select","0");
}
;
}
);
	/*点击列表播放按钮*/
$(".start em").click(function(){
	/*开始放歌*/
var sid=$(this).attr("sonN");
	songIndex=sid;
	$("#audio").attr("src",'songs/'+sid+'.mp3');
	audio=document.getElementById("audio");
	//获得音频元素/*显示歌曲总长度*/
if(audio.paused){
	audio.play();
}
elseaudio.pause();
	audio.addEventListener('timeupdate',updateProgress,false);
	audio.addEventListener('play',audioPlay,false);
	audio.addEventListener('pause',audioPause,false);
	audio.addEventListener('ended',audioEnded,false);
	/*播放歌词*/
getReady(sid);
	//准备播放mPlay();
	//显示歌词//对audio元素监听pause事件/*外观改变*/
var html="";
	html+='<div class="manyou">';
	html+='<a href="#" class="manyouA">漫游相似歌曲</a>';
	html+='</div>';
	$(".start em").css({
	"background":"","color":""}
);
	$(".manyou").remove();
	$(".songList").css("background-color","#f5f5f5");
	$(this).css({
	"background":'url("css/images/T1X4JEFq8qXXXaYEA_-11-12.gif") no-repeat',"color":"transparent"}
);
	$(this).parent().parent().parent().append(html);
	$(this).parent().parent().parent().css("background-color","#f0f0f0");
	/*底部显示歌曲信息*/
var songName=$(this).parent().parent().find(".colsn").html();
	var singerName =$(this).parent().parent().find(".colcn").html();
	$(".songName").html(songName);
	$(".songPlayer").html(singerName);
	/*换右侧图片*/
$("#canvas1").attr("src",'images/'+sid+'.jpg');
	$("#canvas1").load(function(){
	loadBG();
}
);
	//setTimeout('loadBG()',100);
	$(".blur").css("opacity","0");
	$(".blur").animate({
	opacity:"1"}
,1000);
}
);
	/*双击播放*/
$(".songList").dblclick(function(){
	var sid = $(this).find(".start em").html();
	$(".start em[sonN="+sid+"]").click();
}
);
	/*底部进度条控制*/
$( ".dian" ).draggable({
	containment:".pro2",drag:function(){
	var l=$(".dian").css("left");
	var le = parseInt(l);
	audio.currentTime = audio.duration*(le/678);
}
}
);
	/*音量控制*/
$( ".dian2" ).draggable({
	containment:".volControl",drag:function(){
	var l=$(".dian2").css("left");
	var le = parseInt(l);
	audio.volume=(le/80);
}
}
);
	/*底部播放按钮*/
$(".playBtn").click(function(){
	var p = $(this).attr("isplay");
	if (p==0){
	$(this).css("background-position","0 -30px");
	$(this).attr("isplay","1");
}
;
	if (p==1){
	$(this).css("background-position","");
	$(this).attr("isplay","0");
}
;
	if(audio.paused)audio.play();
	elseaudio.pause();
}
);
	$(".mode").click(function(){
	// var t = calcTime(Math.floor(audio.currentTime))+'/'+calcTime(Math.floor(audio.duration));
	// //alert(t);
	// var p =Math.floor(audio.currentTime)/Math.floor(audio.duration);
	// alert(p);
	//alert(lytext[1]);
}
);
	/*切歌*/
$(".prevBtn").click(function(){
	var sid = parseInt(songIndex)-1;
	$(".start em[sonN="+sid+"]").click();
}
);
	$(".nextBtn").click(function(){
	var sid = parseInt(songIndex)+1;
	$(".start em[sonN="+sid+"]").click();
}
);
}
);
	/*首尾模糊效果*/
function loadBG(){
	//alert();
	// stackBlurImage('canvas1','canvas',60,false);
	var c=document.getElementById("canvas");
	var ctx=c.getContext("2d");
	var img=document.getElementById("canvas1");
	ctx.drawImage(img,45,45,139,115,0,0,1366,700);
	stackBlurCanvasRGBA('canvas',0,0,1366,700,60);
}
function calcTime(time){
	var hour;
	var minute;
	var second;
	hour = String ( parseInt ( time / 3600,10 ));
	if (hour.length ==1 ) hour='0'+hour;
	minute=String(parseInt((time%3600)/60,10));
	if(minute.length==1) minute='0'+minute;
	second=String(parseInt(time%60,10));
	if(second.length==1)second='0'+second;
	return minute+":"+second;
}
function updateProgress(ev){
	/*显示歌曲总长度*/
var songTime = calcTime(Math.floor(audio.duration));
	$(".duration").html(songTime);
	/*显示歌曲当前时间*/
var curTime = calcTime(Math.floor(audio.currentTime));
	$(".position").html(curTime);
	/*进度条*/
var lef = 678*(Math.floor(audio.currentTime)/Math.floor(audio.duration));
	var llef = Math.floor(lef).toString()+"px";
	$(".dian").css("left",llef);
}
function audioPlay(ev){
	$(".iplay").css("background",'url("css/images/T1oHFEFwGeXXXYdLba-18-18.gif") 0 0');
	$(".playBtn").css("background-position","0 -30px");
	$(".playBtn").attr("isplay","1");
}
function audioPause(ev){
	$(".iplay").css("background","");
	// $(".start em").css({
	//"background":'url("css/images/pause.png") no-repeat 50% 50%',//"color":"transparent"//}
);
}
function audioEnded(ev){
	var sid = parseInt(songIndex)+1;
	$(".start em[sonN="+sid+"]").click();
}
/*显示歌词部分*/
var scrollt=0;
	var tflag=0;
	//存放时间和歌词的数组的下标var lytext=new Array();
	//放存汉字的歌词var lytime=new Array();
	//存放时间var delay=10;
	var line=0;
	var scrollh=0;
	var songIndex=2;
	function getLy(s)//取得歌词{
	var ly="";
	if (s=="2"){
	ly="[00:00] 漂洋过海来看你.[00:02] 演唱：刘明湘.[00:04] 词曲：李宗盛.[00:08] 歌词编辑：丁仔.[00:15] 中文歌词库 www.dingzai.com.[00:21] 为你我用了半年的积蓄.[00:24] 飘洋过海的来看你.[00:29] 为了这次相聚.[00:31] 我连见面时的呼吸 都曾反复练习.[00:36] .[00:38] 言语从来没能将我的情意.[00:42] 表达千万分之一.[00:47] 为了这个遗憾 我在夜里想了又想.[00:51] 不肯睡去.[00:54] .[00:55] 记忆它总是慢慢的累积.[00:59] 在我心中无法抹去.[01:04] 为了你的承诺.[01:05] 我在最绝望的时候 都忍着不哭泣.[01:13] .[01:14] 陌生的城市啊 熟悉的角落里.[01:23] 也曾彼此安慰 也曾相拥叹息.[01:26] 不管将会面对什么样的结局.[01:30] .[01:31] 在漫天风沙里望着你远去.[01:35] 我竟悲伤的不能自已.[01:39] 多盼能送君千里 直到山穷水尽.[01:44] 一生和你相依.[01:49] .[02:07] 陌生的城市啊 熟悉的角落里.[02:15] 也曾彼此安慰 也曾相拥叹息.[02:19] 不管将会面对什么样的结局.[02:23] .[02:23] 在漫天风沙里望着你远去.[02:27] 我竟悲伤的不能自已.[02:32] 多盼能送君千里 直到山穷水尽.[02:36] 一生和你相依.[02:42] .[02:43] 多盼能送君千里 直到山穷水尽.[02:50] 一生和你相依";
}
;
	if (s=="1"){
	ly="[00:00]盛夏光年（live）.[00:03]作词：阿信·五月天.[00:04]作曲：阿信·五月天.[00:05]演唱：陈冰.[00:12].[00:14]我骄傲的破坏.[00:17]我痛恨的平凡.[00:19]才想起那些是我最爱.[00:23].[00:24]让盛夏去贪玩.[00:27]把残酷的未来.[00:29]狂放到光年外.[00:34].[00:34]放弃规则 放纵去爱.[00:39]放肆自己 放空未来.[00:44]我不转弯 我不转弯.[00:49]我不转弯 我不转弯.[00:56].[01:14]我要我疯 我要我爱 就是.[01:17]我要我疯 我要我爱.[01:19]一万首的mp3 一万次疯狂的爱.[01:21]灭不了一个渺小的孤单.[01:24].[01:25]我要我疯 我要我爱 就是.[01:27]我要我疯 我要我爱.[01:29]盛夏的一场狂欢 来到了光年之外.[01:32]长大难道是人必经的溃烂.[01:35].[01:36]放弃规则 放纵去爱.[01:40]放肆自己 放空未来.[01:45]我不转弯 我不转弯.[01:50]我不转弯 我不转弯.[01:58].[02:05]我不转弯.[02:15]我不转弯我不 我不转弯我不 我不转弯.[02:25]我不转弯.[02:36]";
}
;
	if(s>2){
	ly="[00:00] .[00:02]纯音乐暂无歌词"}
;
	return ly;
}
function show(t)//显示歌词{
	var div1=document.getElementById("lyr");
	//取得层document.getElementById("lyr").innerHTML=" ";
	//每次调用清空以前的一次if(t<lytime[lytime.length-1])//先舍弃数组的最后一个{
	for(var k=0;
	k<lytext.length;
	k++){
	if(lytime[k]<=t&&t<lytime[k+1]){
	scrollh=k*25;
	//让当前的滚动条的顶部改变一行的高度div1.innerHTML+="<font color=#f60 style=font-weight:bold>"+lytext[k]+"</font><br>";
}
else if(t<lytime[lytime.length-1])//数组的最后一个要舍弃div1.innerHTML+=lytext[k]+"<br>";
}
}
else//加上数组的最后一个{
	for(var j=0;
	j<lytext.length-1;
	j++) div1.innerHTML+=lytext[j]+"<br>";
	div1.innerHTML+="<font color=red style=font-weight:bold>"+lytext[lytext.length-1]+"</font><br>";
}
}
function scrollBar()//设置滚动条的滚动{
	if(document.getElementById("lyr").scrollTop<=scrollh) document.getElementById("lyr").scrollTop+=1;
	if(document.getElementById("lyr").scrollTop>=scrollh+50) document.getElementById("lyr").scrollTop-=1;
	window.setTimeout("scrollBar()",delay);
}
function getReady(s)//在显示歌词前做好准备工作{
	var ly=getLy(s);
	//得到歌词//alert(ly);
	// lytext.length=0;
	// lytime.length=0;
	// lytext = new Array();
	// lytime = new Array();
	if (ly==""){
	$("#lry").html("本歌暂无歌词！");
}
;
	var arrly=ly.split(".");
	//转化成数组//alert(arrly[1]);
	tflag=0;
	for( var i=0;
	i<lytext.length;
	i++){
	lytext[i]="";
}
for( var i=0;
	i<lytime.length;
	i++){
	lytime[i]="";
}
$("#lry").html(" ");
	document.getElementById("lyr").scrollTop=0;
	for(var i=0;
	i<arrly.length;
	i++)sToArray(arrly[i]);
	// alert(lytext[2]);
	// alert(lytime[2]);
	sortAr();
	//$("#lyr").html("");
	// for(var j=0;
	j<lytext.length;
	j++) //{
	// document.getElementById("lyr").innerHTML+=lytime[j]+lytext[j]+"<br>";
	//}
scrollBar();
}
function sToArray(str)//解析如“[02:02][00:24]没想到是你”的字符串前放入数组{
	var left=0;
	//"["的个数 var leftAr=new Array();
	for(var k=0;
	k<str.length;
	k++){
	if(str.charAt(k)=="["){
	leftAr[left]=k;
	left++;
}
}
if(left!=0){
	for(var i=0;
	i<leftAr.length;
	i++){
	lytext[tflag]=str.substring(str.lastIndexOf("]")+1);
	//放歌词 lytime[tflag]=conSeconds(str.substring(leftAr[i]+1,leftAr[i]+6));
	//放时间 tflag++;
}
}
//alert(str.substring(leftAr[0]+1,leftAr[0]+6));
}
function sortAr()//按时间重新排序时间和歌词的数组{
	var temp=null;
	var temp1=null;
	for(var k=0;
	k<lytime.length;
	k++){
	for(var j=0;
	j<lytime.length-k;
	j++){
	if(lytime[j]>lytime[j+1]){
	temp=lytime[j];
	temp1=lytext[j];
	lytime[j]=lytime[j+1];
	lytext[j]=lytext[j+1];
	lytime[j+1]=temp;
	lytext[j+1]=temp1;
}
}
}
}
function conSeconds(t)//把形如：01：25的时间转化成秒；{
	var m=t.substring(0,t.indexOf(":"));
	var s=t.substring(t.indexOf(":")+1);
	m=parseInt(m.replace(/0/,""));
	//if(isNaN(s)) s=0;
	var totalt=parseInt(m)*60+parseInt(s);
	//alert // (parseInt(s.replace(//b(0+)/gi,"")));
	//if(isNaN(totalt)) return 0;
	return totalt;
}
// function getSeconds()//得到当前播放器播放位置的时间//{
	var t=getPosition();
	t=t.toString();
	//数字转换成字符串// var s=t.substring(0,t.lastIndexOf("."));
	//得到当前的秒// //alert(s);
	// return s;
	//}
// function getPosition()//返回当前播放的时间位置//{
	var mm=document.getElementById("MediaPlayer1");
	// //var mmt=;
	// //alert(mmt);
	// return mm.CurrentPosition;
	//}
function mPlay()//开始播放{
	// var ms=parseInt(getSeconds());
	// if(isNaN(ms)) show(0);
	// else show(ms);
	var ms =audio.currentTime;
	show(ms);
	window.setTimeout("mPlay()",100)}
function fPlay(){
	$(".start em[sonN="+songIndex+"]").click();
}
// window.setTimeout("mPlay()",100);
	// window.setTimeout("getReady()",100);
	// function test()//测试使用，//{
	//alert(lytime[lytime.length-1]);
	//}
// [00:00]漂洋过海来看你 .[00:04]演唱：刘明湘 .[00:08]作词：李宗盛 .[00:12]作曲：李宗盛 .[00:18]为你 我用了半年的积蓄 .[00:21]飘洋过海的来看你 .[00:26]为了这次相聚 .[00:28]我连见面时的呼吸 都曾反复练习 .[00:33] .[00:35]言语从来没能将我的情意 .[00:38]表达千万分之一 .[00:43]为了这个遗憾 我在夜里想了又想 .[00:48]不肯睡去 .[00:51] .[00:52]记忆它总是慢慢的累积 .[00:56]在我心中无法抹去 .[01:00]为了你的承诺 .[01:02]我在最绝望的时候 都忍着不哭泣 .[01:08] .[01:11]陌生的城市啊 熟悉的角落里 .[01:19]也曾彼此安慰 也曾相拥叹息 .[01:23]不管将会面对什么样的结局 .[01:27] .[01:28]在漫天风沙里望着你远去 .[01:31]我竟悲伤的不能自已 .[01:36]多盼能送君千里 直到山穷水尽 .[01:40]一生和你相依 .[01:44] .[02:03]陌生的城市啊 熟悉的角落里 .[02:12]也曾彼此安慰 也曾相拥叹息 .[02:16]不管将会面对什么样的结局 .[02:20] .[02:20]在漫天风沙里望着你远去 .[02:24]我竟悲伤的不能自已 .[02:28]多盼能送君千里 直到山穷水尽 .[02:33]一生和你相依 .[02:36] .[02:39]多盼能送君千里 直到山穷水尽 .[02:47]一生和你相依 .[02:55]//[00:00] 漂洋过海来看你.[00:02] 演唱：刘明湘.[00:04] 词曲：李宗盛.[00:08] 歌词编辑：丁仔.[00:15] 中文歌词库 www.dingzai.com.[00:21] 为你我用了半年的积蓄.[00:24] 飘洋过海的来看你.[00:29] 为了这次相聚.[00:31] 我连见面时的呼吸 都曾反复练习.[00:36] .[00:38] 言语从来没能将我的情意.[00:42] 表达千万分之一.[00:47] 为了这个遗憾 我在夜里想了又想.[00:51] 不肯睡去.[00:54] .[00:55] 记忆它总是慢慢的累积.[00:59] 在我心中无法抹去.[01:04] 为了你的承诺.[01:05] 我在最绝望的时候 都忍着不哭泣.[01:13] .[01:14] 陌生的城市啊 熟悉的角落里.[01:23] 也曾彼此安慰 也曾相拥叹息.[01:26] 不管将会面对什么样的结局.[01:30] .[01:31] 在漫天风沙里望着你远去.[01:35] 我竟悲伤的不能自已.[01:39] 多盼能送君千里 直到山穷水尽.[01:44] 一生和你相依.[01:49] .[02:07] 陌生的城市啊 熟悉的角落里.[02:15] 也曾彼此安慰 也曾相拥叹息.[02:19] 不管将会面对什么样的结局.[02:23] .[02:23] 在漫天风沙里望着你远去.[02:27] 我竟悲伤的不能自已.[02:32] 多盼能送君千里 直到山穷水尽.[02:36] 一生和你相依.[02:42] .[02:43] 多盼能送君千里 直到山穷水尽.[02:50] 一生和你相依//[00:00]盛夏光年（live）.[00:03]作词：阿信·五月天.[00:04]作曲：阿信·五月天.[00:05]演唱：陈冰.[00:12].[00:14]我骄傲的破坏.[00:17]我痛恨的平凡.[00:19]才想起那些是我最爱.[00:23].[00:24]让盛夏去贪玩.[00:27]把残酷的未来.[00:29]狂放到光年外.[00:34].[00:34]放弃规则 放纵去爱.[00:39]放肆自己 放空未来.[00:44]我不转弯 我不转弯.[00:49]我不转弯 我不转弯.[00:56].[01:14]我要我疯 我要我爱 就是.[01:17]我要我疯 我要我爱.[01:19]一万首的mp3 一万次疯狂的爱.[01:21]灭不了一个渺小的孤单.[01:24].[01:25]我要我疯 我要我爱 就是.[01:27]我要我疯 我要我爱.[01:29]盛夏的一场狂欢 来到了光年之外.[01:32]长大难道是人必经的溃烂.[01:35].[01:36]放弃规则 放纵去爱.[01:40]放肆自己 放空未来.[01:45]我不转弯 我不转弯.[01:50]我不转弯 我不转弯.[01:58].[02:05]我不转弯.[02:15]我不转弯我不 我不转弯我不 我不转弯.[02:25]我不转弯.[02:36]

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