release v1.10.0

paladio · Mar 22, 2018 · b1aa4b6 · b1aa4b6
1 parent 5bfde99
commit b1aa4b6
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 11 deletions.
diff --git a/dist/APlayer.min.css b/dist/APlayer.min.css
diff --git a/dist/APlayer.min.css.map b/dist/APlayer.min.css.map
diff --git a/dist/APlayer.min.js b/dist/APlayer.min.js
diff --git a/dist/APlayer.min.js.map b/dist/APlayer.min.js.map
diff --git a/docs/README.md b/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);
 });
 ```
 

diff --git a/docs/config.js b/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'
+ }]
+ });
 }
diff --git a/docs/index.html b/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/[email protected]/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>

diff --git a/docs/landing.html b/docs/landing.html
@@ -5,6 +5,7 @@ <h3>🍭 Wow, such a beautiful HTML5 music player.</h3>
 <div class="aplayer-wrap">
  <div id="aplayer1"></div>
 </div>
+<div id="aplayer0"></div>
 
 <div class="landing-buttons">
  <a class="landing-button" target="_blank" href="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/MoePlayer/APlayer">

diff --git a/docs/zh-Hans/README.md b/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>

diff --git a/package.json b/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",