diff --git a/demo/demo.js b/demo/demo.js index e307293d..a6046d00 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -144,8 +144,8 @@ const setTheme = (index) => { } }; setTheme(ap5.list.index); -ap5.on('listswitch', (index) => { - setTheme(index); +ap5.on('listswitch', (data) => { + setTheme(data.index); }); const ap6 = new APlayer({ @@ -188,18 +188,17 @@ const ap7 = new APlayer({ } }); -let ap8; +const ap8 = new APlayer({ + element: document.getElementById('player8'), + mutex: true, + theme: '#ad7a86', + order: 'random', + lrcType: 3, + fixed: true, +}); $.ajax({ url: 'https://api.i-meto.com/meting/api?server=netease&type=playlist&id=35798529', success: function (list) { - ap8 = new APlayer({ - element: document.getElementById('player8'), - mutex: true, - theme: '#ad7a86', - order: 'random', - lrcType: 3, - fixed: true, - audio: JSON.parse(list) - }); + ap8.list.add(JSON.parse(list)); } }); \ No newline at end of file diff --git a/src/css/index.scss b/src/css/index.scss index 0d3f0bd9..c1a3fc27 100644 --- a/src/css/index.scss +++ b/src/css/index.scss @@ -85,7 +85,9 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6; box-shadow: none; .aplayer-list { - margin-bottom: 66px; + margin-bottom: 65px; + border: 1px solid #eee; + border-bottom: none; } .aplayer-body { diff --git a/src/js/list.js b/src/js/list.js index 1d54fe4a..9c831fff 100644 --- a/src/js/list.js +++ b/src/js/list.js @@ -55,6 +55,18 @@ class List { this.player.events.trigger('listadd', { audios: audios, }); + + if (Object.prototype.toString.call(audios) !== '[object Array]') { + audios = [audios]; + } + audios.map((item) => { + item.name = item.name || item.title || 'Audio name'; + item.artist = item.artist || item.author || 'Audio artist'; + item.cover = item.cover || item.pic; + item.type = item.type || 'normal'; + return item; + }); + const wasSingle = !(this.audios.length > 1); const wasEmpty = this.audios.length === 0; @@ -95,6 +107,7 @@ class List { list[index].remove(); this.audios.splice(index, 1); + this.lrc.parsed.splice(index, 1); if (index === this.index) { if (this.audios[index]) { @@ -165,6 +178,7 @@ class List { this.player.container.classList.remove('aplayer-withlist'); this.player.pause(); this.audios = []; + this.lrc.parsed = []; this.player.audio.src = ''; this.player.template.listOl.innerHTML = ''; this.player.template.pic.style.backgroundImage = ''; diff --git a/src/js/lrc.js b/src/js/lrc.js index 2cb4420d..38326fcf 100644 --- a/src/js/lrc.js +++ b/src/js/lrc.js @@ -5,7 +5,6 @@ class Lrc { this.container = options.container; this.async = options.async; this.player = options.player; - this.content = options.content; this.parsed = []; this.index = 0; this.current = []; @@ -47,8 +46,8 @@ class Lrc { switch (index) { if (!this.parsed[index]) { if (!this.async) { - if (this.content[index]) { - this.parsed[index] = this.parse(this.content[index]); + if (this.player.list.audios[index].lrc) { + this.parsed[index] = this.parse(this.player.list.audios[index].lrc); } else { this.parsed[index] = [['00:00', 'Not available']]; @@ -73,7 +72,7 @@ class Lrc { this.current = this.parsed[index]; } }; - const apiurl = this.content[index]; + const apiurl = this.player.list.audios[index].lrc; xhr.open('get', apiurl, true); xhr.send(null); } diff --git a/src/js/player.js b/src/js/player.js index 94faf06d..088a0112 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -79,7 +79,6 @@ class APlayer { this.lrc = new Lrc({ container: this.template.lrc, async: this.options.lrcType === 3, - content: this.options.audio.map((item) => item.lrc), player: this, }); }