From 1d62a152cdb8be831bc6278cc5ea5b1847e32aa0 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Mon, 23 Nov 2015 00:05:52 +0800 Subject: [PATCH] use gulp --- .gitignore | 3 +- APlayer.css | 298 --------------------- README.md | 6 + build/APlayer.min.css | 1 + build/APlayer.min.js | 1 + {font => build/font}/aplayer-fontello.eot | Bin {font => build/font}/aplayer-fontello.svg | 0 {font => build/font}/aplayer-fontello.ttf | Bin {font => build/font}/aplayer-fontello.woff | Bin demo/index.html | 4 +- gulpfile.js | 35 +++ package.json | 13 +- APlayer.js => src/APlayer.js | 0 src/APlayer.scss | 280 +++++++++++++++++++ src/font/aplayer-fontello.eot | Bin 0 -> 6556 bytes src/font/aplayer-fontello.svg | 21 ++ src/font/aplayer-fontello.ttf | Bin 0 -> 6388 bytes src/font/aplayer-fontello.woff | Bin 0 -> 3684 bytes 18 files changed, 359 insertions(+), 303 deletions(-) delete mode 100644 APlayer.css create mode 100644 build/APlayer.min.css create mode 100644 build/APlayer.min.js rename {font => build/font}/aplayer-fontello.eot (100%) rename {font => build/font}/aplayer-fontello.svg (100%) rename {font => build/font}/aplayer-fontello.ttf (100%) rename {font => build/font}/aplayer-fontello.woff (100%) create mode 100644 gulpfile.js rename APlayer.js => src/APlayer.js (100%) create mode 100644 src/APlayer.scss create mode 100644 src/font/aplayer-fontello.eot create mode 100644 src/font/aplayer-fontello.svg create mode 100644 src/font/aplayer-fontello.ttf create mode 100644 src/font/aplayer-fontello.woff diff --git a/.gitignore b/.gitignore index 723ef36..2d2b47d 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -.idea \ No newline at end of file +.idea +node_modules \ No newline at end of file diff --git a/APlayer.css b/APlayer.css deleted file mode 100644 index e44f2ad..0000000 --- a/APlayer.css +++ /dev/null @@ -1,298 +0,0 @@ -@font-face { - font-family: 'aplayer-fontello'; - src: url('font/aplayer-fontello.eot?72550380'); - src: url('font/aplayer-fontello.eot?72550380#iefix') format('embedded-opentype'), - url('font/aplayer-fontello.woff?72550380') format('woff'), - url('font/aplayer-fontello.ttf?72550380') format('truetype'), - url('font/aplayer-fontello.svg?72550380#fontello') format('svg'); - font-weight: normal; - font-style: normal; -} - -.aplayer [class^="aplayer-icon-"]:before, [class*=" aplayer-icon-"]:before { - font-family: "aplayer-fontello"; - font-style: normal; - font-weight: normal; - speak: none; - display: inline-block; - text-decoration: inherit; - width: 1em; - text-align: center; - font-variant: normal; - text-transform: none; - line-height: 1em; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.aplayer .aplayer-icon-weibo:before { - content: '\e805'; -} - -.aplayer .aplayer-icon-play:before { - content: '\e806'; -} - -.aplayer .aplayer-icon-pause:before { - content: '\e807'; -} - -.aplayer .aplayer-icon-to-start:before { - content: '\e808'; -} - -.aplayer .aplayer-icon-to-end:before { - content: '\e809'; -} - -.aplayer .aplayer-icon-list:before { - content: '\e80a'; -} - -.aplayer .aplayer-icon-menu:before { - content: '\e80b'; -} - -.aplayer .aplayer-icon-volume-off:before { - content: '\e800'; -} - -.aplayer .aplayer-icon-volume-down:before { - content: '\e801'; -} - -.aplayer .aplayer-icon-volume-up:before { - content: '\e802'; -} - -.aplayer-narrow { - width: 66px; -} - -.aplayer-narrow .aplayer-info { - display: none; -} - -.aplayer { - font-family: Arial, Helvetica, sans-serif; - margin: 5px; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); - border-radius: 2px; - height: 66px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.aplayer span { - cursor: default !important; -} - -.aplayer .aplayer-pic { - position: relative; - float: left; - height: 100%; - width: 66px; -} - -.aplayer .aplayer-pic img { - height: 100%; - width: 100%; - border-radius: 2px 0 0 2px; -} - -.aplayer .aplayer-mask { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.2); -} - -.aplayer .aplayer-button { - position: absolute; - color: #fff; - border-radius: 50%; - opacity: 0.8; - cursor: pointer; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - background: rgba(0, 0, 0, 0.2); -} - -.aplayer .aplayer-button:hover { - opacity: 1; -} - -.aplayer .aplayer-hide { - display: none; -} - -.aplayer .aplayer-play { - width: 26px; - height: 26px; - border: 2px solid #fff; - top: 50%; - left: 50%; - margin: -15px 0 0 -15px; -} - -.aplayer .aplayer-play .aplayer-icon-play { - position: absolute; - top: 2px; - left: 4px; - font-size: 20px; - line-height: 23px; -} - -.aplayer .aplayer-pause { - width: 16px; - height: 16px; - border: 2px solid #fff; - bottom: 4px; - right: 4px; -} - -.aplayer .aplayer-pause .aplayer-icon-pause { - position: absolute; - top: 1px; - left: 2px; - font-size: 12px; - line-height: 14px; -} - -.aplayer .aplayer-info { - margin-left: 66px; - padding: 17px 7px 0 10px; -} - -.aplayer .aplayer-music { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - margin-bottom: 17px; -} - -.aplayer .aplayer-title { - font-size: 14px; -} - -.aplayer .aplayer-author { - font-size: 12px; - color: #666; -} - -.aplayer .aplayer-music a { - margin-right: 7px; - font-size: 14px; - color: #000; -} - -.aplayer .aplayer-music a:hover { - color: #E90F24; -} - -.aplayer .aplayer-controller { - position: relative; -} - -.aplayer .aplayer-bar-wrap { - margin-right: 120px; -} - -.aplayer .aplayer-bar { - position: relative; - height: 2px; - width: 100%; - background: #cdcdcd; - cursor: pointer !important; -} - -.aplayer .aplayer-loaded { - position: absolute; - left: 0; - top: 0; - bottom: 0; - background: #aaa; - height: 2px; - transition: all 0.5s ease; -} - -.aplayer .aplayer-played { - position: absolute; - left: 0; - top: 0; - bottom: 0; - background: #b7daff; - height: 2px; -} - -.aplayer .aplayer-thumb { - position: absolute; - top: 0; - right: 0; - margin-top: -4px; - margin-right: -10px; - height: 8px; - width: 8px; - border: 1px solid #b7daff; - border-radius: 50%; - background: #fff; - cursor: pointer !important; -} - -.aplayer .aplayer-thumb:hover { - background: #b7daff; -} - -.aplayer .aplayer-time { - position: absolute; - right: 0; - bottom: -5px; - height: 17px; - color: #999; - font-size: 11px; -} - -.aplayer .aplayer-time i { - color: #666; - font-size: 15px; -} - -.aplayer .aplayer-volume-wrap { - display: inline-block; - margin-left: 7px; - cursor: pointer !important; -} - -.aplayer .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap { - display: block; -} - -.aplayer .aplayer-volume-bar-wrap { - display: none; - position: absolute; - bottom: 17px; - right: -5px; - width: 25px; - height: 40px; -} - -.aplayer .aplayer-volume-bar { - position: absolute; - bottom: 0; - right: 10px; - width: 5px; - height: 35px; - background: #aaa; -} - -.aplayer .aplayer-volume { - position: absolute; - bottom: 0; - right: 0; - width: 5px; - background: #b7daff; -} \ No newline at end of file diff --git a/README.md b/README.md index ade0a5e..dae58e0 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,12 @@ API + `ap.play()` + `ap.pause()` +Development + +``` +gulp +``` + ## Todo - [x] 播放进度拖拽控制 diff --git a/build/APlayer.min.css b/build/APlayer.min.css new file mode 100644 index 0000000..2fbb1c4 --- /dev/null +++ b/build/APlayer.min.css @@ -0,0 +1 @@ +@font-face{font-family:aplayer-fontello;src:url(font/aplayer-fontello.eot?72550380);src:url(font/aplayer-fontello.eot?72550380#iefix) format("embedded-opentype"),url(font/aplayer-fontello.woff?72550380) format("woff"),url(font/aplayer-fontello.ttf?72550380) format("truetype"),url(font/aplayer-fontello.svg?72550380#fontello) format("svg");font-weight:400;font-style:normal}.aplayer{font-family:Arial,Helvetica,sans-serif;margin:5px;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-webkit-border-radius:2px;border-radius:2px;height:66px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.aplayer [class*=" aplayer-icon-"]:before,.aplayer [class^=aplayer-icon-]:before{font-family:aplayer-fontello;font-style:normal;font-weight:400;display:inline-block;text-decoration:inherit;width:1em;text-align:center;font-variant:normal;text-transform:none;line-height:1em}.aplayer .aplayer-narrow .aplayer-info,.aplayer .aplayer-pic .aplayer-hide{display:none}.aplayer .aplayer-icon-weibo:before{content:'\e805'}.aplayer .aplayer-icon-play:before{content:'\e806'}.aplayer .aplayer-icon-pause:before{content:'\e807'}.aplayer .aplayer-icon-to-start:before{content:'\e808'}.aplayer .aplayer-icon-to-end:before{content:'\e809'}.aplayer .aplayer-icon-list:before{content:'\e80a'}.aplayer .aplayer-icon-menu:before{content:'\e80b'}.aplayer .aplayer-icon-volume-off:before{content:'\e800'}.aplayer .aplayer-icon-volume-down:before{content:'\e801'}.aplayer .aplayer-icon-volume-up:before{content:'\e802'}.aplayer .aplayer-narrow{width:66px}.aplayer span{cursor:default!important}.aplayer .aplayer-pic{position:relative;float:left;height:100%;width:66px}.aplayer .aplayer-pic img{height:100%;width:100%;-webkit-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px}.aplayer .aplayer-pic .aplayer-button{position:absolute;color:#fff;-webkit-border-radius:50%;border-radius:50%;opacity:.8;cursor:pointer;text-shadow:0 1px 1px rgba(0,0,0,.2);-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2);background:rgba(0,0,0,.2)}.aplayer .aplayer-pic .aplayer-button:hover{opacity:1}.aplayer .aplayer-pic .aplayer-play{width:26px;height:26px;border:2px solid #fff;top:50%;left:50%;margin:-15px 0 0 -15px}.aplayer .aplayer-pic .aplayer-play .aplayer-icon-play{position:absolute;top:2px;left:4px;font-size:20px;line-height:23px}.aplayer .aplayer-pic .aplayer-pause{width:16px;height:16px;border:2px solid #fff;bottom:4px;right:4px}.aplayer .aplayer-pic .aplayer-pause .aplayer-icon-pause{position:absolute;top:1px;left:2px;font-size:12px;line-height:14px}.aplayer .aplayer-info{margin-left:66px;padding:17px 7px 0 10px}.aplayer .aplayer-info .aplayer-music{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:17px}.aplayer .aplayer-info .aplayer-music .aplayer-title{font-size:14px}.aplayer .aplayer-info .aplayer-music .aplayer-author{font-size:12px;color:#666}.aplayer .aplayer-info .aplayer-music a{margin-right:7px;font-size:14px;color:#000}.aplayer .aplayer-info .aplayer-music a:hover{color:#E90F24}.aplayer .aplayer-info .aplayer-controller{position:relative}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap{margin-right:120px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar{position:relative;height:2px;width:100%;background:#cdcdcd;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded{position:absolute;left:0;top:0;bottom:0;background:#aaa;height:2px;-webkit-transition:all .5s ease;transition:all .5s ease}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played{position:absolute;left:0;top:0;bottom:0;background:#b7daff;height:2px}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb{position:absolute;top:0;right:0;margin-top:-4px;margin-right:-10px;height:8px;width:8px;border:1px solid #b7daff;-webkit-border-radius:50%;border-radius:50%;background:#fff;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb:hover{background:#b7daff}.aplayer .aplayer-info .aplayer-controller .aplayer-time{position:absolute;right:0;bottom:-5px;height:17px;color:#999;font-size:11px}.aplayer .aplayer-info .aplayer-controller .aplayer-time i{color:#666;font-size:15px}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-volume-wrap{display:inline-block;margin-left:7px;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{display:block}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-volume-wrap .aplayer-volume-bar-wrap{display:none;position:absolute;bottom:17px;right:-5px;width:25px;height:40px}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar{position:absolute;bottom:0;right:10px;width:5px;height:35px;background:#aaa}.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;background:#b7daff} \ No newline at end of file diff --git a/build/APlayer.min.js b/build/APlayer.min.js new file mode 100644 index 0000000..5f324f6 --- /dev/null +++ b/build/APlayer.min.js @@ -0,0 +1 @@ +function APlayer(e){this.option=e}APlayer.prototype.init=function(){function e(e){var a=e||window.event,i=(a.clientX-t(l.bar))/s;i=i>0?i:0,i=1>i?i:1,l.updateBar.call(l,"played",i,"width"),l.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=l.secondToTime(i*l.audio.duration)}function a(){document.removeEventListener("mouseup",a),document.removeEventListener("mousemove",e),l.audio.currentTime=parseFloat(l.playedBar.style.width)/100*l.audio.duration,l.playedTime=setInterval(function(){l.updateBar.call(l,"played",l.audio.currentTime/l.audio.duration,"width"),l.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=l.secondToTime(l.audio.currentTime)},100)}function t(e){for(var a,t=e.offsetLeft,i=e.offsetParent;null!==i;)t+=i.offsetLeft,i=i.offsetParent;return a=document.body.scrollLeft+document.documentElement.scrollLeft,t-a}function i(e){for(var a,t=e.offsetTop,i=e.offsetParent;null!==i;)t+=i.offsetTop,i=i.offsetParent;return a=document.body.scrollTop+document.documentElement.scrollTop,t-a}this.element=this.option.element,this.music=this.option.music,this.element.innerHTML='
'+this.music.title+' - (＞﹏＜)加载中,好累的说...
- 00:00 / 00:00
',this.option.narrow&&this.element.classList.add("aplayer-narrow"),this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.loop=!0,this.audio.preload="metadata";var l=this;this.audio.addEventListener("durationchange",function(){l.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=l.secondToTime(l.audio.duration)}),this.audio.addEventListener("canplay",function(){l.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - "+l.music.author,l.loadedTime=setInterval(function(){var e=l.audio.buffered.end(l.audio.buffered.length-1)/l.audio.duration;l.updateBar.call(l,"loaded",e,"width"),1===e&&clearInterval(l.loadedTime)},500)}),this.audio.addEventListener("error",function(){l.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - 加载失败 ╥﹏╥"}),this.playButton=this.element.getElementsByClassName("aplayer-play")[0],this.pauseButton=this.element.getElementsByClassName("aplayer-pause")[0],this.playButton.addEventListener("click",function(){l.play.call(l)}),this.pauseButton.addEventListener("click",function(){l.pause.call(l)}),this.playedBar=this.element.getElementsByClassName("aplayer-played")[0],this.loadedBar=this.element.getElementsByClassName("aplayer-loaded")[0],this.thumb=this.element.getElementsByClassName("aplayer-thumb")[0],this.bar=this.element.getElementsByClassName("aplayer-bar")[0];var s;this.bar.addEventListener("click",function(e){var a=e||window.event;s=l.bar.clientWidth;var i=(a.clientX-t(l.bar))/s;l.updateBar.call(l,"played",i,"width"),l.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=l.secondToTime(i*l.audio.duration),l.audio.currentTime=parseFloat(l.playedBar.style.width)/100*l.audio.duration}),this.thumb.addEventListener("mousedown",function(){s=l.bar.clientWidth,clearInterval(l.playedTime),document.addEventListener("mousemove",e),document.addEventListener("mouseup",a)}),this.audio.volume=.8,this.volumeBar=this.element.getElementsByClassName("aplayer-volume")[0];var n=this.element.getElementsByClassName("aplayer-volume-bar")[0],o=l.element.getElementsByClassName("aplayer-time")[0].getElementsByTagName("i")[0],r=35;this.element.getElementsByClassName("aplayer-volume-bar-wrap")[0].addEventListener("click",function(e){var a=e||window.event,t=(r-a.clientY+i(n))/r;t=t>0?t:0,t=1>t?t:1,l.updateBar.call(l,"volume",t,"height"),l.audio.volume=t,l.audio.muted&&(l.audio.muted=!1),1===t?o.className="demo-icon aplayer-icon-volume-up":o.className="demo-icon aplayer-icon-volume-down"}),o.addEventListener("click",function(){l.audio.muted?(l.audio.muted=!1,o.className=1===l.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",l.updateBar.call(l,"volume",l.audio.volume,"height")):(l.audio.muted=!0,o.className="demo-icon aplayer-icon-volume-off",l.updateBar.call(l,"volume",0,"height"))}),this.option.autoplay&&this.play()},APlayer.prototype.play=function(){this.playButton.classList.add("aplayer-hide"),this.pauseButton.classList.remove("aplayer-hide"),this.audio.play();var e=this;this.playedTime=setInterval(function(){e.updateBar.call(e,"played",e.audio.currentTime/e.audio.duration,"width"),e.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=e.secondToTime(e.audio.currentTime)},100)},APlayer.prototype.pause=function(){this.pauseButton.classList.add("aplayer-hide"),this.playButton.classList.remove("aplayer-hide"),this.audio.pause(),clearInterval(this.playedTime)},APlayer.prototype.updateBar=function(e,a,t){a=a>0?a:0,a=1>a?a:1,this[e+"Bar"].style[t]=100*a+"%"},APlayer.prototype.secondToTime=function(e){var a=function(e){return 10>e?"0"+e:""+e},t=parseInt(e/60),i=parseInt(e-60*t);return a(t)+":"+a(i)}; \ No newline at end of file diff --git a/font/aplayer-fontello.eot b/build/font/aplayer-fontello.eot similarity index 100% rename from font/aplayer-fontello.eot rename to build/font/aplayer-fontello.eot diff --git a/font/aplayer-fontello.svg b/build/font/aplayer-fontello.svg similarity index 100% rename from font/aplayer-fontello.svg rename to build/font/aplayer-fontello.svg diff --git a/font/aplayer-fontello.ttf b/build/font/aplayer-fontello.ttf similarity index 100% rename from font/aplayer-fontello.ttf rename to build/font/aplayer-fontello.ttf diff --git a/font/aplayer-fontello.woff b/build/font/aplayer-fontello.woff similarity index 100% rename from font/aplayer-fontello.woff rename to build/font/aplayer-fontello.woff diff --git a/demo/index.html b/demo/index.html index 7ac18de..26d3b28 100644 --- a/demo/index.html +++ b/demo/index.html @@ -4,7 +4,7 @@ APlayer Demo - +