diff --git a/docs/.nojekyll b/docs/.nojekyll
new file mode 100644
index 0000000..e69de29
diff --git a/docs/CNAME b/docs/CNAME
new file mode 100644
index 0000000..708febc
--- /dev/null
+++ b/docs/CNAME
@@ -0,0 +1 @@
+aplayer.js.org
\ No newline at end of file
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..70fa2ee
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,398 @@
+---
+search: english
+---
+
+# APlayer
+
+🍭 Wow, such a beautiful HTML5 music player
+
+## Special Sponsors
+
+<a href="https://pear.hk/" target="_blank">
+    <img width="222px" src="https://i.imgur.com/5qQYmfc.png">
+</a>
+<a href="https://www.upyun.com/" target="_blank">
+    <img width="222px" src="https://imgur.com/apG1uKf.png">
+</a>
+
+## Installation
+
+Using npm:
+
+```
+npm install aplayer --save
+```
+
+Using Yarn:
+
+```
+yarn add aplayer
+```
+
+## Quick Start
+
+<div class="aplayer-wrap">
+    <div id="aplayer2"><button class="docute-button load">Click to load player</div>
+</div>
+
+```html
+<link rel="stylesheet" href="APlayer.min.css">
+<div id="aplayer"></div>
+<script src="APlayer.min.js"></script>
+```
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('aplayer'),
+    audio: [{
+        name: 'name',
+        artist: 'artist',
+        url: 'url.mp3',
+        cover: 'cover.jpg',
+    }]
+});
+```
+
+Work with module bundler:
+
+```js
+import 'APlayer/dist/APlayer.min.css';
+import APlayer from 'APlayer';
+
+const ap = new APlayer(options);
+```
+
+## Options
+
+Name | Default | Description
+----|-------|----
+container | document.querySelector('.aplayer') | player container
+mini | false | enable mini mode, [see more details](https://aplayer.js.org/#/home?id=mini-mode)
+autoplay | false | audio autoplay
+theme | '#b7daff' | main color
+loop | 'all' | player loop play, values: 'all', 'one', 'none'
+order | 'list' | player play order, values: 'list', 'random'
+preload | 'auto' | values: 'none', 'metadata', 'auto'
+volume | 0.7 | default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
+audio | - | audio info, should be an object or object array
+audio.name | - | audio name
+audio.artist | - | audio artist
+audio.url | - | audio url
+audio.cover | - | audio cover
+audio.lrc | - | [see more details](https://aplayer.js.org/#/home?id=lrc)
+mutex | true | prevent to play multiple player at the same time, pause other players when this player start play
+lrc | false | [see more details](https://aplayer.js.org/#/home?id=lrc)
+listFolded | false | indicate whether list should folded at first
+listMaxHeight | - | list max height
+
+For example:
+
+<div class="aplayer-wrap">
+    <div id="aplayer3"><button class="docute-button load">Click to load player</div>
+</div>
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('player'),
+    mini: false,
+    autoplay: false,
+    theme: '#FADFA3',
+    loop: 'all',
+    order: 'random',
+    preload: 'auto',
+    volume: 0.7,
+    mutex: true,
+    listFolded: false,
+    listMaxHeight: '90px',
+    lrc: 3,
+    audio: [
+        {
+            name: 'name1',
+            artist: 'artist1',
+            url: 'url1.mp3',
+            cover: 'cover1.jpg',
+            lrc: 'lrc1.lrc'
+        },
+        {
+            name: 'name2',
+            artist: 'artist2',
+            url: 'url2.mp3',
+            cover: 'cover2.jpg',
+            lrc: 'lrc2.lrc'
+        }
+    ]
+});
+```
+
+## API
+
++ `ap.play()`: play audio
+
++ `ap.pause()`: pause audio
+
++ `ap.seek(time: number)`: seek to specified time
+
+  ```js
+  ap.seek(100);
+  ```
+
++ `ap.toggle()`: toggle between play and pause
+
++ `ap.on(event: string, handler: function)`: bind audio and player events, [see more details](https://aplayer.js.org/#/home?id=event-binding)
+
++ `ap.switchAudio(index: number)`: switch audio list
+
+  ```js
+  ap.switchAudio(1);
+  ```
+
++ `ap.addAudio(audio)`: add new audios to the list
+
+  ```js
+  ap.addAudio([
+      {
+          name: 'name',
+          artist: 'artist',
+          url: 'url.mp3',
+          cover: 'cover.jpg',
+          lrc: 'lrc.lrc'
+      }
+  ]);
+  ```
+
++ `ap.removeAudio(index: number)`: remove audio from the list
+
+  ```js
+  ap.removeAudio(1);
+  ```
+
++ `ap.volume(percentage: number, nostorage: boolean)`: set audio volume
+
+  ```js
+  ap.volume(0.1, true);
+  ```
+
++ `ap.destroy()`: destroy player
+
++ `ap.audio`: native audio
+
+ + `ap.audio.currentTime`: returns the current playback position
+
+ + `ap.audio.duration`: returns audio total time
+
+ + `ap.audio.paused`: returns whether the audio paused
+
+ + most [native api](http://www.w3schools.com/tags/ref_av_dom.asp) are supported
+
+## Event binding
+
+`ap.on(event, handler)`
+
+```js
+ap.on('ended', function () {
+    console.log('player ended');
+});
+```
+
+Video events
+
+- abort
+- canplay
+- canplaythrough
+- durationchange
+- emptied
+- ended
+- error
+- loadeddata
+- loadedmetadata
+- loadstart
+- mozaudioavailable
+- pause
+- play
+- playing
+- progress
+- ratechange
+- seeked
+- seeking
+- stalled
+- suspend
+- timeupdate
+- volumechange
+- waiting
+
+Player events
+
+- switchaudio
+- addaudio
+- removeaudio
+- destroy
+
+## LRC
+
+We have three ways to pass LRC to APlayer, indicate the way to pass LRC by option `lrc`, then put lrc to option `audio.lrc` or HTML.
+
+<div class="aplayer-wrap">
+    <div id="aplayer4"><button class="docute-button load">Click to load player</div>
+</div>
+
+### LRC file
+
+The first way, put LRC to a LRC file, LRC file will be loaded when this audio start to play.
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('aplayer'),
+    lrc: 3,
+    audio: {
+        name: 'name',
+        artist: 'artist',
+        url: 'demo.mp3',
+        cover: 'demo.jpg',
+        lrc: 'lrc.lrc'
+    }
+});
+```
+
+### LRC string in JS
+
+The second way, put LRC to a JS string.
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('aplayer'),
+    lrc: 1,
+    audio: {
+        name: 'name',
+        artist: 'artist',
+        url: 'demo.mp3',
+        cover: 'demo.jpg',
+        lrc: '[00:00.00]APlayer\n[00:04.01]is\n[00:08.02]amazing'
+    }
+});
+```
+
+### LRC in HTML
+
+The third way, put LRC to HTML.
+
+```html
+<link rel="stylesheet" href="APlayer.min.css">
+<div id="player">
+    <pre class="aplayer-lrc-content">
+        [00:00.00]APlayer audio1
+        [00:04.01]is
+        [00:08.02]amazing
+        <!-- ... -->
+    </pre>
+    <pre class="aplayer-lrc-content">
+        [00:00.00]APlayer audio2
+        [00:04.01]is
+        [00:08.02]amazing
+        <!-- ... -->
+    </pre>
+</div>
+<script src="APlayer.min.js"></script>
+```
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('aplayer'),
+    lrc: 2,
+    audio: [[
+        {
+            name: 'name1',
+            artist: 'artist1',
+            url: 'url1.mp3',
+            cover: 'cover1.jpg'
+        },
+        {
+            name: 'name2',
+            artist: 'artist2',
+            url: 'url2.mp3',
+            cover: 'cover2.jpg'
+        }
+    ]]
+});
+```
+
+### LRC format
+
+The following LRC format are supported:
+
+`[mm:ss]APlayer`
+
+`[mm:ss.xx]is`
+
+`[mm:ss.xxx]amazing`
+
+`[mm:ss.xx][mm:ss.xx]APlayer`
+
+`[mm:ss.xx]<mm:ss.xx>is`
+
+`[mm:ss.xx]amazing[mm:ss.xx]APlayer`
+
+## Playlist
+
+APlayer will show a playlist when it has more than one audio, option `listFolded` indicates whether list should folded at first, and option `listMaxHeight` indicates list max height.
+
+<div class="aplayer-wrap">
+    <div id="aplayer5"><button class="docute-button load">Click to load player</div>
+</div>
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('player'),
+    listFolded: false,
+    listMaxHeight: '90px',
+    lrc: 3,
+    audio: [
+        {
+            name: 'name1',
+            artist: 'artist1',
+            url: 'url1.mp3',
+            cover: 'cover1.jpg',
+            lrc: 'lrc1.lrc'
+        },
+        {
+            name: 'name2',
+            artist: 'artist2',
+            url: 'url2.mp3',
+            cover: 'cover2.jpg',
+            lrc: 'lrc2.lrc'
+        }
+    ]
+});
+```
+
+## Mini mode
+
+If you don't have enough space for normal player, mini mode might be your choice.
+
+<div class="aplayer-wrap">
+    <div id="aplayer6"><button class="docute-button load">Click to load player</div>
+</div>
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('player'),
+    mini: true,
+    audio: [{
+        name: 'name',
+        artist: 'artist',
+        url: 'url.mp3',
+        cover: 'cover.jpg',
+    }]
+});
+```
+
+## CDN
+
+- [jsDelivr](https://www.jsdelivr.com/package/npm/aplayer)
+- [cdnjs](https://cdnjs.com/libraries/aplayer)
+- [unpkg](https://unpkg.com/aplayer/)
+
+## FAQ
+
+### Why can't player autoplay in some mobile browsers?
+
+Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks.
\ No newline at end of file
diff --git a/docs/config.js b/docs/config.js
new file mode 100644
index 0000000..7aedae3
--- /dev/null
+++ b/docs/config.js
@@ -0,0 +1,202 @@
+const langs = [
+    { title: 'English', path: '/home', matchPath: /^\/(home|ecosystem|support)/ },
+    { title: '简体中文', path: '/zh-Hans/', matchPath: /^\/zh-Hans/ },
+];
+
+docute.init({
+    landing: 'landing.html',
+    title: 'APlayer',
+    repo: 'DIYgod/APlayer',
+    twitter: 'DIYgod',
+    'edit-link': 'https://github.com/MoePlayer/APlayer/tree/master/docs',
+    nav: {
+        default: [
+            {
+                title: 'Home', path: '/home'
+            },
+            {
+                title: 'Ecosystem', path: '/ecosystem'
+            },
+            {
+                title: 'Support APlayer', path: '/support'
+            },
+            {
+                title: 'Languages', type: 'dropdown', items: langs
+            }
+        ],
+        'zh-Hans': [
+            {
+                title: '首页', path: '/zh-Hans/'
+            },
+            {
+                title: '生态', path: '/zh-Hans/ecosystem'
+            },
+            {
+                title: '支持 APlayer', path: '/zh-Hans/support'
+            },
+            {
+                title: '选择语言', type: 'dropdown', items: langs
+            }
+        ],
+    },
+    plugins: [
+        docsearch({
+            apiKey: '',
+            indexName: 'aplayer',
+            tags: ['english', 'zh-Hans'],
+            url: 'https://aplayer.js.org'
+        }),
+        evanyou(),
+        player()
+    ]
+});
+
+function player () {
+    return function (context) {
+        context.event.on('landing:updated', function () {
+            console.log('landing:updated');
+            clearPlayer();
+            aplayer1();
+        });
+        context.event.on('content:updated', function () {
+            console.log('content:updated');
+            clearPlayer();
+            for (let i = 0; i < document.querySelectorAll('.load').length; i++) {
+                document.querySelectorAll('.load')[i].addEventListener('click', function () {
+                    window[this.parentElement.id] && window[this.parentElement.id]();
+                });
+            }
+        });
+    };
+}
+
+function clearPlayer () {
+    for (let i = 1; i < 10; i++) {
+        if (window['dp' + (i + 1)]) {
+            window['dp' + (i + 1)].destroy();
+        }
+    }
+}
+
+function aplayer1 () {
+    window.ap1 = new APlayer({
+        container: document.getElementById('aplayer1'),
+        theme: '#e6d0b2',
+        audio: {
+            name: 'Preparation',
+            artist: 'Hans Zimmer/Richard Harvey',
+            url: 'https://moeplayer.b0.upaiyun.com/aplayer/preparation.mp3',
+            cover: 'https://moeplayer.b0.upaiyun.com/aplayer/preparation.jpg'
+        }
+    });
+}
+
+function aplayer2 () {
+    window.ap2 = new APlayer({
+        container: document.getElementById('aplayer2'),
+        theme: '#e6d0b2',
+        audio: {
+            name: 'Preparation',
+            artist: 'Hans Zimmer/Richard Harvey',
+            url: 'https://moeplayer.b0.upaiyun.com/aplayer/preparation.mp3',
+            cover: 'https://moeplayer.b0.upaiyun.com/aplayer/preparation.jpg'
+        }
+    });
+}
+
+function aplayer3 () {
+    window.ap3 = new APlayer({
+        container: document.getElementById('aplayer3'),
+        mini: false,
+        autoplay: false,
+        theme: '#FADFA3',
+        loop: 'all',
+        order: 'random',
+        preload: 'auto',
+        volume: 0.7,
+        mutex: true,
+        listFolded: false,
+        listMaxHeight: '90px',
+        lrc: 3,
+        audio: [
+            {
+                name: 'あっちゅ～ま青春!',
+                artist: '七森中☆ごらく部',
+                url: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.mp3',
+                cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.jpg',
+                lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.lrc'
+            },
+            {
+                name: 'secret base~君がくれたもの~',
+                artist: '茅野愛衣',
+                url: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
+                cover: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg',
+                lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.lrc'
+            },
+            {
+                name: '回レ！雪月花',
+                artist: '小倉唯',
+                url: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.mp3',
+                cover: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.jpg',
+                lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.lrc'
+            }
+        ]
+    });
+}
+
+function aplayer4 () {
+    window.ap4 = new APlayer({
+        container: document.getElementById('aplayer4'),
+        lrc: 3,
+        audio: [{
+            name: '回レ！雪月花',
+            artist: '小倉唯',
+            url: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.mp3',
+            cover: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.jpg',
+            lrc: "https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.lrc"
+        }]
+    });
+}
+
+function aplayer5 () {
+    window.ap5 = new APlayer({
+        container: document.getElementById('aplayer5'),
+        lrc: 3,
+        audio: [
+            {
+                name: 'あっちゅ～ま青春!',
+                artist: '七森中☆ごらく部',
+                url: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.mp3',
+                cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.jpg',
+                lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yuruyuri.lrc'
+            },
+            {
+                name: 'secret base~君がくれたもの~',
+                artist: '茅野愛衣',
+                url: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.mp3',
+                cover: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.jpg',
+                lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/secretbase.lrc'
+            },
+            {
+                name: '回レ！雪月花',
+                artist: '小倉唯',
+                url: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.mp3',
+                cover: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.jpg',
+                lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/snowmoonflowers.lrc'
+            }
+        ]
+    });
+}
+
+function aplayer6 () {
+    window.ap6 = new APlayer({
+        container: document.getElementById('aplayer6'),
+        mini: true,
+        audio: {
+            name: 'Preparation',
+            artist: 'Hans Zimmer/Richard Harvey',
+            url: 'https://moeplayer.b0.upaiyun.com/aplayer/preparation.mp3',
+            cover: 'https://moeplayer.b0.upaiyun.com/aplayer/preparation.jpg'
+        }
+    });
+}
\ No newline at end of file
diff --git a/docs/ecosystem.md b/docs/ecosystem.md
new file mode 100644
index 0000000..a7e0bf2
--- /dev/null
+++ b/docs/ecosystem.md
@@ -0,0 +1,49 @@
+---
+search: english
+---
+
+# Ecosystem
+
+Let's make APlayer better, feel free to submit yours in [`Let me know!`](https://github.com/MoePlayer/APlayer/issues/79)
+
+## Help
+
+### Joining the Discussion
+
+- [Telegram Group](https://t.me/adplayer)
+- [QQ Group](https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17): 415835947
+
+### Creating issue
+
+- [MoePlayer/APlayer/issues](https://github.com/MoePlayer/APlayer/issues)
+
+## Related Projects
+
+### Plugins
+
+- [APlayer-Typecho-Plugin](https://github.com/zgq354/APlayer-Typecho-Plugin): Typecho
+- [hexo-tag-aplayer](https://github.com/grzhan/hexo-tag-aplayer): Hexo
+- [Hermit-X(APlayer for WordPress)](https://github.com/liwanglin12/Hermit-X): WordPress
+- [APlayerHandle](https://github.com/kn007/APlayerHandle): WordPress
+- [APlayer_for_Z-BlogPHP](https://github.com/fghrsh/APlayer_for_Z-BlogPHP): Z-BlogPHP
+- [react-aplayer](https://github.com/sabrinaluo/react-aplayer): React
+- [vue-aplayer](https://github.com/SevenOutman/vue-aplayer): Vue
+- [vue-aplayer](https://github.com/MoeFE/vue-aplayer): Vue
+- [php-aplayer](https://github.com/Daryl-L/php-aplayer): PHP
+
+### Tooling
+
+- [APlayer-Controler](https://github.com/Mashiro-Sorata/APlayer-Controler): controling tool
+- [MetingJS](https://github.com/metowolf/MetingJS): work with Meting music API
+
+## Who use APlayer?
+
+- [Jelly Rue](http://jellyrue.com/): Jelly Rue, an indie pop-rock band from Tartu.
+- [LLSupport](https://www.lovelivesupport.com/): This site provides a lot of information about LoveLive
+- [站长之家](http://www.chinaz.com/15year/index.html): 针对中文站点提供资讯、技术、资源、服务
+- [Justice_Eternal吧曲谱资源站](http://lightmoon.pw): 一个非营利的、兴趣驱动的曲谱编辑、发布与整理解决方案
+- [Justice_Eternal吧曲谱资源站(移动端)](http://jefun.top/): 一个非营利的、兴趣驱动的曲谱编辑、发布与整理解决方案
+- [歌词千寻](https://www.lrcgc.com/diy): 歌词千寻LRC歌词编辑器
+- [iSearch](http://i.oppsu.cn): 一个提供 iTunes 搜索,试听,高清专辑封面获取,查看最新音乐动态等综合性平台
+- [LRC歌词编辑器](https://github.com/MoeFE/Lyric): 一款非常实用的在线LRC歌词编辑器
+- [Аэростатика](https://aerostatica.ru/)
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..195eac0
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+  <title>APlayer</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute/dist/docute.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute/dist/theme-github.css" />
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-48084758-8"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-48084758-8');
+  </script>
+  <link rel="stylesheet" href="./APlayer.min.css">
+  <script src="./APlayer.min.js"></script>
+  <style>
+    body {
+      text-rendering: auto;
+    }
+    #evanyou-canvas {
+      z-index: -1 !important;
+    }
+    .aplayer-wrap {
+      max-width: 700px;
+      margin: 20px 0;
+    }
+  </style>
+</head>
+<body>
+  <!-- don't remove this part start -->
+  <div id="app"></div>
+  <script src="https://cdn.jsdelivr.net/npm/docute/plugins/docsearch.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/docute-evanyou/dist/evanyou.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/docute/dist/docute.js"></script>
+  <script src="./config.js"></script>
+  <!-- livereload script placeholder -->
+  <!-- don't remove this part end -->
+</body>
+</html>
diff --git a/docs/landing.html b/docs/landing.html
new file mode 100644
index 0000000..b89b37a
--- /dev/null
+++ b/docs/landing.html
@@ -0,0 +1,83 @@
+<h1>APlayer</h1>
+
+<h3>🍭 Wow, such a beautiful HTML5 music player.</h3>
+
+<div class="aplayer-wrap">
+    <div id="aplayer1"></div>
+</div>
+
+<div class="landing-buttons">
+    <a class="landing-button" target="_blank" href="https://github.com/MoePlayer/APlayer">
+        GitHub
+    </a>
+
+    <a class="landing-button" router-link="/home">
+        Docs
+    </a>
+</div>
+
+<style>
+    h1 {
+        margin: 0;
+        margin-top: -50px;
+        font-weight: normal;
+        font-size: 40px;
+        letter-spacing: 1px;
+    }
+
+    h3 {
+        margin-top: 20px;
+        color: #999;
+        font-weight: normal;
+        letter-spacing: 1px;
+    }
+
+    .landing {
+        padding: 10px;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        -ms-flex-pack: center;
+        justify-content: center;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: column;
+        height: 100%;
+        -webkit-user-select: none;
+        user-select: none;
+    }
+
+    .features {
+        margin-top: 20px;
+        margin-bottom: 10px;
+        font-size: 16px;
+        line-height: 1.7;
+    }
+
+    .landing-button {
+        border: 1px solid #ccc;
+        border-radius: 33px;
+        padding: 10px 30px;
+        background-color: white;
+        display: inline-block;
+        margin-right: 20px;
+        color: #333;
+    }
+
+    .landing-button:hover {
+        border-color: #42b983;
+        color: #42b983;
+        text-decoration: none;
+    }
+
+    .aplayer-wrap {
+        width: 600px;
+        max-width: 100%;
+        margin: 20px 0 40px;
+    }
+</style>
\ No newline at end of file
diff --git a/docs/support.md b/docs/support.md
new file mode 100644
index 0000000..982e79e
--- /dev/null
+++ b/docs/support.md
@@ -0,0 +1,50 @@
+---
+search: english
+---
+
+# Sponsor APlayer Development
+
+APlayer is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
+
+If you run a business and are using APlayer in a revenue-generating product, it makes business sense to sponsor APlayer development: it ensures the project that your product relies on stays healthy and actively maintained.
+
+If you are an individual user and have enjoyed the productivity of using APlayer, consider donating as a sign of appreciation - like buying me coffee once in a while :)
+
+You can support APlayer development via the following methods:
+
+## One-time Donations
+
+We accept donations through these channels:
+
+- [Paypal](https://www.paypal.me/DIYgod)
+- [WeChat Pay](https://i.imgur.com/aq6PtWa.png)
+- [Alipay](https://i.imgur.com/wv1Pj2k.png)
+- Bitcoin: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1
+
+## Recurring Pledges
+
+Recurring pledges come with exclusive perks, e.g. having your name or your company logo listed in the APlayer GitHub repository and this website.
+
+- Become a backer or sponsor via [OpenCollective](https://opencollective.com/aplayer)
+- E-mail us: i#html.love
+
+## Current Premium Sponsors
+
+### Special Sponsors
+
+<a href="https://pear.hk/" target="_blank">
+    <img width="222px" src="https://i.imgur.com/5qQYmfc.png">
+</a>
+<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
+    <img width="222px" src="https://imgur.com/apG1uKf.png">
+</a>
+
+### OpenCollective backers
+
+![](https://opencollective.com/APlayer/backers.svg?width=890)
+
+## APlayer contributors
+
+This project exists thanks to all the people who contribute.
+
+<a href="https://github.com/MoePlayer/APlayer/graphs/contributors"><img src="https://opencollective.com/APlayer/contributors.svg?width=890" /></a>
\ No newline at end of file
diff --git a/docs/zh-Hans/README.md b/docs/zh-Hans/README.md
new file mode 100644
index 0000000..3426852
--- /dev/null
+++ b/docs/zh-Hans/README.md
@@ -0,0 +1,399 @@
+---
+nav: zh-Hans
+search: zh-Hans
+---
+
+# APlayer
+
+🍭 Wow, such a beautiful HTML5 music player
+
+## 特别赞助商
+
+<a href="https://pear.hk/" target="_blank">
+    <img width="222px" src="https://i.imgur.com/5qQYmfc.png">
+</a>
+<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
+    <img width="222px" src="https://imgur.com/apG1uKf.png">
+</a>
+
+## 安装
+
+使用 npm:
+
+```
+npm install aplayer --save
+```
+
+使用 Yarn:
+
+```
+yarn add aplayer
+```
+
+## 入门
+
+<div class="aplayer-wrap">
+    <div id="aplayer2"><button class="docute-button load">点击加载播放器</div>
+</div>
+
+```html
+<link rel="stylesheet" href="APlayer.min.css">
+<div id="aplayer"></div>
+<script src="APlayer.min.js"></script>
+```
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('aplayer'),
+    audio: [{
+        name: 'name',
+        artist: 'artist',
+        url: 'url.mp3',
+        cover: 'cover.jpg',
+    }]
+});
+```
+
+使用模块管理器:
+
+```js
+import 'APlayer/dist/APlayer.min.css';
+import APlayer from 'APlayer';
+
+const ap = new APlayer(options);
+```
+
+## 参数
+
+名称 | 默认值 | 描述
+----|-------|----
+container | document.querySelector('.aplayer') | 播放器容器元素
+mini | false | 开启迷你模式, [详情](https://aplayer.js.org/#/home?id=mini-mode)
+autoplay | false | 音频自动播放
+theme | '#b7daff' | 主题色
+loop | 'all' | 音频循环播放, 可选值: 'all', 'one', 'none'
+order | 'list' | 音频循环顺序, 可选值: 'list', 'random'
+preload | 'auto' | 预加载，可选值: 'none', 'metadata', 'auto'
+volume | 0.7 | 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
+audio | - | 音频信息, 应该是一个对象或对象数组
+audio.name | - | 音频名称
+audio.artist | - | 音频艺术家
+audio.url | - | 音频链接
+audio.cover | - | 音频封面
+audio.lrc | - | [详情](https://aplayer.js.org/#/home?id=lrc)
+mutex | true | 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
+lrc | false | [详情](https://aplayer.js.org/#/home?id=lrc)
+listFolded | false | 列表默认折叠
+listMaxHeight | - | 列表最大高度
+
+例如:
+
+<div class="aplayer-wrap">
+    <div id="aplayer3"><button class="docute-button load">点击加载播放器</div>
+</div>
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('player'),
+    mini: false,
+    autoplay: false,
+    theme: '#FADFA3',
+    loop: 'all',
+    order: 'random',
+    preload: 'auto',
+    volume: 0.7,
+    mutex: true,
+    listFolded: false,
+    listMaxHeight: '90px',
+    lrc: 3,
+    audio: [
+        {
+            name: 'name1',
+            artist: 'artist1',
+            url: 'url1.mp3',
+            cover: 'cover1.jpg',
+            lrc: 'lrc1.lrc'
+        },
+        {
+            name: 'name2',
+            artist: 'artist2',
+            url: 'url2.mp3',
+            cover: 'cover2.jpg',
+            lrc: 'lrc2.lrc'
+        }
+    ]
+});
+```
+
+## API
+
++ `ap.play()`: 播放音频
+
++ `ap.pause()`: 暂停音频
+
++ `ap.seek(time: number)`: 跳转到特定时间
+
+  ```js
+  ap.seek(100);
+  ```
+
++ `ap.toggle()`: 切换播放和暂停
+
++ `ap.on(event: string, handler: function)`: 绑定音频和播放器事件，[详情](https://aplayer.js.org/#/home?id=event-binding)
+
++ `ap.switchAudio(index: number)`: 切换音频列表
+
+  ```js
+  ap.switchAudio(1);
+  ```
+
++ `ap.addAudio(audio)`: 向列表添加新的音频
+
+  ```js
+  ap.addAudio([
+      {
+          name: 'name',
+          artist: 'artist',
+          url: 'url.mp3',
+          cover: 'cover.jpg',
+          lrc: 'lrc.lrc'
+      }
+  ]);
+  ```
+
++ `ap.removeAudio(index: number)`: 从列表删除音频
+
+  ```js
+  ap.removeAudio(1);
+  ```
+  
++ `ap.volume(percentage: number, nostorage: boolean)`: 设置音频音量
+
+  ```js
+  ap.volume(0.1, true);
+  ```
+
++ `ap.destroy()`: 销毁播放器
+
++ `ap.audio`: 原生 video
+
+ + `ap.audio.currentTime`: 返回音频当前播放时间
+
+ + `ap.audio.duration`: 返回音频总时间
+
+ + `ap.audio.paused`: 返回音频是否暂停
+
+ + 支持大多数[原生audio接口](http://www.w3schools.com/tags/ref_av_dom.asp)
+
+## 事件绑定
+
+`ap.on(event, handler)`
+
+```js
+ap.on('ended', function () {
+    console.log('player ended');
+});
+```
+
+音频事件
+
+- abort
+- canplay
+- canplaythrough
+- durationchange
+- emptied
+- ended
+- error
+- loadeddata
+- loadedmetadata
+- loadstart
+- mozaudioavailable
+- pause
+- play
+- playing
+- progress
+- ratechange
+- seeked
+- seeking
+- stalled
+- suspend
+- timeupdate
+- volumechange
+- waiting
+
+播放器事件
+
+- switchaudio
+- addaudio
+- removeaudio
+- destroy
+
+## 歌词
+
+我们有三种方式来给 APlayer 传递歌词，使用 `lrc` 参数指明使用哪种方式，然后把歌词放到 `audio.lrc` 参数或者 HTML 里。
+
+<div class="aplayer-wrap">
+    <div id="aplayer4"><button class="docute-button load">点击加载播放器</div>
+</div>
+
+### LRC 文件方式
+
+第一种方式，把歌词放到 LRC 文件里，音频播放时会加载对应的 LRC 文件。
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('aplayer'),
+    lrc: 3,
+    audio: {
+        name: 'name',
+        artist: 'artist',
+        url: 'demo.mp3',
+        cover: 'demo.jpg',
+        lrc: 'lrc.lrc'
+    }
+});
+```
+
+### JS 字符串方式
+
+第二种方式，把歌词放到 JS 字符串里面。
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('aplayer'),
+    lrc: 1,
+    audio: {
+        name: 'name',
+        artist: 'artist',
+        url: 'demo.mp3',
+        cover: 'demo.jpg',
+        lrc: '[00:00.00]APlayer\n[00:04.01]is\n[00:08.02]amazing'
+    }
+});
+```
+
+### HTML 方式
+
+第三种方式，把歌词放到 HTML 里面。
+
+```html
+<link rel="stylesheet" href="APlayer.min.css">
+<div id="player">
+    <pre class="aplayer-lrc-content">
+        [00:00.00]APlayer audio1
+        [00:04.01]is
+        [00:08.02]amazing
+        <!-- ... -->
+    </pre>
+    <pre class="aplayer-lrc-content">
+        [00:00.00]APlayer audio2
+        [00:04.01]is
+        [00:08.02]amazing
+        <!-- ... -->
+    </pre>
+</div>
+<script src="APlayer.min.js"></script>
+```
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('aplayer'),
+    lrc: 2,
+    audio: [[
+        {
+            name: 'name1',
+            artist: 'artist1',
+            url: 'url1.mp3',
+            cover: 'cover1.jpg'
+        },
+        {
+            name: 'name2',
+            artist: 'artist2',
+            url: 'url2.mp3',
+            cover: 'cover2.jpg'
+        }
+    ]]
+});
+```
+
+### 歌词格式
+
+支持下面格式的歌词：
+
+`[mm:ss]APlayer`
+
+`[mm:ss.xx]is`
+
+`[mm:ss.xxx]amazing`
+
+`[mm:ss.xx][mm:ss.xx]APlayer`
+
+`[mm:ss.xx]<mm:ss.xx>is`
+
+`[mm:ss.xx]amazing[mm:ss.xx]APlayer`
+
+## 播放列表
+
+当有多个音频时会 APlayer 会展示一个播放列表，`listFolded` 参数指明列表是否默认折叠，`listMaxHeight` 参数指明列表最大高度。
+
+<div class="aplayer-wrap">
+    <div id="aplayer5"><button class="docute-button load">点击加载播放器</div>
+</div>
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('player'),
+    listFolded: false,
+    listMaxHeight: '90px',
+    lrc: 3,
+    audio: [
+        {
+            name: 'name1',
+            artist: 'artist1',
+            url: 'url1.mp3',
+            cover: 'cover1.jpg',
+            lrc: 'lrc1.lrc'
+        },
+        {
+            name: 'name2',
+            artist: 'artist2',
+            url: 'url2.mp3',
+            cover: 'cover2.jpg',
+            lrc: 'lrc2.lrc'
+        }
+    ]
+});
+```
+
+## 迷你模式
+
+如果你没有足够空间来放置正常模式的播放器，那么你可以考虑使用迷你模式。
+
+<div class="aplayer-wrap">
+    <div id="aplayer6"><button class="docute-button load">点击加载播放器</div>
+</div>
+
+```js
+const ap = new APlayer({
+    container: document.getElementById('player'),
+    mini: true,
+    audio: [{
+        name: 'name',
+        artist: 'artist',
+        url: 'url.mp3',
+        cover: 'cover.jpg',
+    }]
+});
+```
+
+## CDN
+
+- [jsDelivr](https://www.jsdelivr.com/package/npm/aplayer)
+- [cdnjs](https://cdnjs.com/libraries/aplayer)
+- [unpkg](https://unpkg.com/aplayer/)
+
+## 常见问题
+
+### 为什么播放器不能在手机上自动播放？
+
+大多数移动端浏览器禁止了音频自动播放。
\ No newline at end of file
diff --git a/docs/zh-Hans/ecosystem.md b/docs/zh-Hans/ecosystem.md
new file mode 100644
index 0000000..9eaf72a
--- /dev/null
+++ b/docs/zh-Hans/ecosystem.md
@@ -0,0 +1,50 @@
+---
+nav: zh-Hans
+search: zh-Hans
+---
+
+# 生态
+
+让 APlayer 变得更好，请随意在 [`Let me know!`](https://github.com/MoePlayer/APlayer/issues/79) 提交你的项目和产品
+
+## 帮助
+
+### 参与讨论
+
+- [Telegram 群](https://t.me/adplayer)
+- [QQ 群](https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17): 415835947
+
+### 提交 issue
+
+- [MoePlayer/APlayer/issues](https://github.com/MoePlayer/APlayer/issues)
+
+## 相关项目
+
+### 插件
+
+- [APlayer-Typecho-Plugin](https://github.com/zgq354/APlayer-Typecho-Plugin): Typecho
+- [hexo-tag-aplayer](https://github.com/grzhan/hexo-tag-aplayer): Hexo
+- [Hermit-X(APlayer for WordPress)](https://github.com/liwanglin12/Hermit-X): WordPress
+- [APlayerHandle](https://github.com/kn007/APlayerHandle): WordPress
+- [APlayer_for_Z-BlogPHP](https://github.com/fghrsh/APlayer_for_Z-BlogPHP): Z-BlogPHP
+- [react-aplayer](https://github.com/sabrinaluo/react-aplayer): React
+- [vue-aplayer](https://github.com/SevenOutman/vue-aplayer): Vue
+- [vue-aplayer](https://github.com/MoeFE/vue-aplayer): Vue
+- [php-aplayer](https://github.com/Daryl-L/php-aplayer): PHP
+
+### 工具
+
+- [APlayer-Controler](https://github.com/Mashiro-Sorata/APlayer-Controler): controling tool
+- [MetingJS](https://github.com/metowolf/MetingJS): work with Meting music API
+
+## 谁在用 APlayer?
+
+- [Jelly Rue](http://jellyrue.com/): Jelly Rue, an indie pop-rock band from Tartu.
+- [LLSupport](https://www.lovelivesupport.com/): This site provides a lot of information about LoveLive
+- [站长之家](http://www.chinaz.com/15year/index.html): 针对中文站点提供资讯、技术、资源、服务
+- [Justice_Eternal吧曲谱资源站](http://lightmoon.pw): 一个非营利的、兴趣驱动的曲谱编辑、发布与整理解决方案
+- [Justice_Eternal吧曲谱资源站(移动端)](http://jefun.top/): 一个非营利的、兴趣驱动的曲谱编辑、发布与整理解决方案
+- [歌词千寻](https://www.lrcgc.com/diy): 歌词千寻LRC歌词编辑器
+- [iSearch](http://i.oppsu.cn): 一个提供 iTunes 搜索,试听,高清专辑封面获取,查看最新音乐动态等综合性平台
+- [LRC歌词编辑器](https://github.com/MoeFE/Lyric): 一款非常实用的在线LRC歌词编辑器
+- [Аэростатика](https://aerostatica.ru/)
\ No newline at end of file
diff --git a/docs/zh-Hans/support.md b/docs/zh-Hans/support.md
new file mode 100644
index 0000000..b141df5
--- /dev/null
+++ b/docs/zh-Hans/support.md
@@ -0,0 +1,51 @@
+---
+nav: zh-Hans
+search: zh-Hans
+---
+
+# 赞助 APlayer 的研发
+
+APlayer 是采用 MIT 许可的开源项目，使用完全免费。 但是随着项目规模的增长，也需要有相应的资金支持才能持续项目的维护的开发。
+
+如果你是企业经营者并且将 APlayer 用在商业产品中，那么赞助 APlayer 有商业上的益处：可以让你的产品所依赖的框架保持健康并得到积极的维护。
+
+如果你是个人开发者并且享受 APlayer 带来的高开发效率，可以用捐助来表示你的谢意 —— 比如偶尔给我买杯咖啡 :)
+
+你可以通过下列的方法来赞助 APlayer 的开发。
+
+## 一次性赞助
+
+我们通过以下方式接受赞助：
+
+- [微信支付](https://i.imgur.com/aq6PtWa.png)
+- [支付宝](https://i.imgur.com/wv1Pj2k.png)
+- [Paypal](https://www.paypal.me/DIYgod)
+- 比特币: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1
+
+## 周期性赞助
+
+周期性赞助可以获得额外的回报，比如你的名字或你的公司 logo 会出现在 APlayer 的 GitHub 仓库和现在我们的官网中。
+
+- 通过 [OpenCollective](https://opencollective.com/aplayer) 赞助成为 backer 或 sponsor 
+- 给我们发邮件联系赞助事宜: i#html.love
+
+## 当前的顶级赞助商
+
+### 特别赞助商
+
+<a href="https://pear.hk/" target="_blank">
+    <img width="222px" src="https://i.imgur.com/5qQYmfc.png">
+</a>
+<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
+    <img width="222px" src="https://imgur.com/apG1uKf.png">
+</a>
+
+### OpenCollective backers
+
+![](https://opencollective.com/APlayer/backers.svg?width=890)
+
+## APlayer 贡献者
+
+感谢所有贡献者。
+
+<a href="https://github.com/MoePlayer/APlayer/graphs/contributors"><img src="https://opencollective.com/APlayer/contributors.svg?width=890" /></a>
\ No newline at end of file