audioplayer实现一个响应式且支持触摸操作音频播放器效果代码

代码语言:html

所属分类:多媒体

代码描述:audioplayer实现一个响应式且支持触摸操作音频播放器效果代码

代码标签: 响应 式且 支持 触摸 操作 音频 播放器 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title></title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="description" content="Demo of Audio Player: Responsive and Touch-friendly" />

    <meta name="robots" content="all">

    <meta name="viewport" content="width=device-width,initial-scale=1" />

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>

    
    
    html
    {
    	font-size: 100%;
    }
    
    
    
    body
    {
    	font-family: 'Noticia Text', serif;
    	font-weight: 400;
    
    	-webkit-font-smoothing: antialiased;
    	-moz-osx-font-smoothing: grayscale;
    }
    
    
    
    body,
    a,
    a:hover
    {
    	color: #111;
    }
    
    a
    {
    	-webkit-transition: color .3s ease;
    	-moz-transition: color .3s ease;
    	-ms-transition: color .3s ease;
    	-o-transition: color .3s ease;
    	transition: color .3s ease;
    }
    
    a,
    a:hover
    {
    	text-decoration: none;
    }
    
    
    
    
    /*
    	AD
    */
    
    #ad
    {
    	width: 150px;
    	background-color: #fff;
    	background-color: rgba( 255, 255, 255, .5 );
    	overflow: hidden;
    	position: fixed;
    	z-index: 1000;
    	top: 10px;
    	left: 10px;
    	padding: 10px;
    }
    	#ad.dark
    	{
    		background-color: #111;
    		background-color: rgba( 0, 0, 0, .5 );
    	}
    	#bsap_aplink
    	{
    		width: 100%;
    		font-size: 14px;
    		font-family: 'Cabin Condensed', sans-serif;
    		font-weight: 500;
    		text-transform: uppercase;
    		color: #999;
    		color: rgba( 0, 0, 0, .25 );
    		display: block;
    		margin-bottom: 10px;
    	}
    		#bsap_aplink:hover
    		{
    			color: #111;
    		}
    		#ad.dark #bsap_aplink
    		{
    			color: #555;
    			color: rgba( 255, 255, 255, .25 );
    		}
    			#ad.dark #bsap_aplink:hover
    			{
    				color: #fff;
    			}
    	body .one .bsa_it_ad,
    	body .one .bsa_it_ad *
    	{
    		background-color: transparent !important;
    		position: static !important;
    		z-index: 1 !important;
    	}
    	body .one .bsa_it_ad
    	{
    		font-family: 'Noticia Text', serif;
    		border: none;
    		padding: 0;
    		margin: 0;
    	}
    		body .one .bsa_it_ad .bsa_it_i,
    		body .one .bsa_it_ad .bsa_it_t,
    		body .one .bsa_it_ad .bsa_it_d
    		{
    			width: 100%;
    			display: block;
    			padding: 0;
    			margin: 0;
    		}
    		body .one .bsa_it_ad .bsa_it_t,
    		body .one .bsa_it_ad .bsa_it_d
    		{
    			font-size: 14px;
    			line-height: 1.75;
    			color: #555;
    			color: rgba( 0, 0, 0, .75 );
    		}
    		body .one .bsa_it_ad .bsa_it_i
    		{
    			margin-bottom: 10px;
    		}
    		body .one .bsa_it_ad .bsa_it_t
    		{
    			font-weight: 700;
    		}
    		#ad.dark .bsa_it_ad .bsa_it_t,
    		#ad.dark .bsa_it_ad .bsa_it_d
    		{
    			color: #bbb;
    			color: rgba( 255, 255, 255, .75 );
    		}
    		body .one .bsa_it_p
    		{
    			display: none;
    		}
    
    	#ad-close
    	{
    		width: 10px;
    		height: 10px;
    		text-align: left;
    		text-indent: -9999px;
    		position: absolute;
    		z-index: 1;
    		top: 5px;
    		right: 5px;
    	}
    		#ad-close:before,
    		#ad-close:after
    		{
    			width: 2px;
    			background-color: #666;
    			content: '';
    			position: absolute;
    			top: 0;
    			bottom: 0;
    			left: 50%;
    			margin-left: -1px;
    		}
    		#ad.dark #ad-close:before,
    		#ad.dark #ad-close:after
    		{
    			background-color: #999;
    		}
    		#ad-close:hover:before,
    		#ad-close:hover:after
    		{
    			background-color: #111;
    		}
    		#ad.dark #ad-close:hover:before,
    		#ad.dark #ad-close:hover:after
    		{
    			background-color: #fff;
    		}
    		#ad-close:before
    		{
    			-webkit-transform: rotate( 45deg );
    			-moz-transform: rotate( 45deg );
    			-ms-transform: rotate( 45deg );
    			-o-transform: rotate( 45deg );
    			transform: rotate( 45deg );
    		}
    		#ad-close:after
    		{
    			-webkit-transform: rotate( -45deg );
    			-moz-transform: rotate( -45deg );
    			-ms-transform: rotate( -45deg );
    			-o-transform: rotate( -45deg );
    			transform: rotate( -45deg );
    		}
    
    
    
    /*
    	META
    */
    
    #meta
    {
    	width: 100%;
    	height: 40px;
    	line-height: 1;
    	background-color: #fff;
    	background-color: rgba( 255, 255, 255, .5 );
    	overflow: hidden;
    	position: fixed;
    	z-index: 1001;
    	bottom: 0;
    	left: 0;
    	padding: 10px 20px 0;
    }
    	#meta.dark
    	{
    		background-color: #111;
    		background-color: rgba( 0, 0, 0, .5 );
    	}
    	#meta li
    	{
    		float: right;
    	}
    		#meta li:first-child
    		{
    			float: left;
    		}
    		#meta li:last-child
    		{
    			margin-right: 15px;
    
    			-webkit-transition: opacity .3s ease;
    			-moz-transition: opacity .3s ease;
    			-ms-transition: opacity .3s ease;
    			-o-transition: opacity .3s ease;
    			transition: opacity .3s ease;
    		}
    		#meta:not(:hover) li:last-child
    		{
    			opacity: 0;
    		}
    		#back-to-article
    		{
    			font-family: 'Cabin Condensed', sans-serif;
    			font-weight: 500;
    			text-transform: uppercase;
    			text-decoration: none;
    			color: #111;
    			float: left;
    			position: relative;
    			bottom: -2px;
    		}
    			#back-to-article:before
    			{
    				width: 0;
    				height: 0;
    				display: inline-block;
    				border: 5px solid transparent;
    				border-left: none;
    				border-right-color: #111;
    				border-right-color: rgba( 0, 0, 0, .5 );
    				content: '';
    				margin-right: 5px;
    			}
    				#back-to-article:hover:before
    				{
    					border-right-color: #111;
    				}
    			#meta.dark #back-to-article
    			{
    				color: #fff;
    			}
    				#meta.dark #back-to-article:before
    				{
    					border-right-color: #fff;
    					border-right-color: rgba( 255, 255, 255, .5 );
    				}
    					#meta.dark #back-to-article:hover:before
    					{
    						border-right-color: #fff;
    					}
    
    
    
    /*
    	RESPONSIVENESS
    */
    
    @media screen and (max-width: 40em), screen and (max-height: 40em) /* 640 */
    {
    	#ad,
    	#meta
    	{
    		display: none;
    	}
    }
            html
            
            		{
            
            			height: 100%;
            
            		}
            
            		body
            
            		{
            
            			min-height: 100%;
            
            			font-family: 'Advent Pro', sans-serif;
            
            			font-weight: 500;
            
            			background-color: #c3d5d3;
            
            			padding: 3.75em 1.875em; /* 60 30 */
            
            		}
            
            		strong
            
            		{
            
            			font-weight: 700;
            
            		}
            
            		#wrapper
            
            		{
            
            			width: 30em; /* 480 */
            
            			height: 8.75em; /* 140 */
            
            			position: absolute;
            
            			top: 50%;
            
            			left: 50%;
            
            			margin: -4.375em 0 0 -15em; /* 70 240 */
            
            		}
            
            		h1
            
            		{
            
            			font-family: 'Advent Pro', sans-serif;
            
            			font-size: 1.688em; /* 27 */
            
            			font-weight: 500;
            
            			text-align: center;
            
            			margin-bottom: 0.741em; /* 20 */
            
            		}
            
            			h1,
            
            			h1 a,
            
            			#copyright,
            
            			#copyright a
            
            			{
            
            				color: #fff;
            
            				text-shadow: 1px 1px 0 rgba( 0, 0, 0, .1 );
            
            			}
            
            			h1 a,
            
            			#copyright a
            
            			{
            
            				-webkit-transition: text-shadow .25s ease;
            
            				-moz-transition: text-shadow .25s ease;
            
            				-ms-transition: text-shadow .25s ease;
            
            				-o-transition: text-shadow .25s ease;
            
            				transition: text-shadow .25s ease;
            
            			}
            
            				h1 a:hover,
            
            				h1 a:focus,
            
            				#copyright a:hover,
            
            				#copyright a:focus
            
            				{
            
            					color: #fff;
            
            					text-shadow: 1px 1px 0 rgba( 0, 0, 0, .3 );
            
            				}
            
            			h1 em
            
            			{
            
            				font-family: Baskerville, serif;
            
            			}
            
            
            
            		#copyright
            
            		{
            
            			font-size: 0.875em; /* 14 */
            
            			text-align: center;
            
            			margin-top: 1.429em; /* 20 */
            
            		}
            
            			#copyright a
            
            			{
            
            				font-weight: 700;
            
            			}
            
            
            
            
            
            		/*
            
            			PLAYER
            
            		*/
            
            
            
            		.audioplayer
            
            		{
            
            			height: 2.5em; /* 40 */
            
            			color: #fff;
            
            			text-shadow: 1px 1px 0 #000;
            
            			border: 1px solid #222;
            
            			position: relative;
            
            			z-index: 1;
            
            			background: #333;
            
            		}
            
            
            
            
            
            			/* mini mode (fallback) */
            
            
            
            			.audioplayer-mini
            
            			{
            
            				width: 2.5em; /* 40 */
            
            				margin: 0 auto;
            
            			}
            
            
            
            
            
            			/* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */
            
            
            
            			.audioplayer > div
            
            			{
            
            				position: absolute;
            
            			}
            
            
            
            
            
            			/* play/pause button */
            
            
            
            			.audioplayer-playpause
            
            			{
            
            				width: 2.5em; /* 40 */
            
            				height: 100%;
            
            				text-align: left;
            
            				text-indent: -9999px;
            
            				cursor: pointer;
            
            				z-index: 2;
            
            				top: 0;
            
            				left: 0;
            
            			}
            
            				.audioplayer:not(.audioplayer-mini) .audioplayer-playpause
            
            				{
            
            					border-right: 1px solid #555;
            
            					border-right-color: rgba( 255, 255, 255, .1 );
            
            				}
            
            				.audioplayer-mini .audioplayer-playpause
            
            				{
            
            					width: 100%;
            
            				}
            
            				.audioplayer-playpause:hover,
            
            				.audioplayer-playpause:focus
            
            				{
            
            					background-color: #222;
            
            				}
            
            				.audioplayer-playpause a
            
            				{
            
            					display: block;
            
            				}
            
            				.audioplayer-stopped .audioplayer-playpause a
            
            				{
            
            					width: 0;
            
            					height: 0;
            
            					border: 0.5em solid transparent; /* 8 */
            
            					border-right: none;
            
            					border-left-color: #fff;
            
            					content: '';
            
            					position: absolute;
            
            					top: 50%;
            
            					left: 50%;
            
            					margin: -0.5em 0 0 -0.25em; /* 8 4 */
            
            				}
            
            				.audioplayer-playing .audioplayer-playpause a
            
            				{
            
            					width: 0.75em; /* 12 */
            
            					height: 0.75em; /* 12 */
            
            					position: absolute;
            
            					top: 50%;
            
            					left: 50%;
            
            					margin: -0.375em 0 0 -0.375em; /* 6 */
            
            				}
            
            					.audioplayer-playing .audioplayer-playpause a:before,
            
            					.audioplayer-playing .audioplayer-playpause a:after
            
            					{
            
            						width: 40%;
            
            						height: 100%;
            
            						background-color: #fff;
            
            						content: '';
            
            						position: absolute;
            
            						top: 0;
            
            					}
            
            					.audioplayer-playing .audioplayer-playpause a:before
            
            					{
            
            						left: 0;
            
            					}
            
            					.audioplayer-playing .audioplayer-playpause a:after
            
            					{
            
            						right: 0;
            
            					}
            
            
            
            
            
            			/* timers */
            
            
            
            			.audioplayer-time
            
            			{
            
            				width: 4.375em; /* 70 */
            
            				height: 100%;
            
            				line-height: 2.375em; /* 38 */
            
            				text-align: center;
            
            				z-index: 2;
            
            				top: 0;
            
            			}
            
            				.audioplayer-time-current
            
            				{
            
            					border-left: 1px solid #111;
            
            					border-left-color: rgba( 0, 0, 0, .25 );
            
            					left: 2.5em; /* 40 */
            
            				}
            
            				.audioplayer-time-duration
            
            				{
            
            					border-right: 1px solid #555;
            
            					border-right-color: rgba( 255, 255, 255, .1 );
            
            					right: 2.5em; /* 40 */
            
            				}
            
            					.audioplayer-novolume .audioplayer-time-duration
            
            					{
            
            						border-right: 0;
            
            						right: 0;
            
            					}
            
            
            
            
            
            			/* progress bar of loaded/played */
            
            
            
            			.audioplayer-bar
            
            			{
            
            				height: 0.875em; /* 14 */
            
            				backgrou.........完整代码请登录后点击上方下载按钮下载查看

网友评论0