fix lrc in fixed mode

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));
     }
 });

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 {

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 = '';

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);
             }

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,
             });
         }