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暂时,子目录下拉显示等等。

综合指数:⭐️⭐️⭐️

相关文章
|
XML 人工智能 JSON
autojs之vscode必装插件
Color Highlight Highlight web colors in your editor
1944 0
autojs之vscode必装插件
|
5月前
|
Web App开发 开发者
本地安装谷歌的插件之 CRX格式插件离线安装
本地安装谷歌的插件之 CRX格式插件离线安装
523 0
|
6月前
|
C++
[插件安装] VS插件番茄的安装
[插件安装] VS插件番茄的安装
314 0
|
Linux C语言 iOS开发
VSCode安装及卸载教程(图文版)
介绍 VSCode 安装教程,也可以点击下面链接进行观看 C语言鹏哥 VSCode 详细安装视频 博客末尾附有 VSCode 百度网盘下载链接 如果对你有帮助,请关注点赞支持博主,后期会出其他相关软件安装教程!!!
335 0
VSCode安装及卸载教程(图文版)
|
Web App开发 JavaScript 算法
快速制作一个chrome插件
在我日常开发以及娱乐生活中,浏览器是我使用频率较高的一个应用,当我大学拥有第一部电脑开始,之后不论电脑换成什么,以及使用的是什么系统,我的首选浏览器都是Chrome,不仅仅是因为其速度快,更多是它丰富的扩展在吸引我,那么大家有没有想过如何自己来开发一个Chrome浏览器插件呢?是不是有的同学会觉得Chrome浏览器插件的制作难度会很大呢?今天就让我来带你们看看一个简单的Chrome浏览器插件的编写过程,并给大家制作一个简单的插件模板,大家可以通过模板来进行快速开发。
345 0
快速制作一个chrome插件
gitbook 插件 主题
gitbook 插件 主题
gitbook 插件 主题
|
存储 缓存 Java
打造酷炫AndroidStudio插件
打造酷炫AndroidStudio插件
打造酷炫AndroidStudio插件