在 Hexo 中插入 cPlayer 播放器

Author Avatar
wshunli 1月 04, 2019
  • 在其它设备中阅读本文章

本文介绍在 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 %}
{
    // TODO mplayer options goes here
}
{% endmplayer %}

其中:
mplayerendmplayer 是 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 %}

非常感谢 cPlayerhexo-tag-cplayer 作者。

最后欢迎 star 或者提交 PR 到本仓库。

https://github.com/wshunli/hexo-tag-mplayer

如果本文对您有所帮助,且您手头还很宽裕,欢迎打赏赞助我,以支付网站服务器和域名费用。 https://paypal.me/wshunli 您的鼓励与支持是我更新的最大动力,我会铭记于心,倾于博客。
本文链接:https://www.wshunli.com/posts/hexo-tag-mplayer.html