# 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
    }
  ]
}

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

  • <Meting/> 组件支持 meting Options 和 aplayer Options,其中 aplayeraudio 选项将自动通过 metingApi 获取
  • <APlayer/> 组件支持 aplayer Options,当然,你需要自行提供 audio 音乐源

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

# Options

Options 分为 metingApimetingaplayermobile 四部分

# metingApi

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

# meting

Meting 相关选项

  • server

    • 类型:string
    • 默认值: undefined
    • 描述:MetingApi 中的 server 参数,即音乐平台
    • 可选值: "netease" | "tencent" | "xiami"
  • type

    • 类型:string
    • 默认值: undefined
    • 描述:MetingApi 中的 type 参数,即资源类型(播放列表、单曲、专辑等)
    • 可选值: "song" | "album" | "artist" | "playlist"
  • mid

    • 类型:string
    • 默认值: undefined
    • 描述:MetingApi 中的 id 参数,即资源 ID
  • auto

    • 类型:string
    • 默认值:""
    • 描述:资源 url,填写后可通过资源 url 自动解析资源平台、类型、ID,上述三个选项将被覆盖

该 Option 可分别填写 servertypemid

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

也可以只填写 auto

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

# aplayer

详情见 vue-aplayer 文档

  • 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
    • 描述:设置播放器的音量
  • audio(见 vue-aplayer 文档

  • customAudioType(见 vue-aplayer 文档

  • 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
    • 描述:是否显示歌词

# Examples

// .vuepress/config.js
module.exports = {
  plugins: [
    'meting', {
      metingApi: "https://meting.sigure.xyz/api/music",
      meting: {
        server: "netease",
        type: "playlist",
        mid: "2539599584",
      },          // 不配置该项的话不会出现全局播放器
      aplayer: {
        lrcType: 3
      }
    }
  ]
}
<!-- about.md -->

<Meting server="netease"
        type="playlist"
        mid="2539599584"
        :lrc-type="3"/>

<!-- 这样就可以在 about.html 页面单独引入一个播放器咯~ -->

# Thanks

Made with ❤️ by Ahmad Mostafa - @z3by