diff --git a/README.md b/README.md index eabefe5..88e9f0a 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,13 @@ ap.init(); + `ap.play()` + `ap.pause()` +#### Work with module bundler + +```js +var APlayer = require('APlayer'); +var ap = new APlayer({...}); +``` + ### With lrc #### LRC format: diff --git a/dist/APlayer.min.js b/dist/APlayer.min.js index afa1be6..fe2cebd 100644 --- a/dist/APlayer.min.js +++ b/dist/APlayer.min.js @@ -1 +1 @@ -function APlayer(e){this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(e.autoplay=!1);var t={element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,showlrc:!1,theme:"#b7daff"};for(var a in t)t.hasOwnProperty(a)&&!e.hasOwnProperty(a)&&(e[a]=t[a]);this.playIndex="[object Array]"===Object.prototype.toString.call(e.music)?0:-1,this.option=e,this.audios=[],this.loop=!0}APlayer.prototype.init=function(){function e(e){var t=e||window.event,s=(t.clientX-a(r.bar))/o;s=s>0?s:0,s=1>s?s:1,r.updateBar.call(r,"played",s,"width"),r.option.showlrc&&r.updateLrc.call(r,parseFloat(r.playedBar.style.width)/100*r.audio.duration),r.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=r.secondToTime(s*r.audio.duration)}function t(){document.removeEventListener("mouseup",t),document.removeEventListener("mousemove",e),r.audio.currentTime=parseFloat(r.playedBar.style.width)/100*r.audio.duration,r.play()}function a(e){for(var t,a=e.offsetLeft,s=e.offsetParent;null!==s;)a+=s.offsetLeft,s=s.offsetParent;return t=document.body.scrollLeft+document.documentElement.scrollLeft,a-t}function s(e){for(var t,a=e.offsetTop,s=e.offsetParent;null!==s;)a+=s.offsetTop,s=s.offsetParent;return t=document.body.scrollTop+document.documentElement.scrollTop,a-t}if(this.element=this.option.element,this.music=this.playIndex>-1?this.option.music[this.playIndex]:this.option.music,this.option.showlrc){for(var i=[],l=0;l
- 00:00 / 00:00
'+(this.playIndex>-1?'':"")+"
";if(this.playIndex>-1){for(n+='
    ',l=0;l'+(l+1)+''+this.option.music[l].title+''+this.option.music[l].author+"";n+="
"}this.element.innerHTML=n,this.option.narrow&&this.element.classList.add("aplayer-narrow");var r=this;if(this.playButton=this.element.getElementsByClassName("aplayer-play")[0],this.pauseButton=this.element.getElementsByClassName("aplayer-pause")[0],this.playButton.addEventListener("click",function(){r.play.call(r)}),this.pauseButton.addEventListener("click",function(){r.pause.call(r)}),this.playIndex>-1)for(l=0;l0?a:0,a=1>a?a:1,r.updateBar.call(r,"volume",a,"height"),r.audio.volume=a,r.audio.muted&&(r.audio.muted=!1),1===a?p.className="demo-icon aplayer-icon-volume-up":p.className="demo-icon aplayer-icon-volume-down"}),p.addEventListener("click",function(){r.audio.muted?(r.audio.muted=!1,p.className=1===r.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",r.updateBar.call(r,"volume",r.audio.volume,"height")):(r.audio.muted=!0,p.className="demo-icon aplayer-icon-volume-off",r.updateBar.call(r,"volume",0,"height"))}),this.element.getElementsByClassName("aplayer-icon-loop")[0].addEventListener("click",function(){r.loop?(this.classList.add("aplayer-noloop"),r.loop=!1):(this.classList.remove("aplayer-noloop"),r.loop=!0)}),this.playIndex>-1&&this.element.getElementsByClassName("aplayer-icon-menu")[0].addEventListener("click",function(){var e=r.element.getElementsByClassName("aplayer-list")[0];e.classList.contains("aplayer-list-hide")?e.classList.remove("aplayer-list-hide"):e.classList.add("aplayer-list-hide")}),this.setMusic(0)},APlayer.prototype.setMusic=function(e){this.playIndex>-1&&"undefined"!=typeof arguments[0]&&(this.playIndex=arguments[0]);var t=this.playIndex;if(this.music=this.playIndex>-1?this.option.music[t]:this.option.music,this.music.pic&&(this.element.getElementsByClassName("aplayer-pic")[0].style.backgroundImage="url("+encodeURI(this.music.pic)+")"),this.element.getElementsByClassName("aplayer-title")[0].innerHTML=this.music.title,this.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - "+this.music.author,this.playIndex>-1&&(this.element.getElementsByClassName("aplayer-list-light")[0]&&this.element.getElementsByClassName("aplayer-list-light")[0].classList.remove("aplayer-list-light"),this.element.getElementsByClassName("aplayer-list")[0].getElementsByTagName("li")[t].classList.add("aplayer-list-light")),this.audio&&(this.pause(),this.audio.currentTime=0),this.playIndex>-1&&!this.audios[t]||-1===this.playIndex){this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.preload=this.isMobile?"none":"metadata",this.audio.currentTime=0;var a=this;this.audio.addEventListener("durationchange",function(){1!==a.audio.duration&&(a.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=a.secondToTime(a.audio.duration))}),a.audio.addEventListener("progress",function(){var e=a.audio.buffered.length?a.audio.buffered.end(a.audio.buffered.length-1)/a.audio.duration:0;a.updateBar.call(a,"loaded",e,"width")}),this.audio.addEventListener("error",function(){a.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - Error happens ╥﹏╥"}),this.playIndex>-1&&this.audio.addEventListener("ended",function(){a.playIndex-1?!1:this.loop,this.playIndex>-1&&(this.audios[t]=this.audio)}else this.audio=this.audios[t],this.audio.volume=parseInt(this.element.getElementsByClassName("aplayer-volume")[0].style.height)/100,this.audio.currentTime=0;if(this.option.showlrc){this.lrc=this.playIndex>-1?this.lrcs[t]:this.lrcs[0],this.element.classList.add("aplayer-withlrc");var s="";for(this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0],i=0;i"+this.lrc[i][1]+"

";this.lrcContents.innerHTML=s,this.lrcIndex||(this.lrcIndex=0),this.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current"),this.lrcContents.style.transform="translateY(0px)",this.lrcContents.style.webkitTransform="translateY(0px)"}1!==this.audio.duration&&(this.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=this.audio.duration?this.secondToTime(this.audio.duration):"00:00"),this.option.autoplay&&!this.isMobile&&this.play(),this.option.autoplay=!0,this.isMobile&&this.pause()},APlayer.prototype.play=function(){this.playButton.classList.add("aplayer-hide"),this.pauseButton.classList.remove("aplayer-hide"),this.audio.play();var e=this;this.playedTime&&clearInterval(this.playedTime),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,t,a){t=t>0?t:0,t=1>t?t:1,this[e+"Bar"].style[a]=100*t+"%"},APlayer.prototype.updateLrc=function(e){if("undefined"==typeof arguments[0]&&(e=this.audio.currentTime),this.lrcIndex>this.lrc.length-1||e=this.lrc[this.lrcIndex+1][0])for(var t=0;t=this.lrc[t][0]&&(!this.lrc[t+1]||ee?"0"+e:""+e},a=parseInt(e/60),s=parseInt(e-60*a);return t(a)+":"+t(s)},APlayer.prototype.parseLrc=function(e){for(var t=[],a=0;an;n++){var r=s[n].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g),o=s[n].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g,"").replace(/^\s+|\s+$/g,"");if(null!=r)for(var d=r.length,p=0;d>p;p++){var c=/\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(r[p]),u=60*c[1]+parseInt(c[2])+parseInt(c[3])/(2===(c[3]+"").length?100:1e3);i.push([u,o])}}i.sort(function(e,t){return e[0]-t[0]}),t.push(i)}return t}; \ No newline at end of file +!function(){function e(e){this.isMobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),this.isMobile&&(e.autoplay=!1);var t={element:document.getElementsByClassName("aplayer")[0],narrow:!1,autoplay:!1,showlrc:!1,theme:"#b7daff"};for(var a in t)t.hasOwnProperty(a)&&!e.hasOwnProperty(a)&&(e[a]=t[a]);this.playIndex="[object Array]"===Object.prototype.toString.call(e.music)?0:-1,this.option=e,this.audios=[],this.loop=!0}e.prototype.init=function(){function e(e){var t=e||window.event,s=(t.clientX-a(o.bar))/r;s=s>0?s:0,s=1>s?s:1,o.updateBar.call(o,"played",s,"width"),o.option.showlrc&&o.updateLrc.call(o,parseFloat(o.playedBar.style.width)/100*o.audio.duration),o.element.getElementsByClassName("aplayer-ptime")[0].innerHTML=o.secondToTime(s*o.audio.duration)}function t(){document.removeEventListener("mouseup",t),document.removeEventListener("mousemove",e),o.audio.currentTime=parseFloat(o.playedBar.style.width)/100*o.audio.duration,o.play()}function a(e){for(var t,a=e.offsetLeft,s=e.offsetParent;null!==s;)a+=s.offsetLeft,s=s.offsetParent;return t=document.body.scrollLeft+document.documentElement.scrollLeft,a-t}function s(e){for(var t,a=e.offsetTop,s=e.offsetParent;null!==s;)a+=s.offsetTop,s=s.offsetParent;return t=document.body.scrollTop+document.documentElement.scrollTop,a-t}if(this.element=this.option.element,this.music=this.playIndex>-1?this.option.music[this.playIndex]:this.option.music,this.option.showlrc){for(var i=[],l=0;l
- 00:00 / 00:00
'+(this.playIndex>-1?'':"")+"
";if(this.playIndex>-1){for(n+='
    ',l=0;l'+(l+1)+''+this.option.music[l].title+''+this.option.music[l].author+"";n+="
"}this.element.innerHTML=n,this.option.narrow&&this.element.classList.add("aplayer-narrow");var o=this;if(this.playButton=this.element.getElementsByClassName("aplayer-play")[0],this.pauseButton=this.element.getElementsByClassName("aplayer-pause")[0],this.playButton.addEventListener("click",function(){o.play.call(o)}),this.pauseButton.addEventListener("click",function(){o.pause.call(o)}),this.playIndex>-1)for(l=0;l0?a:0,a=1>a?a:1,o.updateBar.call(o,"volume",a,"height"),o.audio.volume=a,o.audio.muted&&(o.audio.muted=!1),1===a?p.className="demo-icon aplayer-icon-volume-up":p.className="demo-icon aplayer-icon-volume-down"}),p.addEventListener("click",function(){o.audio.muted?(o.audio.muted=!1,p.className=1===o.audio.volume?"demo-icon aplayer-icon-volume-up":"demo-icon aplayer-icon-volume-down",o.updateBar.call(o,"volume",o.audio.volume,"height")):(o.audio.muted=!0,p.className="demo-icon aplayer-icon-volume-off",o.updateBar.call(o,"volume",0,"height"))}),this.element.getElementsByClassName("aplayer-icon-loop")[0].addEventListener("click",function(){o.loop?(this.classList.add("aplayer-noloop"),o.loop=!1):(this.classList.remove("aplayer-noloop"),o.loop=!0)}),this.playIndex>-1&&this.element.getElementsByClassName("aplayer-icon-menu")[0].addEventListener("click",function(){var e=o.element.getElementsByClassName("aplayer-list")[0];e.classList.contains("aplayer-list-hide")?e.classList.remove("aplayer-list-hide"):e.classList.add("aplayer-list-hide")}),this.setMusic(0)},e.prototype.setMusic=function(e){this.playIndex>-1&&"undefined"!=typeof arguments[0]&&(this.playIndex=arguments[0]);var t=this.playIndex;if(this.music=this.playIndex>-1?this.option.music[t]:this.option.music,this.music.pic&&(this.element.getElementsByClassName("aplayer-pic")[0].style.backgroundImage="url("+encodeURI(this.music.pic)+")"),this.element.getElementsByClassName("aplayer-title")[0].innerHTML=this.music.title,this.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - "+this.music.author,this.playIndex>-1&&(this.element.getElementsByClassName("aplayer-list-light")[0]&&this.element.getElementsByClassName("aplayer-list-light")[0].classList.remove("aplayer-list-light"),this.element.getElementsByClassName("aplayer-list")[0].getElementsByTagName("li")[t].classList.add("aplayer-list-light")),this.audio&&(this.pause(),this.audio.currentTime=0),this.playIndex>-1&&!this.audios[t]||-1===this.playIndex){this.audio=document.createElement("audio"),this.audio.src=this.music.url,this.audio.preload=this.isMobile?"none":"metadata",this.audio.currentTime=0;var a=this;this.audio.addEventListener("durationchange",function(){1!==a.audio.duration&&(a.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=a.secondToTime(a.audio.duration))}),a.audio.addEventListener("progress",function(){var e=a.audio.buffered.length?a.audio.buffered.end(a.audio.buffered.length-1)/a.audio.duration:0;a.updateBar.call(a,"loaded",e,"width")}),this.audio.addEventListener("error",function(){a.element.getElementsByClassName("aplayer-author")[0].innerHTML=" - Error happens ╥﹏╥"}),this.playIndex>-1&&this.audio.addEventListener("ended",function(){a.playIndex-1?!1:this.loop,this.playIndex>-1&&(this.audios[t]=this.audio)}else this.audio=this.audios[t],this.audio.volume=parseInt(this.element.getElementsByClassName("aplayer-volume")[0].style.height)/100,this.audio.currentTime=0;if(this.option.showlrc){this.lrc=this.playIndex>-1?this.lrcs[t]:this.lrcs[0],this.element.classList.add("aplayer-withlrc");var s="";for(this.lrcContents=this.element.getElementsByClassName("aplayer-lrc-contents")[0],i=0;i"+this.lrc[i][1]+"

";this.lrcContents.innerHTML=s,this.lrcIndex||(this.lrcIndex=0),this.lrcContents.getElementsByTagName("p")[0].classList.add("aplayer-lrc-current"),this.lrcContents.style.transform="translateY(0px)",this.lrcContents.style.webkitTransform="translateY(0px)"}1!==this.audio.duration&&(this.element.getElementsByClassName("aplayer-dtime")[0].innerHTML=this.audio.duration?this.secondToTime(this.audio.duration):"00:00"),this.option.autoplay&&!this.isMobile&&this.play(),this.option.autoplay=!0,this.isMobile&&this.pause()},e.prototype.play=function(){this.playButton.classList.add("aplayer-hide"),this.pauseButton.classList.remove("aplayer-hide"),this.audio.play();var e=this;this.playedTime&&clearInterval(this.playedTime),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)},e.prototype.pause=function(){this.pauseButton.classList.add("aplayer-hide"),this.playButton.classList.remove("aplayer-hide"),this.audio.pause(),clearInterval(this.playedTime)},e.prototype.updateBar=function(e,t,a){t=t>0?t:0,t=1>t?t:1,this[e+"Bar"].style[a]=100*t+"%"},e.prototype.updateLrc=function(e){if("undefined"==typeof arguments[0]&&(e=this.audio.currentTime),this.lrcIndex>this.lrc.length-1||e=this.lrc[this.lrcIndex+1][0])for(var t=0;t=this.lrc[t][0]&&(!this.lrc[t+1]||ee?"0"+e:""+e},a=parseInt(e/60),s=parseInt(e-60*a);return t(a)+":"+t(s)},e.prototype.parseLrc=function(e){for(var t=[],a=0;an;n++){var o=s[n].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g),r=s[n].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g,"").replace(/^\s+|\s+$/g,"");if(null!=o)for(var d=o.length,p=0;d>p;p++){var c=/\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(o[p]),u=60*c[1]+parseInt(c[2])+parseInt(c[3])/(2===(c[3]+"").length?100:1e3);i.push([u,r])}}i.sort(function(e,t){return e[0]-t[0]}),t.push(i)}return t},"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=e:window.APlayer=e}(); \ No newline at end of file diff --git a/package.json b/package.json index 3bcd98e..b36d14b 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "aplayer", - "version": "1.3.2", + "version": "1.3.3", "description": "Wow, such a beautiful html5 music player", - "main": "APlayer.js", + "main": "dist/APlayer.min.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/src/APlayer.js b/src/APlayer.js index cd083c6..7e83bbf 100644 --- a/src/APlayer.js +++ b/src/APlayer.js @@ -4,517 +4,526 @@ * @param {Object} option - See README * @constructor */ +(function () { + function APlayer(option) { -function APlayer(option) { - - this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i); - // compatibility: some mobile browsers don't suppose autoplay - if (this.isMobile) { - option.autoplay = false; - } - - // default options - var defaultOption = { - element: document.getElementsByClassName('aplayer')[0], - narrow: false, - autoplay: false, - showlrc: false, - theme: '#b7daff' - }; - for (var defaultKey in defaultOption) { - if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) { - option[defaultKey] = defaultOption[defaultKey]; + this.isMobile = navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i); + // compatibility: some mobile browsers don't suppose autoplay + if (this.isMobile) { + option.autoplay = false; } - } - // multiple music - this.playIndex = Object.prototype.toString.call(option.music) === '[object Array]' ? 0 : -1; - - this.option = option; - this.audios = []; - this.loop = true; -} - -/** - * AutoLink initialization function - */ -APlayer.prototype.init = function () { - this.element = this.option.element; - this.music = this.playIndex > -1 ? this.option.music[this.playIndex] : this.option.music; - - // parser lrc - if (this.option.showlrc) { - var lrcs = []; - for (var i = 0; i < this.element.getElementsByClassName('aplayer-lrc-content').length; i++) { - lrcs.push(this.element.getElementsByClassName('aplayer-lrc-content')[i].innerHTML); - } - this.lrcs = this.parseLrc(lrcs); - } - - // fill in HTML - var eleHTML = '' - + '
' - + '
' - + '' - + '
' - + '
' - + '' - + '
' - + '
' - + '
' - + '
' - + '' - + '' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '' - + '
' - + '
' - + '
' - + '
' - + ' - 00:00 / 00:00' - + '
' - + '' - + '
' - + '
' - + '
' - + '
' - + '
' - + '
' - + '' - + (this.playIndex > -1 ? '' : '') - + '
' - + '
' - + '
'; - if (this.playIndex > -1) { - eleHTML += '' - + '
' - + '
    '; - for (i = 0; i < this.option.music.length; i++) { - eleHTML += '' - + '
  1. ' - + '' - + '' + (i + 1) + '' - + '' + this.option.music[i].title + '' - + '' + this.option.music[i].author + '' - + '
    2. ' - } - eleHTML += '' - + '
' - + '
' - } - this.element.innerHTML = eleHTML; - - // switch to narrow style - if (this.option.narrow) { - this.element.classList.add('aplayer-narrow'); - } - - var _self = this; - - // play and pause button - this.playButton = this.element.getElementsByClassName('aplayer-play')[0]; - this.pauseButton = this.element.getElementsByClassName('aplayer-pause')[0]; - this.playButton.addEventListener('click', function () { - _self.play.call(_self); - }); - this.pauseButton.addEventListener('click', function () { - _self.pause.call(_self); - }); - - // click music list: change music - if (this.playIndex > -1) { - for (i = 0; i < this.option.music.length; i++) { - this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[i].addEventListener('click', function () { - var musicIndex = parseInt(this.getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1; - if (musicIndex !== _self.playIndex) { - _self.setMusic(musicIndex); - } - _self.play(); - }); - } - } - - // control play progress - 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 barWidth; - this.bar.addEventListener('click', function (event) { - var e = event || window.event; - barWidth = _self.bar.clientWidth; - var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth; - _self.updateBar.call(_self, 'played', percentage, 'width'); - _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration); - _self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration; - }); - - this.thumb.addEventListener('mouseover', function () { - this.style.background = _self.option.theme; - }); - this.thumb.addEventListener('mouseout', function () { - this.style.background = '#fff'; - }); - - this.thumb.addEventListener('mousedown', function () { - barWidth = _self.bar.clientWidth; - clearInterval(_self.playedTime); - document.addEventListener('mousemove', thumbMove); - document.addEventListener('mouseup', thumbUp); - }); - - function thumbMove (event) { - var e = event || window.event; - var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth; - 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); - } - - function thumbUp () { - document.removeEventListener('mouseup', thumbUp); - document.removeEventListener('mousemove', thumbMove); - _self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration; - _self.play(); - } - - // control volume - this.volumeBar = this.element.getElementsByClassName('aplayer-volume')[0]; - var volumeBarWrap = this.element.getElementsByClassName('aplayer-volume-bar')[0]; - var volumeicon = _self.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0]; - var barHeight = 35; - this.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', function (event) { - var e = event || window.event; - var percentage = (barHeight - e.clientY + getElementViewTop(volumeBarWrap)) / barHeight; - percentage = percentage > 0 ? percentage : 0; - percentage = percentage < 1 ? percentage : 1; - _self.updateBar.call(_self, 'volume', percentage, 'height'); - _self.audio.volume = percentage; - if (_self.audio.muted) { - _self.audio.muted = false; - } - if (percentage === 1) { - volumeicon.className = 'demo-icon aplayer-icon-volume-up'; - } - else { - volumeicon.className = 'demo-icon aplayer-icon-volume-down'; - } - }); - volumeicon.addEventListener('click', function () { - if (_self.audio.muted) { - _self.audio.muted = false; - volumeicon.className = _self.audio.volume === 1 ? 'demo-icon aplayer-icon-volume-up' : 'demo-icon aplayer-icon-volume-down'; - _self.updateBar.call(_self, 'volume', _self.audio.volume, 'height'); - } - else { - _self.audio.muted = true; - volumeicon.className = 'demo-icon aplayer-icon-volume-off'; - _self.updateBar.call(_self, 'volume', 0, 'height'); - } - }); - - // get element's view position - function getElementViewLeft (element) { - var actualLeft = element.offsetLeft; - var current = element.offsetParent; - var elementScrollLeft; - while (current !== null){ - actualLeft += current.offsetLeft; - current = current.offsetParent; - } - elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft; - return actualLeft - elementScrollLeft; - } - function getElementViewTop (element) { - var actualTop = element.offsetTop; - var current = element.offsetParent; - var elementScrollTop; - while (current !== null){ - actualTop += current. offsetTop; - current = current.offsetParent; - } - elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop; - return actualTop - elementScrollTop; - } - - // loop control - this.element.getElementsByClassName('aplayer-icon-loop')[0].addEventListener('click', function () { - if (_self.loop) { - this.classList.add('aplayer-noloop'); - _self.loop = false; - } - else { - this.classList.remove('aplayer-noloop'); - _self.loop = true; - } - }); - - // toggle menu control - if (this.playIndex > -1) { - this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', function () { - var list = _self.element.getElementsByClassName('aplayer-list')[0]; - if (!list.classList.contains('aplayer-list-hide')) { - list.classList.add('aplayer-list-hide'); + // default options + var defaultOption = { + element: document.getElementsByClassName('aplayer')[0], + narrow: false, + autoplay: false, + showlrc: false, + theme: '#b7daff' + }; + for (var defaultKey in defaultOption) { + if (defaultOption.hasOwnProperty(defaultKey) && !option.hasOwnProperty(defaultKey)) { + option[defaultKey] = defaultOption[defaultKey]; } - else { - list.classList.remove('aplayer-list-hide'); - } - }); - } - - this.setMusic(0); -}; - -/** - * Set music - */ -APlayer.prototype.setMusic = function (index) { - // get this.music - if (this.playIndex > -1 && typeof(arguments[0]) !== 'undefined') { - this.playIndex = arguments[0]; - } - var indexMusic = this.playIndex; - this.music = this.playIndex > -1 ? this.option.music[indexMusic] : this.option.music; - - // set html - if (this.music.pic) { - this.element.getElementsByClassName('aplayer-pic')[0].style.backgroundImage = 'url(' + encodeURI(this.music.pic) + ')'; - } - this.element.getElementsByClassName('aplayer-title')[0].innerHTML = this.music.title; - this.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + this.music.author; - if (this.playIndex > -1) { - if (this.element.getElementsByClassName('aplayer-list-light')[0]) { - this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light'); } - this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light'); + + // multiple music + this.playIndex = Object.prototype.toString.call(option.music) === '[object Array]' ? 0 : -1; + + this.option = option; + this.audios = []; + this.loop = true; } - // set the previous audio object - if (this.audio) { - this.pause(); - this.audio.currentTime = 0; - } + /** + * AutoLink initialization function + */ + APlayer.prototype.init = function () { + this.element = this.option.element; + this.music = this.playIndex > -1 ? this.option.music[this.playIndex] : this.option.music; - // get this audio object - if ((this.playIndex > -1 && !this.audios[indexMusic]) || this.playIndex === -1) { - this.audio = document.createElement("audio"); - this.audio.src = this.music.url; - this.audio.preload = this.isMobile ? 'none' : 'metadata'; - this.audio.currentTime = 0; - - // show audio time - var _self = this; - this.audio.addEventListener('durationchange', function () { - if (_self.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first - _self.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration); + // parser lrc + if (this.option.showlrc) { + var lrcs = []; + for (var i = 0; i < this.element.getElementsByClassName('aplayer-lrc-content').length; i++) { + lrcs.push(this.element.getElementsByClassName('aplayer-lrc-content')[i].innerHTML); } - }); + this.lrcs = this.parseLrc(lrcs); + } - // show audio loaded bar - _self.audio.addEventListener('progress', function () { - var percentage = _self.audio.buffered.length ? _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration : 0; - _self.updateBar.call(_self, 'loaded', percentage, 'width'); - }); - - // audio download error - this.audio.addEventListener('error', function () { - _self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + 'Error happens ╥﹏╥'; - }); - - // multiple music play + // fill in HTML + var eleHTML = '' + + '
' + + '
' + + '' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '' + + '' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + ' - 00:00 / 00:00' + + '
' + + '' + + '
' + + '
' + + '
' + + '
' + + '
' + + '
' + + '' + + (this.playIndex > -1 ? '' : '') + + '
' + + '
' + + '
'; if (this.playIndex > -1) { - this.audio.addEventListener('ended', function () { - if (_self.playIndex < _self.option.music.length - 1) { - _self.setMusic(++_self.playIndex); - } - else if (_self.loop) { - _self.setMusic(0); - } - else if (!_self.loop) { - _self.pause(); - } - }); + eleHTML += '' + + '
' + + '
    '; + for (i = 0; i < this.option.music.length; i++) { + eleHTML += '' + + '
  1. ' + + '' + + '' + (i + 1) + '' + + '' + this.option.music[i].title + '' + + '' + this.option.music[i].author + '' + + '
    2. ' + } + eleHTML += '' + + '
' + + '
' + } + this.element.innerHTML = eleHTML; + + // switch to narrow style + if (this.option.narrow) { + this.element.classList.add('aplayer-narrow'); + } + + var _self = this; + + // play and pause button + this.playButton = this.element.getElementsByClassName('aplayer-play')[0]; + this.pauseButton = this.element.getElementsByClassName('aplayer-pause')[0]; + this.playButton.addEventListener('click', function () { + _self.play.call(_self); + }); + this.pauseButton.addEventListener('click', function () { + _self.pause.call(_self); + }); + + // click music list: change music + if (this.playIndex > -1) { + for (i = 0; i < this.option.music.length; i++) { + this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[i].addEventListener('click', function () { + var musicIndex = parseInt(this.getElementsByClassName('aplayer-list-index')[0].innerHTML) - 1; + if (musicIndex !== _self.playIndex) { + _self.setMusic(musicIndex); + } + _self.play(); + }); + } + } + + // control play progress + 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 barWidth; + this.bar.addEventListener('click', function (event) { + var e = event || window.event; + barWidth = _self.bar.clientWidth; + var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth; + _self.updateBar.call(_self, 'played', percentage, 'width'); + _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(percentage * _self.audio.duration); + _self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration; + }); + + this.thumb.addEventListener('mouseover', function () { + this.style.background = _self.option.theme; + }); + this.thumb.addEventListener('mouseout', function () { + this.style.background = '#fff'; + }); + + this.thumb.addEventListener('mousedown', function () { + barWidth = _self.bar.clientWidth; + clearInterval(_self.playedTime); + document.addEventListener('mousemove', thumbMove); + document.addEventListener('mouseup', thumbUp); + }); + + function thumbMove(event) { + var e = event || window.event; + var percentage = (e.clientX - getElementViewLeft(_self.bar)) / barWidth; + 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); + } + + function thumbUp() { + document.removeEventListener('mouseup', thumbUp); + document.removeEventListener('mousemove', thumbMove); + _self.audio.currentTime = parseFloat(_self.playedBar.style.width) / 100 * _self.audio.duration; + _self.play(); } // control volume - this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100; + this.volumeBar = this.element.getElementsByClassName('aplayer-volume')[0]; + var volumeBarWrap = this.element.getElementsByClassName('aplayer-volume-bar')[0]; + var volumeicon = _self.element.getElementsByClassName('aplayer-time')[0].getElementsByTagName('i')[0]; + var barHeight = 35; + this.element.getElementsByClassName('aplayer-volume-bar-wrap')[0].addEventListener('click', function (event) { + var e = event || window.event; + var percentage = (barHeight - e.clientY + getElementViewTop(volumeBarWrap)) / barHeight; + percentage = percentage > 0 ? percentage : 0; + percentage = percentage < 1 ? percentage : 1; + _self.updateBar.call(_self, 'volume', percentage, 'height'); + _self.audio.volume = percentage; + if (_self.audio.muted) { + _self.audio.muted = false; + } + if (percentage === 1) { + volumeicon.className = 'demo-icon aplayer-icon-volume-up'; + } + else { + volumeicon.className = 'demo-icon aplayer-icon-volume-down'; + } + }); + volumeicon.addEventListener('click', function () { + if (_self.audio.muted) { + _self.audio.muted = false; + volumeicon.className = _self.audio.volume === 1 ? 'demo-icon aplayer-icon-volume-up' : 'demo-icon aplayer-icon-volume-down'; + _self.updateBar.call(_self, 'volume', _self.audio.volume, 'height'); + } + else { + _self.audio.muted = true; + volumeicon.className = 'demo-icon aplayer-icon-volume-off'; + _self.updateBar.call(_self, 'volume', 0, 'height'); + } + }); - // loop - this.audio.loop = this.playIndex > -1 ? false : this.loop; + // get element's view position + function getElementViewLeft(element) { + var actualLeft = element.offsetLeft; + var current = element.offsetParent; + var elementScrollLeft; + while (current !== null) { + actualLeft += current.offsetLeft; + current = current.offsetParent; + } + elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft; + return actualLeft - elementScrollLeft; + } + function getElementViewTop(element) { + var actualTop = element.offsetTop; + var current = element.offsetParent; + var elementScrollTop; + while (current !== null) { + actualTop += current.offsetTop; + current = current.offsetParent; + } + elementScrollTop = document.body.scrollTop + document.documentElement.scrollTop; + return actualTop - elementScrollTop; + } + + // loop control + this.element.getElementsByClassName('aplayer-icon-loop')[0].addEventListener('click', function () { + if (_self.loop) { + this.classList.add('aplayer-noloop'); + _self.loop = false; + } + else { + this.classList.remove('aplayer-noloop'); + _self.loop = true; + } + }); + + // toggle menu control if (this.playIndex > -1) { - this.audios[indexMusic] = this.audio; + this.element.getElementsByClassName('aplayer-icon-menu')[0].addEventListener('click', function () { + var list = _self.element.getElementsByClassName('aplayer-list')[0]; + if (!list.classList.contains('aplayer-list-hide')) { + list.classList.add('aplayer-list-hide'); + } + else { + list.classList.remove('aplayer-list-hide'); + } + }); } - } - else { - this.audio = this.audios[indexMusic]; - this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100; - this.audio.currentTime = 0; - } - // fill in lrc - if (this.option.showlrc) { - this.lrc = this.playIndex > -1 ? this.lrcs[indexMusic] : this.lrcs[0]; - this.element.classList.add('aplayer-withlrc'); - var lrcHTML = ''; - this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0]; - for (i = 0; i < this.lrc.length; i++) { - lrcHTML += '

' + this.lrc[i][1] + '

'; + this.setMusic(0); + }; + + /** + * Set music + */ + APlayer.prototype.setMusic = function (index) { + // get this.music + if (this.playIndex > -1 && typeof(arguments[0]) !== 'undefined') { + this.playIndex = arguments[0]; } - this.lrcContents.innerHTML = lrcHTML; - if (!this.lrcIndex) { - this.lrcIndex = 0; + var indexMusic = this.playIndex; + this.music = this.playIndex > -1 ? this.option.music[indexMusic] : this.option.music; + + // set html + if (this.music.pic) { + this.element.getElementsByClassName('aplayer-pic')[0].style.backgroundImage = 'url(' + encodeURI(this.music.pic) + ')'; } - this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current'); - this.lrcContents.style.transform = 'translateY(0px)'; - this.lrcContents.style.webkitTransform = 'translateY(0px)'; - } - - // set duration time - if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first - this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00'; - } - - // autoplay - if (this.option.autoplay && !this.isMobile) { - this.play(); - } - this.option.autoplay = true; // autoplay next music - - if (this.isMobile) { - this.pause(); - } -}; - -/** - * Play music - */ -APlayer.prototype.play = function () { - this.playButton.classList.add('aplayer-hide'); - this.pauseButton.classList.remove('aplayer-hide'); - this.audio.play(); - var _self = this; - if (this.playedTime) { - clearInterval(this.playedTime); - } - this.playedTime = setInterval(function () { - _self.updateBar.call(_self, 'played', _self.audio.currentTime / _self.audio.duration, 'width'); - if (_self.option.showlrc) { - _self.updateLrc.call(_self); + this.element.getElementsByClassName('aplayer-title')[0].innerHTML = this.music.title; + this.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + this.music.author; + if (this.playIndex > -1) { + if (this.element.getElementsByClassName('aplayer-list-light')[0]) { + this.element.getElementsByClassName('aplayer-list-light')[0].classList.remove('aplayer-list-light'); + } + this.element.getElementsByClassName('aplayer-list')[0].getElementsByTagName('li')[indexMusic].classList.add('aplayer-list-light'); } - _self.element.getElementsByClassName('aplayer-ptime')[0].innerHTML = _self.secondToTime(_self.audio.currentTime); - }, 100); -}; -/** - * Pause music - */ -APlayer.prototype.pause = function () { - this.pauseButton.classList.add('aplayer-hide'); - this.playButton.classList.remove('aplayer-hide'); - this.audio.pause(); - clearInterval(this.playedTime); -}; + // set the previous audio object + if (this.audio) { + this.pause(); + this.audio.currentTime = 0; + } -/** - * Update progress bar, including loading progress bar and play progress bar - * - * @param {String} type - Point out which bar it is, should be played loaded or volume - * @param {Number} percentage - * @param {String} direction - Point out the direction of this bar, Should be height or width - */ -APlayer.prototype.updateBar = function (type, percentage, direction) { - percentage = percentage > 0 ? percentage : 0; - percentage = percentage < 1 ? percentage : 1; - this[type + 'Bar'].style[direction] = percentage * 100 + '%'; -}; + // get this audio object + if ((this.playIndex > -1 && !this.audios[indexMusic]) || this.playIndex === -1) { + this.audio = document.createElement("audio"); + this.audio.src = this.music.url; + this.audio.preload = this.isMobile ? 'none' : 'metadata'; + this.audio.currentTime = 0; -/** - * Update lrc - * - * @param {Number} currentTime - */ -APlayer.prototype.updateLrc = function (currentTime) { - if (typeof(arguments[0]) === 'undefined') { - currentTime = this.audio.currentTime; - } - if (this.lrcIndex > this.lrc.length - 1 || currentTime < this.lrc[this.lrcIndex][0] || (!this.lrc[this.lrcIndex + 1] || currentTime >= this.lrc[this.lrcIndex + 1][0])) { - for (var i = 0; i < this.lrc.length; i++) { - if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) { - this.lrcIndex = i; - this.lrcContents.style.transform = 'translateY(' + -this.lrcIndex * 20 + 'px)'; - this.lrcContents.style.webkitTransform = 'translateY(' + -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'); + // show audio time + var _self = this; + this.audio.addEventListener('durationchange', function () { + if (_self.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first + _self.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = _self.secondToTime(_self.audio.duration); + } + }); + + // show audio loaded bar + _self.audio.addEventListener('progress', function () { + var percentage = _self.audio.buffered.length ? _self.audio.buffered.end(_self.audio.buffered.length - 1) / _self.audio.duration : 0; + _self.updateBar.call(_self, 'loaded', percentage, 'width'); + }); + + // audio download error + this.audio.addEventListener('error', function () { + _self.element.getElementsByClassName('aplayer-author')[0].innerHTML = ' - ' + 'Error happens ╥﹏╥'; + }); + + // multiple music play + if (this.playIndex > -1) { + this.audio.addEventListener('ended', function () { + if (_self.playIndex < _self.option.music.length - 1) { + _self.setMusic(++_self.playIndex); + } + else if (_self.loop) { + _self.setMusic(0); + } + else if (!_self.loop) { + _self.pause(); + } + }); + } + + // control volume + this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100; + + // loop + this.audio.loop = this.playIndex > -1 ? false : this.loop; + + if (this.playIndex > -1) { + this.audios[indexMusic] = this.audio; } } - } -}; + else { + this.audio = this.audios[indexMusic]; + this.audio.volume = parseInt(this.element.getElementsByClassName('aplayer-volume')[0].style.height) / 100; + this.audio.currentTime = 0; + } -/** - * Parse second to 00:00 format - * - * @param {Number} second - * @return {String} 00:00 format - */ -APlayer.prototype.secondToTime = function (second) { - var add0 = function (num) { - return num < 10 ? '0' + num : '' + num; + // fill in lrc + if (this.option.showlrc) { + this.lrc = this.playIndex > -1 ? this.lrcs[indexMusic] : this.lrcs[0]; + this.element.classList.add('aplayer-withlrc'); + var lrcHTML = ''; + this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0]; + for (i = 0; i < this.lrc.length; i++) { + lrcHTML += '

' + this.lrc[i][1] + '

'; + } + this.lrcContents.innerHTML = lrcHTML; + if (!this.lrcIndex) { + this.lrcIndex = 0; + } + this.lrcContents.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current'); + this.lrcContents.style.transform = 'translateY(0px)'; + this.lrcContents.style.webkitTransform = 'translateY(0px)'; + } + + // set duration time + if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first + this.element.getElementsByClassName('aplayer-dtime')[0].innerHTML = this.audio.duration ? this.secondToTime(this.audio.duration) : '00:00'; + } + + // autoplay + if (this.option.autoplay && !this.isMobile) { + this.play(); + } + this.option.autoplay = true; // autoplay next music + + if (this.isMobile) { + this.pause(); + } }; - var min = parseInt(second / 60); - var sec = parseInt(second - min * 60); - return add0(min) + ':' + add0(sec); -}; -/** - * Parse lrc, suppose multiple time tag - * - * @param {Array} arr - Format: - * [mm:ss.xx]lyric - * [mm:ss.xxx]lyric - * [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric - * - * @return {Array} [[[time, text], [time, text], [time, text], ...], [[time, text], [time, text], [time, text], ...], ...] - */ -APlayer.prototype.parseLrc = function (arr) { - var lrcs = []; - for (var k = 0; k < arr.length; k++) { - var lyric = arr[k].split('\n'); - var lrc = []; - var lyricLen = lyric.length; - for (var i = 0; i < lyricLen; i++) { - // match lrc time - var lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g); - // match lrc text - var lrcText = lyric[i].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g, '').replace(/^\s+|\s+$/g, ''); + /** + * Play music + */ + APlayer.prototype.play = function () { + this.playButton.classList.add('aplayer-hide'); + this.pauseButton.classList.remove('aplayer-hide'); + this.audio.play(); + var _self = this; + if (this.playedTime) { + clearInterval(this.playedTime); + } + 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); + }; - if (lrcTimes != null) { - // handle multiple time tag - var timeLen = lrcTimes.length; - for (var j = 0; j < timeLen; j++) { - var oneTime = /\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(lrcTimes[j]); - var lrcTime = (oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000); - lrc.push([lrcTime, lrcText]); + /** + * Pause music + */ + APlayer.prototype.pause = function () { + this.pauseButton.classList.add('aplayer-hide'); + this.playButton.classList.remove('aplayer-hide'); + this.audio.pause(); + clearInterval(this.playedTime); + }; + + /** + * Update progress bar, including loading progress bar and play progress bar + * + * @param {String} type - Point out which bar it is, should be played loaded or volume + * @param {Number} percentage + * @param {String} direction - Point out the direction of this bar, Should be height or width + */ + APlayer.prototype.updateBar = function (type, percentage, direction) { + percentage = percentage > 0 ? percentage : 0; + percentage = percentage < 1 ? percentage : 1; + this[type + 'Bar'].style[direction] = percentage * 100 + '%'; + }; + + /** + * Update lrc + * + * @param {Number} currentTime + */ + APlayer.prototype.updateLrc = function (currentTime) { + if (typeof(arguments[0]) === 'undefined') { + currentTime = this.audio.currentTime; + } + if (this.lrcIndex > this.lrc.length - 1 || currentTime < this.lrc[this.lrcIndex][0] || (!this.lrc[this.lrcIndex + 1] || currentTime >= this.lrc[this.lrcIndex + 1][0])) { + for (var i = 0; i < this.lrc.length; i++) { + if (currentTime >= this.lrc[i][0] && (!this.lrc[i + 1] || currentTime < this.lrc[i + 1][0])) { + this.lrcIndex = i; + this.lrcContents.style.transform = 'translateY(' + -this.lrcIndex * 20 + 'px)'; + this.lrcContents.style.webkitTransform = 'translateY(' + -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'); } } } - // sort by time - lrc.sort(function (a, b) { - return a[0] - b[0]; - }); - lrcs.push(lrc); + }; + + /** + * Parse second to 00:00 format + * + * @param {Number} second + * @return {String} 00:00 format + */ + APlayer.prototype.secondToTime = function (second) { + var add0 = function (num) { + return num < 10 ? '0' + num : '' + num; + }; + var min = parseInt(second / 60); + var sec = parseInt(second - min * 60); + return add0(min) + ':' + add0(sec); + }; + + /** + * Parse lrc, suppose multiple time tag + * + * @param {Array} arr - Format: + * [mm:ss.xx]lyric + * [mm:ss.xxx]lyric + * [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric + * + * @return {Array} [[[time, text], [time, text], [time, text], ...], [[time, text], [time, text], [time, text], ...], ...] + */ + APlayer.prototype.parseLrc = function (arr) { + var lrcs = []; + for (var k = 0; k < arr.length; k++) { + var lyric = arr[k].split('\n'); + var lrc = []; + var lyricLen = lyric.length; + for (var i = 0; i < lyricLen; i++) { + // match lrc time + var lrcTimes = lyric[i].match(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g); + // match lrc text + var lrcText = lyric[i].replace(/\[(\d{2}):(\d{2})\.(\d{2,3})]/g, '').replace(/^\s+|\s+$/g, ''); + + if (lrcTimes != null) { + // handle multiple time tag + var timeLen = lrcTimes.length; + for (var j = 0; j < timeLen; j++) { + var oneTime = /\[(\d{2}):(\d{2})\.(\d{2,3})]/.exec(lrcTimes[j]); + var lrcTime = (oneTime[1]) * 60 + parseInt(oneTime[2]) + parseInt(oneTime[3]) / ((oneTime[3] + '').length === 2 ? 100 : 1000); + lrc.push([lrcTime, lrcText]); + } + } + } + // sort by time + lrc.sort(function (a, b) { + return a[0] - b[0]; + }); + lrcs.push(lrc); + } + return lrcs; + }; + + if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') { + module.exports = APlayer } - return lrcs; -}; \ No newline at end of file + else { + window.APlayer = APlayer; + } +})(); \ No newline at end of file