diff --git a/README.md b/README.md index dae58e0..c644810 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ npm install aplayer ## Usage -The following HTML structure is used for APlayer: +### The following HTML structure is used for APlayer: ``` @@ -35,13 +35,14 @@ The following HTML structure is used for APlayer: ``` -And this is how the APlayer is initialized: +### And this is how the APlayer is initialized: ``` var ap = new APlayer({ element: document.getElementById('player1'), narrow: false, autoplay: true, + showlrc: false, music: { title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', @@ -52,12 +53,47 @@ var ap = new APlayer({ ap.init(); ``` -API +### With lrc + +Using [LRC format](https://en.wikipedia.org/wiki/LRC_(file_format)) + +HTML: + +``` + + +
+
(>﹏<) APlayer 加载中,好累的说...
+
+        [ti:平凡之路]
+        [ar:朴树]
+        [al:《后会无期》主题歌]
+        [by:周敏]
+
+        [00:00.00]平凡之路 - 朴树
+        [00:04.01]作词:韩寒 朴树
+        [00:08.02]作曲:朴树 编曲:朴树
+        [00:12.02]徘徊着的 在路上的
+        [00:17.37]你要走吗
+        [00:23.20]易碎的 骄傲着
+        [00:28.75]那也曾是我的模样
+        
+    
+
+ + +``` + +JS: + +Init Option: `showlrc: false` + +### API + `ap.play()` + `ap.pause()` -Development +### Development ``` gulp diff --git a/demo/index.html b/demo/index.html index 34c8c78..9e9fd13 100644 --- a/demo/index.html +++ b/demo/index.html @@ -51,11 +51,82 @@

Wow, such a beautiful html5 music player

Made by DIYgod. Available on GitHub. Licensed MIT.


-

Wide style and autoplay

+

With lyrics

+
+
(>﹏<) APlayer 加载中,好累的说...
+
+                [ti:平凡之路]
+                [ar:朴树]
+                [al:《后会无期》主题歌]
+                [by:周敏]
+
+                [00:00.00]平凡之路 - 朴树
+                [00:04.01]作词:韩寒 朴树
+                [00:08.02]作曲:朴树 编曲:朴树
+                [00:12.02]徘徊着的 在路上的
+                [00:17.37]你要走吗
+                [00:23.20]易碎的 骄傲着
+                [00:28.75]那也曾是我的模样
+                [00:34.55]沸腾着的 不安着的
+                [00:40.26]你要去哪
+                [00:46.00]谜一样的 沉默着的
+                [00:51.75]故事你真的在听吗
+                [00:56.25]我曾经跨过山和大海
+                [00:59.55]也穿过人山人海
+                [01:02.70]我曾经拥有着一切
+                [01:05.00]转眼都飘散如烟
+                [01:07.75]我曾经失落失望失掉所有方向
+                [01:13.46]直到看见平凡才是唯一的答案
+                [01:31.70]当你仍然
+                [01:33.10]还在幻想
+                [01:37.40]你的明天
+                [01:43.00]她会好吗 还是更烂
+                [01:49.78]对我而言是另一天
+                [01:53.33]我曾经毁了我的一切
+                [01:56.54]只想永远地离开
+                [01:59.82]我曾经堕入无边黑暗
+                [02:02.14]想挣扎无法自拔
+                [02:04.79]我曾经像你像他像那野草野花
+                [02:10.54]绝望着 渴望着
+                [02:13.54]也哭也笑平凡着
+                [03:03.38]向前走 就这么走
+                [03:06.23]就算你被给过什么
+                [03:09.08]向前走 就这么走
+                [03:11.83]就算你被夺走什么
+                [03:14.78]向前走 就这么走
+                [03:17.58]就算你会错过什么
+                [03:20.33]向前走 就这么走
+                [03:23.13]就算你会
+                [03:25.78]我曾经跨过山和大海
+                [03:28.14]也穿过人山人海
+                [03:30.44]我曾经拥有着一切
+                [03:33.69]转眼都飘散如烟
+                [03:36.24]我曾经失落失望失掉所有方向
+                [03:42.04]直到看见平凡才是唯一的答案
+                [03:47.69]我曾经毁了我的一切
+                [03:50.84]只想永远地离开
+                [03:53.39]我曾经堕入无边黑暗
+                [03:56.29]想挣扎无法自拔
+                [03:59.04]我曾经像你像他像那野草野花
+                [04:04.79]绝望着 渴望着 也哭也笑平凡着
+                [04:10.64]我曾经跨过山和大海
+                [04:13.54]也穿过人山人海
+                [04:16.14]我曾经问遍整个世界
+                [04:19.49]从来没得到答案
+                [04:22.88]我不过像你像他像那野草野花
+                [04:27.64]冥冥中这是我 唯一要走的路啊
+                [04:34.65]时间无言
+                [04:36.15]如此这般
+                [04:40.30]明天已在眼前
+                [04:46.45]风吹过的 路依然远
+                [04:51.55]你的故事讲到了哪
+            
+
+

Wide style

(>﹏<) APlayer 加载中,好累的说...
-

Narrow style and no autoplay

+

Narrow style

(>﹏<) APlayer 加载中,好累的说...
@@ -65,12 +136,12 @@ var ap1 = new APlayer({ element: document.getElementById('player1'), narrow: false, - autoplay: true, + autoplay: false, music: { title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', - url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3', - pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg' + url: 'Preparation.mp3', + pic: 'Preparation.jpg' } }); ap1.init(); @@ -81,11 +152,24 @@ music: { title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', - url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3', - pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg' + url: 'Preparation.mp3', + pic: 'Preparation.jpg' } }); ap2.init(); + var ap3 = new APlayer({ + element: document.getElementById('player3'), + narrow: false, + autoplay: true, + showlrc: true, + music: { + title: '平凡之路', + author: '朴树', + url: '平凡之路.mp3', + pic: '平凡之路.jpg' + } + }); + ap3.init(); \ No newline at end of file diff --git a/demo/平凡之路.jpg b/demo/平凡之路.jpg new file mode 100644 index 0000000..ac262c5 Binary files /dev/null and b/demo/平凡之路.jpg differ diff --git a/demo/平凡之路.mp3 b/demo/平凡之路.mp3 new file mode 100644 index 0000000..fc7f7ee Binary files /dev/null and b/demo/平凡之路.mp3 differ diff --git a/dist/APlayer.min.css b/dist/APlayer.min.css index bc29684..e374343 100644 --- a/dist/APlayer.min.css +++ b/dist/APlayer.min.css @@ -1 +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-narrow{width:66px}.aplayer-narrow .aplayer-info{display:none}.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-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 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-hide{display:none}.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 +@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-narrow{width:66px}.aplayer-narrow .aplayer-info{display:none}.aplayer-withlrc.aplayer-narrow{width:106px}.aplayer-withlrc.aplayer .aplayer-pic{height:106px;width:106px}.aplayer-withlrc.aplayer .aplayer-info{margin-left:106px;height:106px}.aplayer-withlrc.aplayer .aplayer-lrc{display:block}.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;overflow:hidden;-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-lrc-content,.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 span{cursor:default!important}.aplayer .aplayer-pic{position:relative;float:left;height:66px;width:66px}.aplayer .aplayer-pic img{height:100%;width:100%}.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:14px 7px 0 10px;height:66px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.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:0 120px 0 5px}.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:5px;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-volume-wrap{display:inline-block;margin-left:7px;cursor:pointer!important}.aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap{display:block}.aplayer .aplayer-info .aplayer-controller .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-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-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume{position:absolute;bottom:0;right:0;width:5px;background:#b7daff}.aplayer .aplayer-lrc{display:none;position:relative;height:40px;background:#fff;text-align:center;overflow:hidden;margin:-10px 0 10px}.aplayer .aplayer-lrc:after,.aplayer .aplayer-lrc:before{z-index:1;display:block;overflow:hidden;content:' ';width:100%}.aplayer .aplayer-lrc:before{position:absolute;top:0;height:10%;background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(transparent));background:-webkit-linear-gradient(top,#fff,transparent);background:linear-gradient(to bottom,#fff,transparent)}.aplayer .aplayer-lrc:after{position:absolute;bottom:0;height:33%;background:-webkit-gradient(linear,left bottom,left top,from(#fff),to(transparent));background:-webkit-linear-gradient(bottom,#fff,transparent);background:linear-gradient(to top,#fff,transparent)}.aplayer .aplayer-lrc p{font-size:12px;color:#666;line-height:20px;padding:0;margin:0;-webkit-transition:all .5s ease-out;transition:all .5s ease-out;opacity:.4}.aplayer .aplayer-lrc p.aplayer-lrc-current{opacity:1}.aplayer .aplayer-lrc .aplayer-lrc-contents{position:absolute;width:100%;-webkit-transition:all .5s ease-out;transition:all .5s ease-out} \ No newline at end of file diff --git a/dist/APlayer.min.js b/dist/APlayer.min.js index 5f324f6..71b2081 100644 --- a/dist/APlayer.min.js +++ b/dist/APlayer.min.js @@ -1 +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 +function APlayer(e){this.option=e}APlayer.prototype.init=function(){function e(e){var a=e||window.event,l=(a.clientX-t(p.bar))/m;l=l>0?l:0,l=1>l?l:1,p.updateBar.call(p,"played",l,"width"),p.option.showlrc&&p.updateLrc.call(p,parseFloat(p.playedBar.style.width)/100*p.audio.duration),p.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=p.secondToTime(l*p.audio.duration)}function a(){document.removeEventListener("mouseup",a),document.removeEventListener("mousemove",e),p.audio.currentTime=parseFloat(p.playedBar.style.width)/100*p.audio.duration,p.play()}function t(e){for(var a,t=e.offsetLeft,l=e.offsetParent;null!==l;)t+=l.offsetLeft,l=l.offsetParent;return a=document.body.scrollLeft+document.documentElement.scrollLeft,t-a}function l(e){for(var a,t=e.offsetTop,l=e.offsetParent;null!==l;)t+=l.offsetTop,l=l.offsetParent;return a=document.body.scrollTop+document.documentElement.scrollTop,t-a}if(this.element=this.option.element,this.music=this.option.music,this.option.showlrc){var i=[];this.lrcTime=[],this.lrcLine=[];var s=this.element.getElementsByClassName("aplayer-lrc-content")[0].innerHTML;i=s.split(/\n/);for(var n=/\[(\d{2})\:(\d{2})\.(\d{2})\]/,r=/](.*)$/,o=0;o
'+this.music.title+' - (>﹏<)加载中,好累的说...
- 00:00 / 00:00
',this.option.showlrc){this.element.classList.add("aplayer-withlrc");var u="";for(this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0],o=0;o"+this.lrcLine[o]+"

";this.lrcContents.innerHTML=u,this.lrcIndex=0,this.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current")}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 p=this;this.audio.addEventListener("durationchange",function(){p.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=p.secondToTime(p.audio.duration)}),this.audio.addEventListener("canplay",function(){p.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - "+p.music.author,p.loadedTime=setInterval(function(){var e=p.audio.buffered.end(p.audio.buffered.length-1)/p.audio.duration;p.updateBar.call(p,"loaded",e,"width"),1===e&&clearInterval(p.loadedTime)},500)}),this.audio.addEventListener("error",function(){p.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(){p.play.call(p)}),this.pauseButton.addEventListener("click",function(){p.pause.call(p)}),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 m;this.bar.addEventListener("click",function(e){var a=e||window.event;m=p.bar.clientWidth;var l=(a.clientX-t(p.bar))/m;p.updateBar.call(p,"played",l,"width"),p.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=p.secondToTime(l*p.audio.duration),p.audio.currentTime=parseFloat(p.playedBar.style.width)/100*p.audio.duration}),this.thumb.addEventListener("mousedown",function(){m=p.bar.clientWidth,clearInterval(p.playedTime),document.addEventListener("mousemove",e),document.addEventListener("mouseup",a)}),this.audio.volume=.8,this.volumeBar=this.element.getElementsByClassName("aplayer-volume")[0];var y=this.element.getElementsByClassName("aplayer-volume-bar")[0],h=p.element.getElementsByClassName("aplayer-time")[0].getElementsByTagName("i")[0],v=35;this.element.getElementsByClassName("aplayer-volume-bar-wrap")[0].addEventListener("click",function(e){var a=e||window.event,t=(v-a.clientY+l(y))/v;t=t>0?t:0,t=1>t?t:1,p.updateBar.call(p,"volume",t,"height"),p.audio.volume=t,p.audio.muted&&(p.audio.muted=!1),1===t?h.className="demo-icon aplayer-icon-volume-up":h.className="demo-icon aplayer-icon-volume-down"}),h.addEventListener("click",function(){p.audio.muted?(p.audio.muted=!1,h.className=1===p.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",p.updateBar.call(p,"volume",p.audio.volume,"height")):(p.audio.muted=!0,h.className="demo-icon aplayer-icon-volume-off",p.updateBar.call(p,"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.option.showlrc&&e.updateLrc.call(e),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.updateLrc=function(e){if(e||(e=this.audio.currentTime),e=this.lrcTime[this.lrcIndex+1])for(var a=0;a=this.lrcTime[a]&&(!this.lrcTime[a+1]||ee?"0"+e:""+e},t=parseInt(e/60),l=parseInt(e-60*t);return a(t)+":"+a(l)}; \ No newline at end of file diff --git a/package.json b/package.json index 94798f9..24d4f5b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aplayer", - "version": "1.0.8", + "version": "1.1.0", "description": "Wow, such a beautiful html5 music player", "main": "APlayer.js", "scripts": { diff --git a/src/APlayer.js b/src/APlayer.js index d209dc5..d42ace5 100644 --- a/src/APlayer.js +++ b/src/APlayer.js @@ -6,6 +6,25 @@ APlayer.prototype.init = function () { this.element = this.option.element; this.music = this.option.music; + // parser lrc + if (this.option.showlrc) { + var lines = []; + this.lrcTime = []; + this.lrcLine = []; + var lrcs = this.element.getElementsByClassName('aplayer-lrc-content')[0].innerHTML; + lines = lrcs.split(/\n/); + var timeExp = /\[(\d{2})\:(\d{2})\.(\d{2})\]/; + var lrcExp = /](.*)$/; + for (var i = 0; i < lines.length; i++) { + var oneTime = timeExp.exec(lines[i]); + var oneLrc = lrcExp.exec(lines[i]); + if (oneTime && oneLrc) { + this.lrcTime.push(parseInt(oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / 100); + this.lrcLine.push(oneLrc[1]); + } + } + } + // fill in HTML this.element.innerHTML = '' + '
' @@ -19,10 +38,12 @@ APlayer.prototype.init = function () { + '
' + '
' + '
' - + '' + '' + this.music.title + '' + ' - (>﹏<)加载中,好累的说...' + '
' + + '
' + + '
' + + '
' + '
' + '
' + '
' @@ -32,7 +53,7 @@ APlayer.prototype.init = function () { + '
' + '
' + '
' - + '' + + '
' + ' - 00:00 / 00:00' + '
' + '' @@ -42,10 +63,23 @@ APlayer.prototype.init = function () { + '
' + '
' + '
' - + '' + + '' + '' + ''; + // fill in lrc + if (this.option.showlrc) { + this.element.classList.add('aplayer-withlrc'); + var lrcHTML = ''; + this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0]; + for (i = 0; i < this.lrcLine.length; i++) { + lrcHTML += '

' + this.lrcLine[i] + '

'; + } + this.lrcContents.innerHTML = lrcHTML; + this.lrcIndex = 0; + this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current'); + } + // switch to narrow style if (this.option.narrow) { this.element.classList.add('aplayer-narrow'); @@ -117,6 +151,9 @@ APlayer.prototype.init = function () { percentage = percentage > 0 ? percentage : 0; percentage = percentage < 1 ? percentage : 1; _self.updateBar.call(_self, 'played', percentage, 'width'); + if (_self.option.showlrc) { + _self.updateLrc.call(_self, parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration); + } _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration); } @@ -124,10 +161,7 @@ APlayer.prototype.init = function () { document.removeEventListener('mouseup', thumbUp); document.removeEventListener('mousemove', thumbMove); _self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration; - _self.playedTime = setInterval(function () { - _self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width'); - _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime); - }, 100); + _self.play(); } // control volume @@ -204,6 +238,9 @@ APlayer.prototype.play = function () { var _self = this; this.playedTime = setInterval(function () { _self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width'); + if (_self.option.showlrc) { + _self.updateLrc.call(_self); + } _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime); }, 100); }; @@ -223,6 +260,23 @@ APlayer.prototype.updateBar = function (type, percentage, direction) { this[type + 'Bar'].style[direction] = percentage * 100 + '%'; }; +// update lrc +APlayer.prototype.updateLrc = function (currentTime) { + if (!currentTime) { + currentTime = this.audio.currentTime; + } + if (currentTime < this.lrcTime[this.lrcIndex] || currentTime >= this.lrcTime[this.lrcIndex + 1]) { + for (var i = 0; i < this.lrcTime.length; i++) { + if (currentTime >= this.lrcTime[i] && (!this.lrcTime[i + 1] || currentTime < this.lrcTime[i + 1])) { + this.lrcIndex = i; + this.lrcContents.style.top = -this.lrcIndex * 20 + 'px'; + this.lrcContents.getElementsByClassName('aplayer-lrc-current')[0].classList.remove('aplayer-lrc-current'); + this.lrcContents.getElementsByTagName('p')[i].classList.add('aplayer-lrc-current'); + } + } + } +}; + // format second to 00:00 APlayer.prototype.secondToTime = function (second) { var add0 = function (num) { diff --git a/src/APlayer.scss b/src/APlayer.scss index ecaeec5..d73269a 100644 --- a/src/APlayer.scss +++ b/src/APlayer.scss @@ -1,4 +1,6 @@ $aplayer-height: 66px; +$lrc-height: 40px; +$aplayer-height-lrc: $aplayer-height + $lrc-height; @font-face { font-family: 'aplayer-fontello'; @@ -18,12 +20,29 @@ $aplayer-height: 66px; } } +.aplayer-withlrc { + &.aplayer-narrow { + width: $aplayer-height-lrc; + } + &.aplayer .aplayer-pic { + height: $aplayer-height-lrc; + width: $aplayer-height-lrc; + } + &.aplayer .aplayer-info { + margin-left: $aplayer-height-lrc; + height: $aplayer-height-lrc; + } + &.aplayer .aplayer-lrc { + display: block; + } +} + .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: $aplayer-height; + overflow: hidden; user-select: none; [class^="aplayer-icon-"]:before, [class*=" aplayer-icon-"]:before { @@ -83,16 +102,19 @@ $aplayer-height: 66px; cursor: default !important; } + .aplayer-lrc-content { + display: none; + } + .aplayer-pic { position: relative; float: left; - height: 100%; + height: $aplayer-height; width: $aplayer-height; img { height: 100%; width: 100%; - border-radius: 2px 0 0 2px; } .aplayer-button { @@ -147,7 +169,9 @@ $aplayer-height: 66px; .aplayer-info { margin-left: $aplayer-height; - padding: 17px 7px 0 10px; + padding: 14px 7px 0 10px; + height: $aplayer-height; + box-sizing: border-box; .aplayer-music { overflow: hidden; @@ -178,7 +202,7 @@ $aplayer-height: 66px; position: relative; .aplayer-bar-wrap { - margin-right: 120px; + margin: 0 120px 0 5px; .aplayer-bar { position: relative; @@ -208,7 +232,7 @@ $aplayer-height: 66px; .aplayer-thumb { position: absolute; top: 0; - right: 0; + right: 5px; margin-top: -4px; margin-right: -10px; height: 8px; @@ -238,43 +262,97 @@ $aplayer-height: 66px; color: #666; font-size: 15px; } + } - .aplayer-volume-wrap { - display: inline-block; - margin-left: 7px; - cursor: pointer !important; + .aplayer-volume-wrap { + display: inline-block; + margin-left: 7px; + cursor: pointer !important; - &:hover .aplayer-volume-bar-wrap { - display: block; - } + &:hover .aplayer-volume-bar-wrap { + display: block; + } - .aplayer-volume-bar-wrap { - display: none; + .aplayer-volume-bar-wrap { + display: none; + position: absolute; + bottom: 17px; + right: -5px; + width: 25px; + height: 40px; + + .aplayer-volume-bar { position: absolute; - bottom: 17px; - right: -5px; - width: 25px; - height: 40px; + bottom: 0; + right: 10px; + width: 5px; + height: 35px; + background: #aaa; - .aplayer-volume-bar { + .aplayer-volume { position: absolute; bottom: 0; - right: 10px; + right: 0; width: 5px; - height: 35px; - background: #aaa; - - .aplayer-volume { - position: absolute; - bottom: 0; - right: 0; - width: 5px; - background: #b7daff; - } + background: #b7daff; } } } } } } + + .aplayer-lrc { + display: none; + position: relative; + height: $lrc-height; + background: #fff; + text-align: center; + overflow: hidden; + margin: -10px 0 10px; + + &:before { + position: absolute; + top: 0; + z-index: 1; + display: block; + overflow: hidden; + width: 100%; + height: 10%; + content: ' '; + background: linear-gradient(to bottom, #fff, transparent); + } + + &:after { + position: absolute; + bottom: 0; + z-index: 1; + display: block; + overflow: hidden; + width: 100%; + height: 33%; + content: ' '; + background: linear-gradient(to top, #fff, transparent); + } + + p { + font-size: 12px; + color: #666; + line-height: 20px; + padding: 0; + margin: 0; + transition: all 0.5s ease-out; + opacity: 0.4; + + &.aplayer-lrc-current { + opacity: 1; + } + } + + .aplayer-lrc-contents { + position: absolute; + width: 100%; + transition: all 0.5s ease-out; + } + } } \ No newline at end of file