# @vuepress-reco/vuepress-plugin-bgm-player

demo.png

# Details

Bgm player plugin for vuepress-theme-reco or other vuepress theme.
Vuepress 音乐播放器插件

使用位置
plugin name @vuepress-reco/vuepress-plugin-bgm-player
component name BgMusic(自动出现在页面中,无需添加额外代码)

# Options

以下为插件注入时的参数。

# Attributes

参数 说明 类型 默认值 可选值
audios 播放列表 Array -
position 播放器位置 Object { left: '10px', bottom: '10px', 'z-index': '999999'} -
autoShrink 是否自动缩小 Boolean false true/false
shrinkMode 指定PC端缩小为哪种模式 String 'float' 'mini'/'float'
floatPosition 指定浮窗模式浮动在哪一侧 String 'left' 'left'/'right'
floatStyle 浮窗的样式 Object { bottom: '200px', 'z-index': '999999' } -

# audios示例

  • audios为播放列表的对象数组
  • 无默认值必须配置
  • 示例
    audios: [
      // 本地文件示例
      {
        name: '장가갈 수 있을까',
        artist: '咖啡少年',
        url: '/bgm/1.mp3',
        cover: '/bgm/1.jpg'
      },
      // 网络文件示例
      {
        name: '강남역 4번 출구',
        artist: 'Plastic / Fallin` Dild',
        url: 'https://assets.smallsunnyfox.com/music/2.mp3',
        cover: 'https://assets.smallsunnyfox.com/music/2.jpg'
      },
      {
        name: '用胳膊当枕头',
        artist: '최낙타',
        url: 'https://assets.smallsunnyfox.com/music/3.mp3',
        cover: 'https://assets.smallsunnyfox.com/music/3.jpg'
      }
    ]  
    

# shrinkMode说明

  • PC端可以通过shrinkMode来指定缩小时缩为哪种模式
  • 移动端默认缩小为浮窗模式

# About

  • 兼容性:vuepress-plugin-bgm-player是使用HTML5的Audio开发,故兼容性与Audio的兼容性相关
  • 对于 vuepress-theme-recodark 模式的适配
    dark.png
  • 开发计划
    • 自动播放
    • 移动端适配问题修复

Made with ❤️ by Ahmad Mostafa - @z3by