vuepress-plugin-Meting2

:cake: A simple plugin Support vuepress2.x based on Aplayer+Meting

Install

# use yarn
yarn add vuepress-plugin-meting2 -D
# or use npm
npm i vuepress-plugin-meting2 -D
# or use pnpm
pnpm add vuepress-plugin-meting2 -D

Usage

plugins: [
    metingPlugin({
      metingOptions: {
        global:true, // 开启关闭全局播放器
        server: "tencent",
        api: "https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r",
        type: "playlist",
        mid: "851947617",
      },
    }),
];

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

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

Options

Options 分为 aplayerOptions、metingOptions、additionalAudios 三部分

aplayerOptions

详情见 aplayer 文档

参数

| 名称 | 默认值 | 描述 | | --------------- | ---------------------------------- | ------------------------------------------------------------ | | container | document.querySelector('.aplayer') | 播放器容器元素 | | fixed | false | 开启吸底模式, 详情 | | mini | false | 开启迷你模式, 详情 | | autoplay | false | 音频自动播放 | | theme | '#b7daff' | 主题色 | | loop | 'all' | 音频循环播放, 可选值: 'all', 'one', 'none' | | order | 'list' | 音频循环顺序, 可选值: 'list', 'random' | | preload | 'auto' | 预加载，可选值: 'none', 'metadata', 'auto' | | volume | 0.7 | 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效 | | audio | - | 音频信息, 应该是一个对象或对象数组 | | audio.name | - | 音频名称 | | audio.artist | - | 音频艺术家 | | audio.url | - | 音频链接 | | audio.cover | - | 音频封面 | | audio.lrc | - | 详情 | | audio.theme | - | 切换到此音频时的主题色，比上面的 theme 优先级高 | | audio.type | 'auto' | 可选值: 'auto', 'hls', 'normal' 或其他自定义类型, 详情 | | customAudioType | - | 自定义类型，详情 | | mutex | true | 互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器 | | lrcType | 0 | 详情 | | listFolded | false | 列表默认折叠 | | listMaxHeight | - | 列表最大高度 | | storageName | 'aplayer-setting' | 存储播放器设置的 localStorage key |

metingOptions

| 名称 | 默认值 | 描述 | | -------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | global | false | 是否启用全局播放器 | | mid | - | MetingApi 中的 id 参数，即资源 ID | | server | netease | MetingApi 中的 server 参数，即音乐平台 | | type | song | MetingApi 中的 type 参数，即资源类型（播放列表、单曲、专辑等） | | auto | | 资源 url，填写后可通过资源 url 自动解析资源平台、类型、ID，上述三个选项将被覆盖（本参数仅支持 netease、tencent、xiami 三平台） | | auth | auth | | | api | https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r | Meting APi 服务地址(如不可用自行替换) | | list | [] | 数组，除 list 外其他所有项 | | aplayerOptions | - | 全局Meting的APlayer配置 |

additionalAudios

• additionalAudios

  • 类型：Array<Audio>
  • 默认值：[]
  • 描述：除 Meting 解析的 audio 外额外添加的 audio

Examples

<Meting mid="003UTVCN0QvffG" server="tencent" type="song" api="https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r"/>
<!-- 这样就可以在页面单独引入一个播放器咯～ -->

或者像这样

<Meting auto="https://y.qq.com/n/ryqq/songDetail/003UTVCN0QvffG" api="https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r"/>
<!-- 使用网站链接就可以解析成功并引入一个播放器咯~ -->

• QQ音乐的mid不是数字
  • https://y.qq.com/n/ryqq/songDetail/003UTVCN0QvffG
• 网易云
  • https://music.163.com/#/playlist?id=60198

Thanks

• APlayer
• Meting
• MetingJS