release v1.10.0

docs/README.md

@@ -67,6 +67,7 @@ const ap = new APlayer(options);
 Name | Default | Description
 ----|-------|----
 container | document.querySelector('.aplayer') | player container
+fixed | false | enable fixed mode, [see more details](https://aplayer.js.org/#/home?id=fixed-mode)
 mini | false | enable mini mode, [see more details](https://aplayer.js.org/#/home?id=mini-mode)
 autoplay | false | audio autoplay
 theme | '#b7daff' | main color
@@ -170,8 +171,20 @@ const ap = new APlayer({
   ap.notice('Amazing player', 2000, 0.8);
   ```
 
++ `ap.skipBack()`: skip to previous audio
+
++ `ap.skipForward()`: skip to next audio
+
 + `ap.destroy()`: destroy player
 
++ `ap.lrc`
+
+  + `ap.lrc.show()`: show lrc
+
+  + `ap.lrc.hide()`: hide lrc
+
+  + `ap.lrc.toggle()`: toggle lrc between show and hide
+
 + `ap.list`
 
   + `ap.list.show()`: show list
@@ -264,6 +277,8 @@ Player events
 - noticeshow
 - noticehide
 - destroy
+- lrcshow
+- lrchide
 
 ## LRC
 
@@ -404,10 +419,33 @@ const ap = new APlayer({
 });
 ```
 
+## Fixed mode
+
+APlayer can be fixed to page bottom via fixed mode, fixed mode is a very different mode, enjoy it!
+
+<div class="aplayer-wrap">
+    <div id="aplayer9"><button class="docute-button load">Click to load player</div>
+</div>
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('player'),
+    fixed: true,
+    audio: [{
+        name: 'name',
+        artist: 'artist',
+        url: 'url.mp3',
+        cover: 'cover.jpg',
+    }]
+});
+```
+
 ## Mini mode
 
 If you don't have enough space for normal player, mini mode might be your choice.
 
+Please note that mini mode is conflicted with fixed mode.
+
 <div class="aplayer-wrap">
     <div id="aplayer6"><button class="docute-button load">Click to load player</div>
 </div>
@@ -525,8 +563,8 @@ const setTheme = (index) => {
     }
 };
 setTheme(ap.list.index);
-ap.on('listswitch', (index) => {
-    setTheme(index);
+ap.on('listswitch', (data) => {
+    setTheme(data.index);
 });
 ```
 

docs/config.js

@@ -56,6 +56,7 @@ function player () {
         context.event.on('landing:updated', function () {
             console.log('landing:updated');
             clearPlayer();
+            aplayer0();
             aplayer1();
         });
         context.event.on('content:updated', function () {
@@ -72,8 +73,8 @@ function player () {
 
 function clearPlayer () {
     for (let i = 0; i < 10; i++) {
-        if (window['ap' + (i + 1)]) {
-            window['ap' + (i + 1)].destroy();
+        if (window['ap' + i]) {
+            window['ap' + i].destroy();
         }
     }
 }
@@ -108,6 +109,36 @@ function aplayer1 () {
     });
 }
 
+function aplayer0 () {
+    window.ap0 = new APlayer({
+        container: document.getElementById('aplayer0'),
+        fixed: true,
+        lrcType: 3,
+        audio: [{
+            name: '前前前世',
+            artist: 'RADWIMPS',
+            url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
+            cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
+            lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
+            theme: '#505d6b'
+        }, {
+            name: 'トリカゴ',
+            artist: 'XX:me',
+            url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
+            cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
+            lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
+            theme: '#46718b'
+        }, {
+            name: '光るなら',
+            artist: 'Goose house',
+            url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
+            cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
+            lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
+            theme: '#ebd0c2'
+        }]
+    });
+}
+
 function aplayer2 () {
     window.ap2 = new APlayer({
         container: document.getElementById('aplayer2'),
@@ -279,4 +310,34 @@ function aplayer8 () {
             });
         }
     });
+}
+
+function aplayer9 () {
+    window.ap9 = new APlayer({
+        container: document.getElementById('aplayer9'),
+        fixed: true,
+        lrcType: 3,
+        audio: [{
+            name: '光るなら',
+            artist: 'Goose house',
+            url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
+            cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
+            lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
+            theme: '#ebd0c2'
+        }, {
+            name: 'トリカゴ',
+            artist: 'XX:me',
+            url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
+            cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
+            lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
+            theme: '#46718b'
+        }, {
+            name: '前前前世',
+            artist: 'RADWIMPS',
+            url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
+            cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
+            lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
+            theme: '#505d6b'
+        }]
+    });
 }

docs/index.html

@@ -16,9 +16,9 @@
 
     gtag('config', 'UA-48084758-8');
   </script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.9.1/dist/APlayer.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
   <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/aplayer@1.9.1/dist/APlayer.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>
   <style>
     body {
@@ -31,6 +31,9 @@
       max-width: 700px;
       margin: 20px 0;
     }
+    .sidebar-toggle {
+      z-index: 90;
+    }
   </style>
 </head>
 <body>

docs/landing.html

@@ -5,6 +5,7 @@
 <div class="aplayer-wrap">
     <div id="aplayer1"></div>
 </div>
+<div id="aplayer0"></div>
 
 <div class="landing-buttons">
     <a class="landing-button" target="_blank" href="https://github.com/MoePlayer/APlayer">

docs/zh-Hans/README.md

@@ -68,6 +68,7 @@ const ap = new APlayer(options);
 名称 | 默认值 | 描述
 ----|-------|----
 container | document.querySelector('.aplayer') | 播放器容器元素
+fixed | false | 开启吸底模式, [详情](https://aplayer.js.org/#/home?id=fixed-mode)
 mini | false | 开启迷你模式, [详情](https://aplayer.js.org/#/home?id=mini-mode)
 autoplay | false | 音频自动播放
 theme | '#b7daff' | 主题色
@@ -171,8 +172,20 @@ const ap = new APlayer({
   ap.notice('Amazing player', 2000, 0.8);
   ```
 
++ `ap.skipBack()`: 切换到下一首音频
+
++ `ap.skipForward()`: 切换到上一首音频
+
 + `ap.destroy()`: 销毁播放器
 
++ `ap.lrc`
+
+  + `ap.lrc.show()`: 显示歌词
+
+  + `ap.lrc.hide()`: 隐藏歌词
+
+  + `ap.lrc.toggle()`: 显示/隐藏歌词
+
 + `ap.list`
 
   + `ap.list.show()`: 显示播放列表
@@ -265,6 +278,8 @@ ap.on('ended', function () {
 - noticeshow
 - noticehide
 - destroy
+- lrcshow
+- lrchide
 
 ## 歌词
 
@@ -404,11 +419,33 @@ const ap = new APlayer({
     ]
 });
 ```
+## 吸底模式
+
+APlayer 可以通过吸底模式固定在页面底部，这种模式跟普通模式有很大不同。
+
+<div class="aplayer-wrap">
+    <div id="aplayer9"><button class="docute-button load">点击加载播放器</div>
+</div>
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('player'),
+    fixed: true,
+    audio: [{
+        name: 'name',
+        artist: 'artist',
+        url: 'url.mp3',
+        cover: 'cover.jpg',
+    }]
+});
+```
 
 ## 迷你模式
 
 如果你没有足够空间来放置正常模式的播放器，那么你可以考虑使用迷你模式。
 
+请注意迷你模式与吸底模式冲突。
+
 <div class="aplayer-wrap">
     <div id="aplayer6"><button class="docute-button load">点击加载播放器</div>
 </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aplayer",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "description": "Wow, such a beautiful html5 music player",
   "main": "dist/APlayer.min.js",
   "style": "dist/APlayer.min.css",