hexo音视频播放插件

背景

期望给hexo添加音频，所以添加了插件hexo-tag-aplayer，与此类似的是一个视频插件，两个项目的地址：

hexo-tag-aplayer：https://github.com/MoePlayer/hexo-tag-aplayer/

hexo-tag-dplayer：https://github.com/MoePlayer/hexo-tag-dplayer

其实完全可以在md文件中直接添加html代码即可，无需安装插件，不过由于也是一次尝试，索性就记录记录

搭建方案1

  1. 安装插件

    1
    2
    npm install --save hexo-tag-aplayer
    npm install --save hexo-tag-dplayer

  2. 修改主题的配置文件：butterfly.yml开启butterfly主题的aplayerInject

    1
    2
    3
    4
    # 修改的是该主题的配置文件为butterfly.yml
    aplayerInject:
      enable: true
      per_page: true

  3. 将aplayer对应的代码添加到配置文件中：

    1
    2
    3
    4
    # require 代表着這些參數是必須要使用的，其它的參數則可以根據自己需要配置。
    # 配置全局吸底，data-fixed 和 data-mini 也必須配置，配置為 true。
    # 如果使用 Pjax，則在 class 裏需添加 no-destroy，這樣防止切換頁面時 Aplayer 被銷毀。
    <div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>

    参数解释：

    option default description
    data-id require song id / playlist id / album id / search keyword
    data-server require music platform: netease, tencent, kugou, xiami, baidu
    data-type require song, playlist, album, search, artist
    data-fixed FALSE enable fixed mode
    data-mini FALSE enable mini mode
    data-autoplay FALSE audio autoplay
    data-theme #2980b9 main color
    data-loop all player loop play, values: ‘all’, ‘one’, ‘none’
    data-order list player play order, values: ‘list’, ‘random’
    data-preload auto values: ‘none’, ‘metadata’, ‘auto’
    data-volume 0.7 default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
    data-mutex TRUE prevent to play multiple player at the same time, pause other players when this player start play
    data-lrctype 0 lyric type
    data-listfolded FALSE indicate whether list should folded at first
    data-listmaxheight 340px list max height
    data-storagename metingjs localStorage key that store player setting

    将aplayer代码插入到主题配置文件(butterly.yml)文件中

    1
    2
    3
    4
    inject:
      head:
      bottom:
        - <div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>

  4. 配置切换页面时，音乐不会中断：将主题配置文件(butterfly.yml)中的pjax设置为true

    1
    pjax: true

  5. 当上述配置结束后，会导致文章详情页的目录收放按钮被遮挡，此时需要调整目录的收放按钮

    1
    2
    3
    4
    5
    6
    7
    # 修改主题文件(butterfly.yml)的inject配置项，
    inject:
      head:
        # 将其配置到音乐播放的右侧
        - '<style type="text/css">#toggle-sidebar {bottom: 80px}</style>'
        # 或者将其配置到音乐播放的上面
        # - '<style type="text/css">#toggle-sidebar {left: 100px}</style>'

搭建方案2

在方案1的基础上，如果觉得【第3步】配置的html代码在后期的时候修改不便，则可以对其进行修改，修改方案如下：

  1. 修改主题模板文件(\themes\butterfly\layout\includes\head\aplayer.pug)文件

    1
    2
    3
    4
    5
    6
    7
    link(rel='stylesheet' href=url_for(theme.CDN.aplayer_css))
    script(src=url_for(theme.CDN.aplayer_js))
    script(src=url_for(theme.CDN.meting_js))

    // 添加读取aplayer配置文件内容
    if theme.aplayer && theme.aplayer.enable
        .aplayer(data-id=theme.aplayer.id data-server=theme.aplayer.server data-type=theme.aplayer.type data-fixed=theme.aplayer.fixed data-mini=theme.aplayer.mini data-listFolded=theme.aplayer.listFolded data-order=theme.aplayer.order data-preload=theme.aplayer.preload)

  2. 修改主题配置文件(butterfly.yml)，添加配置项

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # 修改aplayer中播放的歌单
    aplayer:
      enable: true  # 使用启用该aplayer
      id: 5065294585  # 对应音乐平台播放专辑的ID值，一般为对应链接最后的ID值
      server: netease 
      type: playlist  # 请设置为playlist，具体我也不清楚
      fixed: 'true'
      order: random
      preload: none
      listFolded: 'false'

博文中插入

  1. 添加单曲，则直接在md文件中添加如下内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # title : 曲目标题
    # author: 曲目作者
    # url: 音乐文件 URL 地址
    # picture_url: (可选) 音乐对应的图片地址
    # narrow: （可选）播放器袖珍风格
    # autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
    # width:xxx: (可选) 播放器宽度 (默认: 100%)
    # lrc:xxx: （可选）歌词文件 URL 地址
    {% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

    # 当开启 Hexo 的 文章资源文件夹 功能时，可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中，然后直接引用：
    {% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

  2. 添加播放列表，填写内容如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    {% aplayerlist %}
    {
        "narrow": false,  // （可选）播放器袖珍风格
        "autoplay": true,  // （可选) 自动播放，移动端浏览器暂时不支持此功能
        "mode": "random",  // （可选）曲目循环类型，有 'random'（随机播放）, 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation' 
        "showlrc": 3,  // （可选）歌词显示配置项，可选项有：1,2,3
        "mutex": true,  // （可选）该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
        "theme": "#e6d0b2",  // （可选）播放器风格色彩设置，默认：#b7daff
        "preload": "metadata",  // （可选）音乐文件预载入模式，可选项： 'none' 'metadata' 'auto', 默认: 'auto'
        "listmaxheight": "513px",  // (可选) 该播放列表的最大长度
        "music": [
            {
                "title": "CoCo",
                "author": "Jeff Williams",
                "url": "caffeine.mp3",
                "pic": "caffeine.jpeg",
                "lrc": "caffeine.txt"
            },
            {
                "title": "アイロニ",
                "author": "鹿乃",
                "url": "irony.mp3",
                "pic": "irony.jpg"
            }
        ]
    }
    {% endaplayerlist %}

备注

全文摘录：https://demo.jerryc.me/posts/507c070f/，感谢文章作者呕心沥血之作。