gitbook 插件:音乐

简介: gitbook 插件:音乐

gitbook 插件:音乐

文章目录

1. gitbook-plugin-zymplayer 插件

gitbook-plugin-zymplayer 插件 可以播放音乐。

1.1 配置

"plugins": [ "zymplayer" ]
"pluginsConfig": {
   "zymplayer": {
     "element": "body", 
     "width": "350px", 
     "mode": "random", 
     "show": "all", 
     "list": {
         "path": "assets/music/musicList.json",
         "height": 180, 
         "expand": true 
     },
     "position": {
         "pos": "fixed", 
         "right": "0px",
         "bottom": "0px" 
         }
   }
}

音乐列表存放musicList.json、音乐mp3在目录song、音乐图片在目录img

$ ls assets/music/
img  musicList.json  song
$ ls assets/music/img/
Angel_Lover-Prendre_sa_main.png  dylanf_卡农.jpg                                Peter_Jeremias-Dusk.jpg  张宇桦_大自然的空气_钢琴曲.jpg  陈光荣_Tanning_In_Your_Sunray.jpg
Denean-Vow_to_Virtue.jpg         Jocelyn_Pook_Russian_Red-Loving_Strangers.jpg  Vexento_Anesthesia.jpg   群星_森林之歌.jpg
$ ls assets/music/song/
Angel_Lover-Prendre_sa_main.mp3  dylanf_卡农.mp3                                Peter_Jeremias-Dusk.mp3  张宇桦_大自然的空气_钢琴曲.mp3  陈光荣_Tanning_In_Your_Sunray.mp3
Denean-Vow_to_Virtue.mp3         Jocelyn_Pook_Russian_Red-Loving_Strangers.mp3  Vexento_Anesthesia.mp3   群星_森林之歌.mp3

musicList.json内容如下:

cat  assets/music/musicList.json 
[
    {
        "name": "Tanning In Your Sunray",
        "artist": "陈光荣",
        "url": "assets/music/song/陈光荣_Tanning_In_Your_Sunray.mp3",
        "cover_art_url": "assets/music/img/陈光荣_Tanning_In_Your_Sunray.jpg",
        "duration": "03:38"
    },
    {
        "name": "Prendre sa main",
        "artist": "Angel Lover",
        "url": "assets/music/song/Angel_Lover-Prendre_sa_main.mp3",
        "cover_art_url": "assets/music/img/Angel_Lover-Prendre_sa_main.jpg",
        "duration": "03:31"
    },
    {
        "name": "Vow to Virtue",
        "artist": "Denean",
        "url": "assets/music/song/Denean-Vow_to_Virtue.mp3",
        "cover_art_url": "assets/music/img/Denean-Vow_to_Virtue.jpg",
        "duration": "03:43"
    },
    {
        "name": "Loving Strangers",
        "artist": "Jocelyn Pook Russian Red",
        "url": "assets/music/song/Jocelyn_Pook_Russian_Red-Loving_Strangers.mp3",
        "cover_art_url": "assets/music/img/Jocelyn_Pook_Russian_Red-Loving_Strangers.jpg",
        "duration": "03:43"
    },
    {
        "name": "Dusk",
        "artist": "Peter Jeremias",
        "url": "assets/music/song/Peter_Jeremias-Dusk.mp3",
        "cover_art_url": "assets/music/img/Peter_Jeremias-Dusk.jpg",
        "duration": "02:05"
    },
    {
        "name": "Anesthesia",
        "artist": "Vexento",
        "url": "assets/music/song/Vexento_Anesthesia.mp3",
        "cover_art_url": "assets/music/img/Vexento_Anesthesia.jpg",
        "duration": "03:41"
    },
    {
        "name": "森林之歌",
        "artist": "群星",
        "url": "assets/music/song/群星_森林之歌.mp3",
        "cover_art_url": "assets/music/img/群星_森林之歌.jpg",
        "duration": "02:04"
    },
    {
        "name": "张宇桦_大自然的空气_钢琴曲",
        "artist": "张宇桦_大自然的空气_钢琴曲",
        "url": "assets/music/song/张宇桦_大自然的空气_钢琴曲.mp3",
        "cover_art_url": "assets/music/img/张宇桦_大自然的空气_钢琴曲.jpg",
        "duration": "02:22"
    },
    {
        "name": "卡农",
        "artist": "dylanf",
        "url": "assets/music/song/dylanf_卡农.mp3",
        "cover_art_url": "assets/music/img/dylanf_卡农.jpg",
        "duration": "05:00"
    }
]

1.2 安装

gitbook install

1.3 效果

b41705914ab149ed906428aa9032a946.gif

1.4 评论

插件效果很好,但存在bug,影响logo暂时,子目录下拉显示等等。

综合指数:⭐️⭐️⭐️

相关文章
|
6月前
|
Web App开发 开发者
本地安装谷歌的插件之 CRX格式插件离线安装
本地安装谷歌的插件之 CRX格式插件离线安装
700 0
|
7月前
Vscode 插件-代码敲出不同的特效
Vscode 插件-代码敲出不同的特效
161 0
|
7月前
|
C++
[插件安装] VS插件番茄的安装
[插件安装] VS插件番茄的安装
332 0
|
存储 前端开发 JavaScript
05. 使用 cordova plugman 编辑和添加插件
05. 使用 cordova plugman 编辑和添加插件
180 0
|
存储 缓存 Java
打造酷炫AndroidStudio插件
打造酷炫AndroidStudio插件
gitbook 插件 主题
gitbook 插件 主题
gitbook 插件 主题
|
前端开发
gitbook 插件:视频
gitbook 插件:视频
gitbook 插件:视频