<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" />
<title>audioplayer.js 超好用的H5音乐播放器</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<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 rel="canonical" href="/examples/audio-player-responsive-and-touch-friendly"> <link rel="icon" href="/theme/img/favicon.ico" /> <link rel="stylesheet" href="css/_reset.css" /> <link rel="stylesheet" href="css/main.css" /> <link rel="stylesheet" href="css/css?family=Advent+Pro"> <style> 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 */ background-color: #222; cursor: pointer; z-index: 1; top: 50%; right: 6.875em; /* 110 */ left: 6.875em; /* 110 */ margin-top: -0.438em; /* 7 */ } .audioplayer-novolume .audioplayer-bar { right: 4.375em; /* 70 */ } .audioplayer-bar div { width: 0; height: 100%; position: absolute; left: 0; top: 0; } .audioplayer-bar-loaded { background-color: #333; z-index: 1; } .audioplayer-bar-played { background: #007fd1; z-index: 2; } /* volume button */ .audioplayer-volume { width: 2.5em; /* 40 */ height: 100%; border-left: 1px solid #111; border-left-color: rgba( 0, 0, 0, .25 ); text-align: left; text-indent: -9999px; cursor: pointer; z-index: 2; top: 0; right: 0; } .audioplayer-volume:hover, .audioplayer-volume:focus { background-color: #222; } .audioplayer-volume-button { width: 100%; height: 100%; } .audioplayer-volume-button a { width: 0.313em; /* 5 */ height: 0.375em; /* 6 */ background-color: #fff; display: block; position: relative; z-index: 1; top: 40%; left: 35%; } .audioplayer-volume-button a:before, .audioplayer-volume-button a:after { content: ''; position: absolute; } .audioplayer-volume-button a:before { width: 0; height: 0; border: 0.5em solid transparent; /* 8 */ border-left: none; border-right-color: #fff; z-index: 2; top: 50%; right: -0.25em; margin-top: -0.5em; /* 8 */ } .audioplayer:not(.audioplayer-muted) .audioplayer-volume-button a:after { /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */ width: 0.313em; /* 5 */ height: 0.313em; /* 5 */ border: 0.25em double #fff; /* 4 */ border-width: 0.25em 0.25em 0 0; /* 4 */ left: 0.563em; /* 9 */ top: -0.063em; /* 1 */ -webkit-border-radius: 0 0.938em 0 0; /* 15 */ -moz-border-radius: 0 0.938em 0 0; /* 15 */ border-radius: 0 0.938em 0 0; /* 15 */ -webkit-transform: rotate( 45deg ); -moz-transform: rotate( 45deg ); -ms-transform: rotate( 45deg ); -o-transform: rotate( 45deg ); transform: rotate( 45deg ); } /* volume dropdown */ .audioplayer-volume-adjust { height: 6.25em; /* 100 */ cursor: default; position: absolute; left: 0; right: -1px; top: -9999px; background: #333; } .audioplayer-volume:not(:hover) .audioplayer-volume-adjust { opacity: 0; } .audioplayer-volume:hover .audioplayer-volume-adjust { top: auto; bottom: 100%; } .audioplayer-volume-adjust > div { width: 40%; height: 80%; background-color: #222; cursor: pointer; position: relative; z-index: 1; margin: 30% auto 0; } .audioplayer-volume-adjust div div { width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: #007fd1; } .audioplayer-novolume .audioplayer-volume { display: none; } /* CSS3 decorations */ body { -webkit-box-shadow: inset 0 0 18.75em rgba( 0, 0, 0, .5 ); /* 300 */ -moz-box-shadow: inset 0 0 18.75em rgba( 0, 0,
没有合适的资源?快使用搜索试试~ 我知道了~
html5结合audioplayer.js插件实现的响应式触摸音频播放器特效源码.zip
共9个文件
css:3个
js:2个
html:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 130 浏览量
2022-11-04
23:37:35
上传
评论
收藏 602KB ZIP 举报
温馨提示
html5结合audioplayer.js插件实现的响应式触摸音频播放器特效源码.zip
资源推荐
资源详情
资源评论
收起资源包目录
html5结合audioplayer.js插件实现的响应式触摸音频播放器特效源码.zip (9个子文件)
132689945293620769
css
_reset.css 4KB
css.css 282B
main.css 5KB
audio.ogg 183KB
index.html 12KB
js
main.js 90KB
audioplayer.js 8KB
audio.mp3 384KB
audio.wav 29KB
共 9 条
- 1
资源评论
毕业_设计
- 粉丝: 1930
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功