hexo添加自定义音乐播放器

解决方案

  • 1.使用音乐平台自己的插件
  • 2.结合 MetingJS 使用 APlayer
  • 3.使用 hexo-tag-aplayer
  • 花里胡哨，一通乱搞法

使用音乐平台自己的插件

这里就以网易云做例子，登录网易云网页版
- 生成单曲的那种直接点进一首歌，可以在音乐封面下，看见生成外链的蓝色字，点击进入看提示操作

1
2
3
4
5
6
7
8
9
10

<iframe
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
width=330
height=86
src="//music.163.com/outchain/player?type=2&id=420400344&auto=1&height=66">
</iframe>

  • 生成歌单：进入我的主页->点击你想生成外链歌单的歌单->在歌单播放次数边上，有外链入口

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <iframe
    frameborder="no"
    border="0"
    marginwidth="0"
    marginheight="0"
    width=330
    height=220
    src="//music.163.com/outchain/player?type=0&id=2845370038&auto=1&height=430">
    </iframe>

> 可以在你想插入的地方插入，在mackdown中插入也是可以的,然后一些配置看官网的祥解吧 > 官方的外链，虽然很方便但缺点很明显，一些歌曲受版权保护无法生成外链，播放器样式单一不灵活

结合 MetingJS 使用 APlayer

APlayer 目前广泛使用的 HTML5 音乐播放器，MetingJS 用于解析歌曲链接
另外还有一个dplayer用来插入视频

MetingJS
Aplayer
在文章中应用

新建 /layout/_widget/aplayer.ejs
在文章头部，添加 aplayer: true
然而不是所有的文章你都会去加音乐，所以在 /_partial/head.ejs 加上这段代码

1
2
3
4
5
```ejs
    <% if (page.aplayer === true) { %>
     <%- partial('_widget/aplayer') %>
 <% } %>
```

然后就是插入这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div
 class="aplayer"
 data-fixed="true"
 data-id="490697747"
 data-server="netease"
 data-type="playlist"
 data-order="random"
 data-autoplay="true"
 data-mutex="true"
 data-loop="all"
 data-list-folded="false"
 data-volume="0.7"
 fixed="true"
 data-listmaxheight="240px"
 data-theme="#FF4081">
</div>
<!--这个id就是网页中打开的音乐id，在网址后面-->

我是在ejs文件全局引入

1
2
3
4
5
>         <link href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
>         <script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
>          <!-- Import meting.js -->
>          <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
>

参数 是否必须 默认值 描述&可选值
data-id 是 单曲ID / 歌单ID / 专辑ID / 搜索关键词
data-server 是 音乐平台：netease,tencent,kugou,xiami,baidu
data-type 是 音乐类型：song,playlist,album,search,artist
data-autoplay 否 false 是否自动播放，移动端浏览器不支持该选项
data-mutex 否 true 播放时是否暂停其他APlayer对象
data-listmaxheight 否 340px 播放列表最高高度
data-preload 否 auto 音乐预加载模式：none, metadata, auto
data-theme 否 #2980b9 主题色
data-mini 否 false 是否开启迷你模式
data-loop 否 all 循环方式：all, one, none
data-order 否 list 播放顺序：list, random
data-lrc 否 false
data-list-folded 否 false 歌单列表初始时是否折叠
data-volume 否 0.7 用户未自定义前的默认初始化音量 
1
2
>
>

配置参照这个官方表

Name Default Description
container document.querySelector(‘.aplayer’) player container
fixed false enable fixed mode, see more details
mini false enable mini mode, see more details
autoplay false audio autoplay
theme ‘#b7daff’ main color
loop ‘all’ player loop play, values: ‘all’, ‘one’, ‘none’
order ‘list’ player play order, values: ‘list’, ‘random’
preload ‘auto’ values: ‘none’, ‘metadata’, ‘auto’
volume 0.7 default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
audio - audio info, should be an object or object array
audio.name - audio name
audio.artist - audio artist
audio.url - audio url
audio.cover - audio cover
audio.lrc - see more details
audio.theme - main color when switching to this audio, it has priority over the above theme
audio.type ‘auto’ values: ‘auto’, ‘hls’, ‘normal’ or other custom type, see more details
customAudioType - see more details
mutex true prevent to play multiple player at the same time, pause other players when this player start play
lrcType 0 see more details
listFolded false indicate whether list should folded at first
listMaxHeight - list max height
storageName ‘aplayer-setting’ localStorage key that store player setting

使用 hexo-tag-aplayer

在文章中使用：
hexo-tag-aplayer

1
2
3
4
5
6
7
     npm install --save hexo-tag-aplayer
     //在站点的_config.yml中配置
      aplayer:
        meting: true
     //使用
     {% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}
{% meting "25718007" "netease" "song" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

[^这里说一句，meting和aplayer标签不可以同时使用]

[^更多官方配置请上官网查看]

花里胡哨，一通乱搞法

  1. 当然，我把meting文件，aplayer文件，引入的是全局的，就是在主题的layou.ejs中引入
  2. 然后在那里加
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div
         class="aplayer"
         data-fixed="true"
         data-id="490697747"
         data-server="netease"
         data-type="playlist"
         data-order="random"
         data-autoplay="true"
         data-mutex="true"
         data-loop="all"
         data-list-folded="false"
         data-volume="0.7"
         fixed="true"
         data-listmaxheight="240px"
         data-theme="#FF4081">
    </div>这段代码

然后，你以为能出来吗，不是的！我这么胡搞，他可能听话吗，
3.试验后发现，只要在一篇文章中加入meting标签或者是aplayer标签就可以出现了

Share
8 min. read