Hexo中的媒体播放器

APlayer、DPlayer 和 cPlayer

安装

在blog根目录

$ npm install hexo-tag-aplayer --save
$ npm install hexo-tag-dplayer --save

APlayer

使用

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

标签参数

title : 曲目标题
author: 曲目作者
url: 音乐文件 URL 地址
picture_url: (可选) 音乐对应的图片地址
narrow: （可选）播放器袖珍风格
autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
width:xxx: (可选) 播放器宽度 (默认: 100%)
lrc:xxx: （可选）歌词文件 URL 地址

MeingJS

新版本支持QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放
只需要在博客配置文件_config.yml添加设置就能使用

aplayer:
  meting: true

<!-- 简单示例 (id, server, type)  -->
{% meting "10755" "netease" "album" %}

<!-- 进阶示例 -->
{% meting "10755" "netease" "album" "autoplay" "mutex:true" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

有关 meting 的选项列表如下:

选项	默认值	描述
id	必须值	歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server	必须值	音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
type	必须值	`song`, `playlist`, `album`, `search`, `artist`
fixed	`false`	开启固定模式
mini	`false`	开启迷你模式
loop	`all`	列表循环模式：`all`, `one`,`none`
order	`list`	列表播放模式： `list`, `random`
volume	0.7	播放器音量
lrctype	0	歌词格式类型
listfolded	`false`	指定音乐播放列表是否折叠
storagename	`metingjs`	LocalStorage 中存储播放器设定的键名
autoplay	`true`	自动播放，移动端浏览器暂时不支持此功能
mutex	`true`	该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight	`340px`	播放列表的最大长度
preload	`auto`	音乐文件预载入模式，可选项： `none`, `metadata`, `auto`
theme	`#ad7a86`	播放器风格色彩设置

文档

Github | hexo-tag-aplayer

DPlayer

使用

{% dplayer key=value ... %}

<!--key的值-->
dplayer options:
    'autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited' : bool options, use "yes" "y" "true" "1" "on" or just without value to enable
    'preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser' : string arguments
    'volume', 'maximum' : number arguments
container options:
    'width', 'height' : string, used in container element style
other:
    'code' : value of this key will be append to script tag

<!--演示-->
{% dplayer "url=https://blog-1256021060.cos.ap-shanghai.myqcloud.com/videos/Screenshots-transitions.mp4"  "loop=yes" "theme=#FADFA3" "autoplay=false" %}

文档

Github | hexo-tag-dplayer

cPlayer

安装

npm install hexo-tag-cplayer --save

使用

{% cplayer [autoplay] [yaml|cson|json] %}
# type your config here
{% endcplayer %}

博客配置文件_config.yml中添加设置

cplayer:
  meting: true

范例

{% cplayer autoplay %}
- name: チルドレンレコード # 名字
  artist: 96猫,伊東歌詞太郎 # 艺术家
  poster: https://cplayer.js.org/801422833716a4f0f96ff6dff1f77dfe.jpg # 音乐海报
  src: https://cplayer.js.org/8af423669c27d265bb129d04a927044f.mp3 # 音乐资源链接
- 188550 # 网易云音乐 ID
{% endcplayer %}

文档

Github | hexo-tag-cplayer