# vitepress-plugin-awesome-musicplayer
一款基于vitepress插件的音乐播放器，打破以往博客音乐播放方式，让用户有更佳的沉浸式体验。
该插件是vitepress的适配，原版为 vuepress 1.x ，传送门： [vuepress-plugin-awesome-musicplayers](https://github.com/daodaolee/vuepress-plugin-awesome-musicplayer) 。
## 说明
该插件参考了[vue-netease-music](https://github.com/sl1673495/vue-netease-music)，把Mac端的网易云播放器界面的部分功能做成了vitepress插件，让用户在vitepress里也有同样的音乐体验，接口来自 [保罗API](https://api.paugram.com/help/netease)。
## 安装
```bash
npm install vitepress-plugin-awesome-musicplayer -D
```
## 使用
### 配置
在 `.vitepress/theme/config.js` 下增加插件配置
```js
import DefaultTheme from 'vitepress/theme'
import MusicPlayer from 'vitepress-plugin-awesome-musicplayer'
export default {
...DefaultTheme,
enhanceApp({ app }) {
app.component('MusicPlayer', MusicPlayer)
}
}
```
### 获取歌曲id
目前通过获取网易云的歌曲id来进行播放，id获取方式如下：
1. 打开网易云客户端，播放一首音乐
2. 点击分享按钮，选择复制链接
3. 链接格式如：`https://music.163.com/song?id=xxx&userid=`，`xxx` 就是该歌曲的id
4. 由于接口原因，可能有的音乐无法读取，多次刷新可能造成请求失败
### 获取音源
为了更好的用户体验，增加了音频解析可视化面板，由于三方接口配合 `MediaElementAudioSourceNode` 会导致 `CORS` 和 `CORB` 播放报错，所以需要手动添加音源文件链接，建议使用类似图床链接引入即可。
### 引入
在想要插入播放器的Markdown页面，加入以下代码即可：
``` html
```
### 主题
如果想改变主题，添加 `theme` 参数即可，默认是 `apple` 主题：
```html
```
默认提供了：`apple`、`aurora`、`borealis`、`candy`、`cool`、`dusk`、`outrun`、`summer`、`tiedye` 和 `rainbow` 10种渐变色。
也可以自定义颜色，传入一个渐变色类型参数即可，格式如下：
```html
```
其中 `pos` 代表初始颜色位置的百分比（从0到1），`color` 代表颜色。
## 效果图
