vuepress-plugin-bgm-player2x

更新日志

• 2023/12/05

  • 修复了更改进度条时歌词的不匹配

• 2023/12/07

  • 增加音乐的淡入淡出效果，切换更自然
  • 新增defaultVolume参数控制默认音量

快速开始

npm i vuepress-plugin-bgm-player2x

在config.js中配置

//导出一个bgmPlayer的对象
import { bgmPlayer } from 'vuepress-plugin-bgm-player2x'
//或者我们提供默认导出
import bgmPlayer from 'vuepress-plugin-bgm-player2x'
//在plugin下注册它

细节

基于@vuepress-reco/vuepress-plugin-bgm-player对reco2.x的适配版本。

主题色基于reco主题进行适配。其他主题使用可能会报错，需要修改样式文件。

可移动的歌词轮播(目前只支持网易云id导入)

移动端初步适配

原仓库地址：vuepress-reco/vuepress-plugin-bgm-player: Bgm player plugin for vuepress-theme-reco or other vuepress theme (github.com) Vuepress 音乐播放器插件

使用位置	值
plugin name	vuepress-plugin-bgm-player2x
component name	BgMusic（自动出现在页面中，无需添加额外代码）

Options

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

Attributes

参数	说明	类型	默认值	可选值
defaultVolume	(新增)默认音量	Float	0.75	[0, 1]
rootComponent	(新增)是否注册为区根组件	Boolean	true	true/false
audios	播放列表	Array	无	-
position	播放器位置	Object	{ left: '10px', bottom: '10px', 'z-index': '999999'}	-
autoplay	是否自动播放	Boolean	false	true/false
autoShrink	是否自动缩小	Boolean	false	true/false
shrinkMode	指定PC端缩小为哪种模式	String	'float'	'mini'/'float'
floatPosition	指定浮窗模式浮动在哪一侧	String	'left'	'left'/'right'
floatStyle	浮窗的样式	Object	{ bottom: '200px', 'z-index': '999999' }	-

rootComponent说明

我们默认为你将播放器放在全局根节点下，类似全局组件。（这是符合通常情况下你希望播放器所在位置的）除此之外我们还帮你将播放器注册名为"BgMusic"的全局组件，你可以在任何地方使用它。这些配置可以在

目录下的文件中查看

projectHome > node_modules > vuepress-plugin-bgm-player2x>bin>enhanceAppFile.js

audios示例

• audios为播放列表的对象数组

• 无默认值必须配置

• audio可以是一个包含本地歌曲信息的对象，或网易云歌曲的id(String)（歌曲信息会自动根据网易云id联网获取）

• 示例

  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'
    }
    //网易云id实例
    {
      audioID: '517567145'
    }
  ]  

  shrinkMode说明

• PC端可以通过shrinkMode来指定正常模式缩小时缩小为哪种模式

• 移动端默认缩小为浮窗模式

网易云id说明

可以通过网页版获取歌曲外链的方式获得相关歌曲的id

滚动歌词说明

• 可拖拽移动

• 可隐藏开启

• 移动端隐藏

About

• 兼容性：vuepress-plugin-bgm-player是使用HTML5的Audio开发，故兼容性与Audio的兼容性相关
• 对于 vuepress-theme-reco 的 dark 模式的适配