# vuepress-plugin-meting

🍰 A simple plugin connect APlayer, Meting and VuePress.

npm GitHub stars downloads downloads GitHub license

# Install

yarn add vuepress-plugin-meting -D
# or use npm
npm i vuepress-plugin-meting -D

# Usage

module.exports = {
   plugins: [
      'meting',
      {
         metingApi,
         meting,
         aplayer,
         mobile,
         defaultCover,
      },
   ],
}

使用该插件后将自动注册 <Meting/> 组件与 <APlayer/> 组件,你可以在任意位置使用它们

  • <Meting/> 组件支持 meting Options 和 aplayer Options,其中 aplayeraudio 选项将自动通过 metingApi 获取,如果想要额外添加 audio 的话,可以通过 additionalAudios 选项实现
  • <APlayer/> 组件支持 aplayer Options,当然,你需要自行提供 audio 音乐源

config.js 中的 meting 选项、aplayer 选项和 mobile 选项是全局 UI 组件的配置项,当 meting 选项被配置后,将自动注册一个全局 UI 组件 <Meting/>(吸底模式),这三个配置项不影响其他组件的配置项

# Options

Options 分为 metingApimetingaplayermobiledefaultCover 五部分

# metingApi

Metingapi,默认为 @metowolf 提供的 api,你也可以通过自建修改该选项

# meting

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,上述三个选项将被覆盖(本参数仅支持 neteasetencentxiami 三平台)

该 Option 可分别填写 servertypemid

meting: {
  server: "netease",
  type: "playlist",
  mid: "6838211960",
}

也可以只填写 auto

meting: {
   auto: 'https://music.163.com/#/playlist?id=6838211960'
}

# aplayer

详情见 vue-aplayer 文档(当前无法访问) (opens new window) vue-aplayer 文档 GitHub 页面 (opens new window)

  • 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

  • customAudioType(见 vue-aplayer 文档 (opens new window)

  • mutex

    • 类型:boolean
    • 默认值: true
    • 描述:是否开启互斥模式
  • lrcType

    • 类型:APlayer.LrcType?
    • 默认值: 0
    • 描述:设置 lrc 歌词解析模式
    • 可选值: 3 | 1 | 00:禁用 lrc 歌词,1:lrc 格式的字符串,3:lrc 文件 url)
  • listFolded

    • 类型:boolean
    • 默认值: false
    • 描述:是否折叠播放列表
  • listMaxHeight

    • 类型:number
    • 默认值: 250
    • 描述:设置播放列表最大高度,单位为像素
  • storageName

    • 类型:string
    • 默认值: vuepress-plugin-meting
    • 描述:设置存储播放器设置的 localStorage key

# mobile

用于控制全局吸底播放器在移动设备上的一些特殊选项

  • cover

    • 类型:boolean
    • 默认值: true
    • 描述:是否显示封面图,如果隐藏的话可以防止播放器遮挡移动设备上的文字内容
  • lrc

    • 类型:boolean
    • 默认值: true
    • 描述:是否显示歌词

# defaultCover

加载音乐封面时所显示的默认封面图

# Examples

// .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 页面单独引入一个播放器咯~ -->

# Thanks