https://github.com/vuepress-reco/vuepress-plugin-bgm-player
Bgm player plugin for vuepress-theme-reco or other vuepress theme
https://github.com/vuepress-reco/vuepress-plugin-bgm-player
Last synced: 6 months ago
JSON representation
Bgm player plugin for vuepress-theme-reco or other vuepress theme
- Host: GitHub
- URL: https://github.com/vuepress-reco/vuepress-plugin-bgm-player
- Owner: vuepress-reco
- License: mit
- Created: 2019-11-18T01:25:13.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-09-09T10:52:41.000Z (over 4 years ago)
- Last Synced: 2025-02-08T00:21:19.835Z (11 months ago)
- Language: Vue
- Size: 157 KB
- Stars: 23
- Watchers: 2
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @vuepress-reco/vuepress-plugin-bgm-player
## 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'}|-|
|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' }|-|
### 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-reco` 的 `dark` 模式的适配
- **开发计划**
- 移动端适配问题修复