${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)'; - } - }; - const apiurl = this.option.music[index].lrc; - xhr.open('get', apiurl, true); - xhr.send(null); - } - if (lrcs) { - this.lrcs[index] = parseLrc(lrcs); - } - else { - if (this.option.showlrc === 3) { - this.lrcs[index] = [['00:00', 'Loading']]; - } - else { - this.lrcs[index] = [['00:00', 'Not available']]; - } - } - } - - this.lrc = this.lrcs[index]; - let lrcHTML = ''; - this.lrcContents = this.element.getElementsByClassName('aplayer-lrc-contents')[0]; - for (let 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'; - } - } - - /** - * Play music - */ - play (time) { - if (Object.prototype.toString.call(time) === '[object Number]') { - this.audio.currentTime = time; - } - if (this.audio.paused) { - this.audio.play(); - } - } - - /** - * Pause music - */ - pause () { - if (!this.audio.paused) { - this.audio.pause(); - } - } - - /** - * Set volume - */ - volume (percentage) { - this.updateBar('volume', percentage, 'height'); - this.audio.volume = percentage; - if (this.audio.muted) { - this.audio.muted = false; - } - if (percentage === 1) { - this.volumeicon.className = 'aplayer-icon aplayer-icon-volume-up'; - this.volumeicon.innerHTML = this.getSVG('volume-up'); - } - else { - this.volumeicon.className = 'aplayer-icon aplayer-icon-volume-down'; - this.volumeicon.innerHTML = this.getSVG('volume-down'); - } - } - - /** - * attach event - */ - on (name, func) { - if (typeof func === 'function') { - this.event[name].push(func); - } - } - - /** - * toggle between play and pause - */ - toggle () { - if (this.button.classList.contains('aplayer-play')) { - this.play(); - } - else if (this.button.classList.contains('aplayer-pause')) { - this.pause(); - } - } - - /** - * get whether multiple music definitions are loaded - */ - isMultiple () { - return this.option.music.length > 1; - } - - /** - * get random order, using Fisher–Yates shuffle - */ - getRandomOrder () { - function random (min, max) { - if (max) { - max = min; - min = 0; - } - return min + Math.floor(Math.random() * (max - min + 1)); - } - function shuffle (arr) { - const length = arr.length, - shuffled = new Array(length); - for (let index = 0, rand; index < length; index++) { - rand = random(0, index); - if (rand !== index) {shuffled[index] = shuffled[rand];} - shuffled[rand] = arr[index]; - } - return shuffled; - } - if (this.isMultiple()) { - this.randomOrder = shuffle([...Array(this.option.music.length)].map(function (item, i) { - return i; - })); - } - } - - /** - * get next random number - */ - nextRandomNum () { - if (this.isMultiple()) { - const index = this.randomOrder.indexOf(this.playIndex); - if (index === this.randomOrder.length - 1) { - return this.randomOrder[0]; - } - else { - return this.randomOrder[index + 1]; - } - } - else { - return 0; - } - } - - /** - * Remove song from playlist - */ - removeSong (indexOfSong) { - if (this.option.music[indexOfSong]) { // Check if song exists - const list = this.element.getElementsByClassName('aplayer-list')[0]; - const oList = list.getElementsByTagName('ol')[0]; - const liList = oList.getElementsByTagName('li'); - if (this.option.music[indexOfSong + 1] || this.option.music[indexOfSong - 1]) { - if (indexOfSong === this.playIndex) { - if (this.option.music[indexOfSong + 1]) { // Play next song if it exists. - this.setMusic(indexOfSong + 1); - this.playIndex = this.playIndex - 1; // Adjust play index for removed song - } - else if (!this.option.music[indexOfSong + 1]) { // Play previous song if it exists. - this.setMusic(indexOfSong - 1); - } - } - else { - if (indexOfSong < this.playIndex) { - this.playIndex = this.playIndex - 1; - } - } - if (liList[indexOfSong + 1]) { - const targetSong = liList[indexOfSong - 1]; - targetSong.getElementsByClassName('aplayer-list-index')[0].textContent = indexOfSong; - } - else { - for (let i = 1; i < liList.length; i++) { - if (liList[indexOfSong + i]) { - const targetSong = liList[indexOfSong + i]; - targetSong.getElementsByClassName('aplayer-list-index')[0].textContent = indexOfSong + i; - } - } - } - this.option.music.splice(indexOfSong, 1); // Delete song from music array - this.audios.splice(indexOfSong, 1); // Delete song from audios array - liList[indexOfSong].remove(); - if (this.option.music[0] && this.option.music[1]) { - this.multiple = false; - this.element.classList.remove('aplayer-withlist'); - } - } - const listHeight = parseInt(list.style.height, 10); - list.style.height = listHeight - 33 + "px"; - } - else { - console.error("ERROR: Song does not exist"); - } - } - - /** - * destroy this player - */ - destroy () { - instances.splice(instances.indexOf(this), 1); - this.pause(); - this.element.innerHTML = ''; - clearInterval(this.playedTime); - for (const key in this) { - if (this.hasOwnProperty(key)) { - delete this[key]; - } - } - } - - /** - * add music dynamically - * - * @param {Array} newMusic - */ - addMusic (newMusic) { - const wasSingle = !this.isMultiple(); - - this.option.music = this.option.music.concat(newMusic); - - const list = this.element.getElementsByClassName('aplayer-list')[0]; - const listEle = list.getElementsByTagName('ol')[0]; - let newItemHTML = ``; - for (let i = 0; i < newMusic.length; i++) { - newItemHTML += ` -${this.lrc[i][1]}
`; + } + this.template.lrc.innerHTML = lrcHTML; + if (!this.lrcIndex) { + this.lrcIndex = 0; + } + this.template.lrc.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current'); + this.template.lrc.style.transform = 'translateY(0px)'; + this.template.lrc.style.webkitTransform = 'translateY(0px)'; + } + }; + const apiurl = this.options.music[index].lrc; + xhr.open('get', apiurl, true); + xhr.send(null); + } + if (lrcs) { + this.lrcs[index] = parseLrc(lrcs); + } + else { + if (this.options.showlrc === 3) { + this.lrcs[index] = [['00:00', 'Loading']]; + } + else { + this.lrcs[index] = [['00:00', 'Not available']]; + } + } + } + + this.lrc = this.lrcs[index]; + let lrcHTML = ''; + for (let i = 0; i < this.lrc.length; i++) { + lrcHTML += `${this.lrc[i][1]}
`; + } + this.template.lrc.innerHTML = lrcHTML; + if (!this.lrcIndex) { + this.lrcIndex = 0; + } + this.template.lrc.getElementsByTagName('p')[0].classList.add('aplayer-lrc-current'); + this.template.lrc.style.transform = 'translateY(0px)'; + this.template.lrc.style.webkitTransform = 'translateY(0px)'; + } + + // set duration time + if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first + this.template.dtime.innerHTML = this.audio.duration ? utils.secondToTime(this.audio.duration) : '00:00'; + } + } + + /** + * Play music + */ + play (time) { + if (Object.prototype.toString.call(time) === '[object Number]') { + this.audio.currentTime = time; + } + if (this.audio.paused) { + this.audio.play(); + } + } + + /** + * Pause music + */ + pause () { + if (!this.audio.paused) { + this.audio.pause(); + } + } + + switchVolumeIcon () { + if (this.volume() >= 0.95) { + this.template.volumeButton.innerHTML = Icons.volumeUp; + } + else if (this.volume() > 0) { + this.template.volumeButton.innerHTML = Icons.volumeDown; + } + else { + this.template.volumeButton.innerHTML = Icons.volumeOff; + } + } + + /** + * Set volume + */ + volume (percentage, nostorage) { + percentage = parseFloat(percentage); + if (!isNaN(percentage)) { + percentage = Math.max(percentage, 0); + percentage = Math.min(percentage, 1); + this.bar.set('volume', percentage, 'height'); + if (!nostorage) { + this.user.set('volume', percentage); + } + + this.audio.volume = percentage; + if (this.audio.muted) { + this.audio.muted = false; + } + + this.switchVolumeIcon(); + } + + return this.audio.volume; + } + + /** + * attach event + */ + on (name, func) { + if (typeof func === 'function') { + this.event[name].push(func); + } + } + + /** + * toggle between play and pause + */ + toggle () { + if (this.template.button.classList.contains('aplayer-play')) { + this.play(); + } + else if (this.template.button.classList.contains('aplayer-pause')) { + this.pause(); + } + } + + /** + * get whether multiple music definitions are loaded + */ + isMultiple () { + return this.options.music.length > 1; + } + + /** + * get random order, using Fisher–Yates shuffle + */ + getRandomOrder () { + function random (min, max) { + if (max) { + max = min; + min = 0; + } + return min + Math.floor(Math.random() * (max - min + 1)); + } + function shuffle (arr) { + const length = arr.length, + shuffled = new Array(length); + for (let index = 0, rand; index < length; index++) { + rand = random(0, index); + if (rand !== index) { shuffled[index] = shuffled[rand]; } + shuffled[rand] = arr[index]; + } + return shuffled; + } + if (this.isMultiple()) { + this.randomOrder = shuffle([...Array(this.options.music.length)].map(function (item, i) { + return i; + })); + } + } + + /** + * get next random number + */ + nextRandomNum () { + if (this.isMultiple()) { + const index = this.randomOrder.indexOf(this.playIndex); + if (index === this.randomOrder.length - 1) { + return this.randomOrder[0]; + } + else { + return this.randomOrder[index + 1]; + } + } + else { + return 0; + } + } + + /** + * Remove song from playlist + */ + removeSong (indexOfSong) { + if (this.options.music[indexOfSong]) { // Check if song exists + if (this.options.music[indexOfSong + 1] || this.options.music[indexOfSong - 1]) { + if (indexOfSong === this.playIndex) { + if (this.options.music[indexOfSong + 1]) { // Play next song if it exists. + this.setMusic(indexOfSong + 1); + this.playIndex = this.playIndex - 1; // Adjust play index for removed song + } + else if (!this.options.music[indexOfSong + 1]) { // Play previous song if it exists. + this.setMusic(indexOfSong - 1); + } + } + else { + if (indexOfSong < this.playIndex) { + this.playIndex = this.playIndex - 1; + } + } + if (this.template.list[indexOfSong + 1]) { + const targetSong = this.template.list[indexOfSong - 1]; + targetSong.getElementsByClassName('aplayer-list-index')[0].textContent = indexOfSong; + } + else { + for (let i = 1; i < this.template.list.length; i++) { + if (this.template.list[indexOfSong + i]) { + const targetSong = this.template.list[indexOfSong + i]; + targetSong.getElementsByClassName('aplayer-list-index')[0].textContent = indexOfSong + i; + } + } + } + this.options.music.splice(indexOfSong, 1); // Delete song from music array + this.audios.splice(indexOfSong, 1); // Delete song from audios array + this.template.list[indexOfSong].remove(); + if (this.options.music[0] && this.options.music[1]) { + this.multiple = false; + this.container.classList.remove('aplayer-withlist'); + } + } + const listHeight = parseInt(this.template.list.style.height, 10); + this.template.list.style.height = listHeight - 33 + "px"; + } + else { + console.error("ERROR: Song does not exist"); + } + } + + /** + * destroy this player + */ + destroy () { + instances.splice(instances.indexOf(this), 1); + this.pause(); + this.container.innerHTML = ''; + clearInterval(this.playedTime); + for (const key in this) { + if (this.hasOwnProperty(key)) { + delete this[key]; + } + } + } + + /** + * add music dynamically + * + * @param {Array} newMusic + */ + addMusic (newMusic) { + const wasSingle = !this.isMultiple(); + + this.options.music = this.options.music.concat(newMusic); + + let newItemHTML = ``; + for (let i = 0; i < newMusic.length; i++) { + newItemHTML += ` +