Skip to content

OrageKK/vuepress-plugin-meting2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vuepress-plugin-Meting2

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

npm GitHub stars downloads downloads GitHub license

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

Options

Options 分为 aplayerOptionsmetingOptionsadditionalAudios 三部分

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
lrcDisplay 'hide' 是否默认显示歌词,可选值'show','hide','toggle'

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"/>
<!-- 使用网站链接就可以解析成功并引入一个播放器咯~ -->

Thanks