本文介绍在 Hexo 中插入 cPlayer 播放器
cPlayer 介绍
A beautiful and clean WEB Music Player by HTML5. http://cplayer.js.org/
Hexo 中使用 cPlayer
hexo-tag-mplayer 是一款在 Hexo 中使用 cPlayer 的插件。
插件的安装和使用非常的简单，只需要进入 Hexo 博客根目录，然后安装：
$ npm install hexo-tag-mplayer --save
|
之后在文章内使用 mplayer 的 tag 就可以了：
{% mplayer %}
{
}
{% endmplayer %}
|
其中：
mplayer 和 endmplayer 是 Hexo 的标签，不需要修改；
options 部分是图表的配置。
快速上手
可参考如下配置，使用 hexo-tag-mplayer 插件。
{% mplayer %}
playlist: [
{
src: '歌曲资源链接...',
poster: '封面链接...',
name: '歌曲名称...',
artist: '歌手名称...',
lyric: '歌词...',
sublyric: '副歌词，一般为翻译...',
album: '专辑，唱片...'
},
{
...
},
...
],
autoplay: true,
volume: 0.75,
playmode: "listloop",
big: true,
dark: false
{% endmplayer %}
|
更详细配置可参考官方文档：cPlayer Option
实例参考
下面我们来看插件的一些使用样例：
1、默认样式
源码参考如下：
{% mplayer %}
playlist: [
{
src: 'https://img.wshunli.com/about/阿婆说.mp3',
poster: 'https://img.wshunli.com/about/阿婆说.jpg',
name: '阿婆说',
artist: '陈一发儿',
lyric: '[00:03.85]阿婆说-陈一发儿\n[00:04.86]作曲:暗杠\n[00:05.29]作词:暗杠/古道背棺人\n[00:05.81]编曲：暗杠\n[00:06.25]器乐演奏：暗杠\n[00:06.73]和声编配：暗杠\n[00:07.30]混音后期：A.Q.Studio\n[00:16.33]囡囡呀不要调皮\n[00:19.15]坐下听听阿婆说\n[00:23.12]这个季节天气转凉地上雨水多\n[00:30.17]囡囡呀不要惊慌\n[00:33.13]过来听听阿婆说\n[00:36.91]睡个觉雷声过后就能看云朵\n[00:44.58]囡囡别怕\n[00:46.26]囡囡别哭\n[00:47.84]快快睡咯\n[00:51.23]你静静听首歌\n[00:58.51]蛐蛐轻些\n[00:59.94]静静安歇\n[01:01.73]月儿圆哟\n[01:05.02]你乖乖呀抱阿婆\n[01:11.93]风铃呀轻响鸟儿轻唱远处谁在和\n[01:18.75]亲了彩虹惊了云朵\n[01:21.81]我已成归客\n[01:25.88]囡囡呀你会长大会走很远会觉得累了\n[01:33.02]只要记得河婆话“阿婆”怎么说\n[02:07.56]囡囡呀你会困惑\n[02:10.65]慢些脚步别忘了\n[02:14.39]慢慢的你会明白丢了是什么\n[02:21.46]人生路本就是场获得与失的选择\n[02:28.14]迷路时想想当年阿婆怎么说\n[02:35.85]回头看看\n[02:37.46]雨水过后\n[02:39.26]云彩很多\n[02:42.49]来吧阿婆帮你偷偷摘一朵\n[02:49.67]等你老了\n[02:51.29]阿婆走了\n[02:53.09]你要记得\n[02:56.64]把这乡音教会娃儿怎么说\n[03:03.66]把这乡音教给你的囡囡哟\n[03:38.37]回头看看\n[03:40.11]雨水过后\n[03:41.75]少了冷漠\n[03:45.09]来吧阿婆等你还在那村落'
}
],
autoplay: false,
volume: 0.75,
big: false,
dark: false
{% endmplayer %}
|
2、暗黑样式
源码参考如下：
{% mplayer %}
playlist: [
{
src: 'https://img.wshunli.com/about/阿婆说.mp3',
poster: 'https://img.wshunli.com/about/阿婆说.jpg',
name: '阿婆说',
artist: '陈一发儿',
lyric: '省略歌词...'
}
],
autoplay: false,
volume: 0.75,
big: false,
dark: true
{% endmplayer %}
|
3、大图样式
源码参考如下：
{% mplayer %}
playlist: [
{
src: 'https://img.wshunli.com/about/阿婆说.mp3',
poster: 'https://img.wshunli.com/about/阿婆说.jpg',
name: '阿婆说',
artist: '陈一发儿',
lyric: '省略歌词...'
}
],
autoplay: false,
volume: 0.75,
big: true,
dark: false
{% endmplayer %}
|
4、大图暗黑样式
源码参考如下：
{% mplayer %}
playlist: [
{
src: 'https://img.wshunli.com/about/阿婆说.mp3',
poster: 'https://img.wshunli.com/about/阿婆说.jpg',
name: '阿婆说',
artist: '陈一发儿',
lyric: '省略歌词...'
}
],
autoplay: false,
volume: 0.75,
big: true,
dark: true
{% endmplayer %}
|
非常感谢 cPlayer 及 hexo-tag-cplayer 作者。
最后欢迎 star 或者提交 PR 到本仓库。
https://github.com/wshunli/hexo-tag-mplayer
