🍰 A simple plugin connect APlayer, Meting and VuePress.
- Document: moefy-vuepress
- Live demo: notev
yarn add vuepress-plugin-meting -D
# or use npm
npm i vuepress-plugin-meting -Dmodule.exports = {
plugins: [
'meting',
{
metingApi,
meting,
aplayer,
mobile,
defaultCover,
},
],
}使用该插件后将自动注册 <Meting/> 组件与 <APlayer/> 组件，你可以在任意位置使用它们
<Meting/>组件支持metingOptions 和aplayerOptions，其中aplayer的audio选项将自动通过 metingApi 获取，如果想要额外添加audio的话，可以通过additionalAudios选项实现<APlayer/>组件支持aplayerOptions，当然，你需要自行提供audio音乐源
config.js 中的 meting 选项、aplayer 选项和 mobile 选项是全局 UI 组件的配置项，当 meting 选项被配置后，将自动注册一个全局 UI 组件 <Meting/>（吸底模式），这三个配置项不影响其他组件的配置项
Options 分为 metingApi、meting、aplayer、mobile、defaultCover 五部分
即 Meting 的 api，默认为 @metowolf 提供的 api，你也可以通过自建修改该选项
Meting 相关选项
-
server
- 类型：
string - 默认值：
undefined - 描述：MetingApi 中的
server参数，即音乐平台 - 可选值：
"netease" | "tencent" | "kuwo" | "kugou" | "baidu"
- 类型：
-
type
- 类型：
string - 默认值：
undefined - 描述：MetingApi 中的
type参数，即资源类型（播放列表、单曲、专辑等） - 可选值：
"song" | "album" | "artist" | "playlist"
- 类型：
-
mid
- 类型：
string - 默认值：
undefined - 描述：MetingApi 中的
id参数，即资源 ID
- 类型：
-
auto
- 类型：
string - 默认值：
"" - 描述：资源
url，填写后可通过资源url自动解析资源平台、类型、ID，上述三个选项将被覆盖（本参数仅支持netease、tencent、xiami三平台）
- 类型：
该 Option 可分别填写 server、type、mid
meting: {
server: "netease",
type: "playlist",
mid: "6838211960",
}也可以只填写 auto
meting: {
auto: 'https://music.163.com/#/playlist?id=6838211960'
}-
fixed
- 类型：
boolean - 默认值：
false - 描述：是否开启吸底模式
- 类型：
-
mini
- 类型：
boolean - 默认值：
false - 描述：是否开启迷你模式
- 类型：
-
autoplay
- 类型：
boolean - 默认值：
false - 描述：是否开启自动播放
- 类型：
-
theme
- 类型：
string - 默认值：
#b7daff - 描述：设置播放器默认主题颜色
- 类型：
-
loop
- 类型：
APlayer.LoopMode - 默认值：
all - 描述：设置播放器的初始循环模式
- 可选值：
'all' | 'one' | 'none'
- 类型：
-
order
- 类型：
APlayer.OrderMode - 默认值：
list - 描述：设置播放器的初始顺序模式
- 可选值：
'list' | 'random'
- 类型：
-
preload
- 类型：
APlayer.Preload - 默认值：
auto - 描述：设置音频的预加载模式
- 可选值：
'none' | 'metadata' | 'auto'
- 类型：
-
volume
- 类型：
number - 默认值：
0.7 - 描述：设置播放器的音量
- 类型：
-
additionalAudios
- 类型：
Array<APlayer.Audio> - 默认值：
[] - 描述：除 Meting 解析的 audio 外额外添加的 audio
详情见 vue-aplayer 文档的 audio 选项，另外，作为
<APlayer />组件使用的时候仍应该使用 audio 选项。
- 类型：
-
customAudioType（见 vue-aplayer 文档）
-
mutex
- 类型：
boolean - 默认值：
true - 描述：是否开启互斥模式
- 类型：
-
lrcType
- 类型：
APlayer.LrcType? - 默认值：
0 - 描述：设置 lrc 歌词解析模式
- 可选值：
3 | 1 | 0（0：禁用 lrc 歌词，1：lrc 格式的字符串，3：lrc 文件 url）
- 类型：
-
listFolded
- 类型：
boolean - 默认值：
false - 描述：是否折叠播放列表
- 类型：
-
listMaxHeight
- 类型：
number - 默认值：
250 - 描述：设置播放列表最大高度，单位为像素
- 类型：
-
storageName
- 类型：
string - 默认值：
vuepress-plugin-meting - 描述：设置存储播放器设置的
localStoragekey
- 类型：
用于控制全局吸底播放器在移动设备上的一些特殊选项
-
cover
- 类型：
boolean - 默认值：
true - 描述：是否显示封面图，如果隐藏的话可以防止播放器遮挡移动设备上的文字内容
- 类型：
-
lrc
- 类型：
boolean - 默认值：
true - 描述：是否显示歌词
- 类型：
加载音乐封面时所显示的默认封面图
// .vuepress/config.js
module.exports = {
plugins: [
'meting',
{
// 这个 API 是不可用的，只是作为示例而已
metingApi: 'https://meting.example.com/api/',
meting: {
server: 'netease',
type: 'playlist',
mid: '6838211960',
}, // 不配置该项的话不会出现全局播放器
aplayer: {
lrcType: 3,
},
defaultCover: 'https://nyakku.moe/avatar.jpg',
},
],
}<!-- about.md -->
<Meting server="netease"
type="playlist"
mid="6838211960"
:lrc-type="3"/>
<!-- 这样就可以在 about.html 页面单独引入一个播放器咯～ -->