:cake: A simple plugin connect APlayer, Meting and VuePress.
<Meting server="netease" type="playlist" mid="6838211960" :lrc-type="3"/>
yarn add vuepress-plugin-meting -D
# or use npm
npm i vuepress-plugin-meting -D
module.exports = {
plugins: [
'meting',
{
metingApi,
meting,
aplayer,
mobile,
defaultCover,
},
],
}
使用该插件后将自动注册 <Meting/>
组件与 <APlayer/>
组件,你可以在任意位置使用它们
<Meting/>
组件支持 meting
Options 和 aplayer
Options,其中 aplayer
的 audio
选项将自动通过 metingApi 获取,如果想要额外添加 audio
的话,可以通过 additionalAudios
选项实现<APlayer/>
组件支持 aplayer
Options,当然,你需要自行提供 audio
音乐源config.js
中的 meting
选项、aplayer
选项和 mobile
选项是全局 UI 组件的配置项,当 meting
选项被配置后,将自动注册一个全局 UI 组件 <Meting/>
(吸底模式),这三个配置项不影响其他组件的配置项
Options 分为 metingApi
、meting
、aplayer
、mobile
、defaultCover
五部分
即 Meting
的 api
,默认为 @metowolf 提供的 api
,你也可以通过自建修改该选项
Meting
相关选项
server
string
undefined
server
参数,即音乐平台"netease" | "tencent" | "kuwo" | "kugou" | "baidu"
type
string
undefined
type
参数,即资源类型(播放列表、单曲、专辑等)"song" | "album" | "artist" | "playlist"
mid
string
undefined
id
参数,即资源 IDauto
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>
[]
详情见 vue-aplayer 文档的 audio 选项,另外,作为
<APlayer />
组件使用的时候仍应该使用 audio 选项。
customAudioType(见 vue-aplayer 文档)
mutex
boolean
true
lrcType
APlayer.LrcType?
0
3 | 1 | 0
(0
:禁用 lrc 歌词,1
:lrc 格式的字符串,3
:lrc 文件 url)listFolded
boolean
false
listMaxHeight
number
250
storageName
string
vuepress-plugin-meting
localStorage
key用于控制全局吸底播放器在移动设备上的一些特殊选项
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 页面单独引入一个播放器咯~ -->