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

代码语言：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:.........完整代码请登录后点击上方下载按钮下载查看