aplayer音乐播放器、dplayer本地音乐播放器、豆瓣电影

aplayer音乐播放器

音乐播放器使用的是aplayer插件，Aplayer官网

安装依赖

安装播放器依赖
1
npm install --save hexo-tag-aplayer

在配置文件_config.yml添加配置

aplayer:
  meting: true
  asset_inject: false

在主题配置文件_config.butterfly.yml添加配置

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true


pjax:
 enable: ture
 exclude:

Aplayer参数配置说明

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

Aplayer播放器模板

普通界面播放器

在.md文件中使用下面代码

1	{% meting "991128474" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %}

代码会被渲染成下面这样

<div id="aplayer-uxAIfEUs" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="8237129094" data-server="tencent" data-type="artist" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#3F51B5"></div>

或者在MarkDown中直接使用标签

同时把主题配置文件中的aplayerInject开放

1	<div class="aplayer" data-id="8237129094" data-server="tencent" data-type="artist" data-mutex="true" data-preload="auto" data-theme="#3F51B5"></div>

全局底部吸附播放器

由于需要全局都插入 aplayer 和 meting 资源，为了防止插入重复的资源，需要把 asset_inject 设为 false

修改配置文件_config.yml的配置：

1
2
3

aplayer:
  meting: true
  asset_inject: false

开启主题的 aplayerInject，修改主题配置文件_config.butterfly.yml的配置

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

# Pjax
pjax:
 enable: ture
 exclude:

在主题配置文件_config.butterfly.yml的bottom引入播放器

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="8237129094" 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>

参数	默认值	描述
data-id	必需	歌曲id /播放列表id /相册id /搜索关键字
data-server	必需	音乐平台: netease, tencent, kugou, xiami, baidu
data-type	必需	song, playlist, album, search, artist
data-fixed	false	是否固定位置 true/false
data-mini	false	是否设置为mini模式 true/false
data-autoplay	false	是否自动播放 true/false
data-theme	#2980b9	播放器主题颜色
data-loop	all	播放器循环播放，值为’all’， ‘one’， ‘none’
data-order	list	播放顺序 random/list
data-preload	auto	是否预加载 none/metadata/auto
data-volume	0.7	默认音量，注意玩家会记得用户设置，默认音量在用户自己设置音量后将不起作用
data-mutex	true	防止同时玩多个玩家，当这个玩家开始玩时暂停其他玩家
data-lrctype	0	抒情类型
data-listfolded	false	列表是否折叠 true/false
data-listmaxheight	340px	列表最大高度
data-storagename	metingjs	存储播放器设置的存储键

require 代表着这些参数是必须要使用的，其它的参数则可以根据自己需要配置。
配置全局吸底，data-fixed 和 data-mini 也必须配置，配置为 true
如果使用 Pjax，则在 class 里需添加 no-destroy，这样防止切换页面时 Aplayer 被销毁

全局底部吸附播放器（底部胶囊播放器）

由于需要全局都插入 aplayer 和 meting 资源，为了防止插入重复的资源，需要把 asset_inject 设为 false

引入CDN，修改_config.butterfly.yml中
CDN.option.aplayer_css
CDN.option.aplayer_js
CDN.option.meting_js
建议将其下载至本地再引入, 博主不保证其可访问性。

1
2
3

aplayer_css: https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.css
aplayer_js: https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/aplayer/1.10.1/APlayer.min.js
meting_js: https://npm.elemecdn.com/hexo-anzhiyu-music@1.0.1/assets/js/Meting2.min.js

或者

1
2
3

aplayer_css: https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/file/aplayer/APlayer.min.css
aplayer_js: https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/file/aplayer/APlayer.min.js
meting_js: https://smart-blog.oss-cn-wulanchabu.aliyuncs.com/file/aplayer/Meting2.min.js

meting.js内容如下

"use strict";
function _objectSpread(a) {
  for (var b = 1; b < arguments.length; b++) {
    var c = null == arguments[b] ? {} : arguments[b],
      d = Object.keys(c);
    "function" == typeof Object.getOwnPropertySymbols &&
      (d = d.concat(
        Object.getOwnPropertySymbols(c).filter(function (a) {
          return Object.getOwnPropertyDescriptor(c, a).enumerable;
        })
      )),
      d.forEach(function (b) {
        _defineProperty(a, b, c[b]);
      });
  }
  return a;
}
function _defineProperty(a, b, c) {
  return (
    b in a ? Object.defineProperty(a, b, { value: c, enumerable: !0, configurable: !0, writable: !0 }) : (a[b] = c), a
  );
}
class MetingJSElement extends HTMLElement {
  connectedCallback() {
    window.APlayer && window.fetch && (this._init(), this._parse());
  }
  disconnectedCallback() {
    this.lock || this.aplayer.destroy();
  }
  _camelize(a) {
    return a
      .replace(/^[_.\- ]+/, "")
      .toLowerCase()
      .replace(/[_.\- ]+(\w|$)/g, (a, b) => b.toUpperCase());
  }
  _init() {
    let a = {};
    for (let b = 0; b < this.attributes.length; b += 1)
      a[this._camelize(this.attributes[b].name)] = this.attributes[b].value;
    let b = [
      "server",
      "type",
      "id",
      "api",
      "auth",
      "auto",
      "lock",
      "name",
      "title",
      "artist",
      "author",
      "url",
      "cover",
      "pic",
      "lyric",
      "lrc",
    ];
    this.meta = {};
    for (var c = 0; c < b.length; c++) {
      let d = b[c];
      (this.meta[d] = a[d]), delete a[d];
    }
    (this.config = a),
      (this.api =
        this.meta.api ||
        window.meting_api ||
        "https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r"),
      this.meta.auto && this._parse_link();
  }
  _parse_link() {
    let a = [
      ["music.163.com.*song.*id=(\\d+)", "netease", "song"],
      ["music.163.com.*album.*id=(\\d+)", "netease", "album"],
      ["music.163.com.*artist.*id=(\\d+)", "netease", "artist"],
      ["music.163.com.*playlist.*id=(\\d+)", "netease", "playlist"],
      ["music.163.com.*discover/toplist.*id=(\\d+)", "netease", "playlist"],
      ["y.qq.com.*song/(\\w+).html", "tencent", "song"],
      ["y.qq.com.*album/(\\w+).html", "tencent", "album"],
      ["y.qq.com.*singer/(\\w+).html", "tencent", "artist"],
      ["y.qq.com.*playsquare/(\\w+).html", "tencent", "playlist"],
      ["y.qq.com.*playlist/(\\w+).html", "tencent", "playlist"],
      ["xiami.com.*song/(\\w+)", "xiami", "song"],
      ["xiami.com.*album/(\\w+)", "xiami", "album"],
      ["xiami.com.*artist/(\\w+)", "xiami", "artist"],
      ["xiami.com.*collect/(\\w+)", "xiami", "playlist"],
    ];
    for (var b = 0; b < a.length; b++) {
      let c = a[b],
        d = new RegExp(c[0]),
        e = d.exec(this.meta.auto);
      if (null !== e) return (this.meta.server = c[1]), (this.meta.type = c[2]), void (this.meta.id = e[1]);
    }
  }
  _parse() {
    if (this.meta.url) {
      let a = {
        name: this.meta.name || this.meta.title || "Audio name",
        artist: this.meta.artist || this.meta.author || "Audio artist",
        url: this.meta.url,
        cover: this.meta.cover || this.meta.pic,
        lrc: this.meta.lrc || this.meta.lyric || "",
        type: this.meta.type || "auto",
      };
      return (
        a.lrc || (this.meta.lrcType = 0),
        this.innerText && ((a.lrc = this.innerText), (this.meta.lrcType = 2)),
        void this._loadPlayer([a])
      );
    }
    let a = this.api
      .replace(":server", this.meta.server)
      .replace(":type", this.meta.type)
      .replace(":id", this.meta.id)
      .replace(":auth", this.meta.auth)
      .replace(":r", Math.random());
    fetch(a)
      .then(a => a.json())
      .then(a => this._loadPlayer(a));
  }
  _loadPlayer(a) {
    let b = { audio: a, mutex: !0, lrcType: this.meta.lrcType || 3, storageName: "metingjs" };
    if (a.length) {
      let a = _objectSpread({}, b, this.config);
      for (let b in a) ("true" === a[b] || "false" === a[b]) && (a[b] = "true" === a[b]);
      let c = document.createElement("div");
      (a.container = c), this.appendChild(c), (this.aplayer = new APlayer(a));
    }
  }
}
console.log(
  "\n %c MetingJS v2.0.1 %c https://github.com/metowolf/MetingJS \n",
  "color: #fadfa3; background: #030307; padding:5px 0;",
  "background: #fadfa3; padding:5px 0;"
),
  window.customElements &&
    !window.customElements.get("meting-js") &&
    ((window.MetingJSElement = MetingJSElement), window.customElements.define("meting-js", MetingJSElement));

修改配置文件_config.yml的配置：

1
2
3

aplayer:
  meting: true
  asset_inject: false

开启主题的 aplayerInject，修改主题配置文件_config.butterfly.yml的配置

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true

# Pjax
pjax:
 enable: ture
 exclude:

在主题配置文件_config.butterfly.yml的bottom引入播放器

inject:
  head:
  bottom:
    # 底盘吸附音乐播放器(胶囊)
    - <script async data-pjax src="/static/music/js/capsule-player.js"></script>
    - <script async src="/static/music/js/capsule-player-conf.js"></script>

新建播放器pug

新建 themes/butterfly/layout/includes/capsule-player.pug

1
2
3

#nav-music
  #nav-music-hoverTips(onclick='playerItem.musicToggle()') 播放音乐
  meting-js#8152976493(server="netease" type="playlist" mutex="true" preload="none" theme="var(--capsule-player-main)" data-lrctype="0" order="random")

layout.pug引入播放器pug
在 themes/butterfly/layout/includes/layout.pug 底部中引入capsule-player.pug
1
+ include ./capsule-player.pug

新建aplayer.css

新建 themes/butterfly/source/css/_custom/aplayer/aplayer.css

/* 音乐播放器 */
.aplayer.aplayer-narrow .aplayer-body,
.aplayer.aplayer-narrow .aplayer-pic {
  height: 66px;
  width: 66px;
}

#page:has(.aplayer):has(.aplayer-body):has(.aplayer-list) #post-comment .tk-comments-container > .tk-comment {
  border: none;
  box-shadow: none;
}

/* 导航栏音乐 */
@media screen and (max-width: 1300px) {
  #nav-music {
    display: none !important;
  }
}

#nav-music {
  display: flex;
  align-items: center;
  z-index: 9;
  position: fixed;
  bottom: 20px;
  left: 20px;
  cursor: pointer;
  transition: 0.5s;
  transform-origin: left bottom;
  box-shadow: var(--capsule-player-shadow-border);
  border-radius: 40px;
  overflow: hidden;
}

#nav-music:active {
  transform: scale(0.97);
}

#nav-music.playing {
  box-shadow: 0 0px 12px -3px var(--capsule-player-none);
  animation: playingShadow 5s linear infinite;
}

@keyframes playingShadow {
  0% {
    box-shadow: 0 0px 12px -3px var(--capsule-player-none);
  }

  50% {
    box-shadow: 0 0px 12px 0px var(--capsule-player-main);
  }

  100% {
    box-shadow: 0 0px 12px -3px var(--capsule-player-none);
  }
}

#nav-music .aplayer.aplayer-withlrc .aplayer-pic {
  height: 25px;
  width: 25px;
  border-radius: 40px;
  z-index: 1;
  transition: 0.3s;
  transform: rotate(0deg) scale(1);
  border: var(--style-border-always);
  animation: changeright 24s linear infinite;
  animation-play-state: paused;
}

#nav-music.playing .aplayer.aplayer-withlrc .aplayer-pic {
  box-shadow: 0 0 14px #ffffffa6;
  transform: rotate(0deg) scale(1.1);
  border-color: var(--capsule-player-white);
  animation-play-state: running;
}

@keyframes changeright {
  0% {
    transform: rotate(0deg) scale(1.1);
    box-shadow: 0 0 2px #ffffff00;
  }

  25% {
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 14px #ffffff;
  }

  50% {
    transform: rotate(180deg) scale(1.1);
    box-shadow: 0 0 2px #ffffff00;
  }

  75% {
    transform: rotate(270deg) scale(1.1);
    box-shadow: 0 0 14px #ffffff;
  }

  100% {
    transform: rotate(360deg) scale(1.1);
    box-shadow: 0 0 2px #ffffff00;
  }
}

#nav-music .aplayer.aplayer-withlrc .aplayer-info {
  height: 100%;
  color: var(--capsule-player-fontcolor);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

#nav-music.playing .aplayer.aplayer-withlrc .aplayer-info {
  color: var(--capsule-player-white);
}

#nav-music.playing #nav-music-hoverTips {
  width: 0;
  opacity: 0;
}
#nav-music #nav-music-hoverTips {
  color: var(--capsule-player-white);
  background: var(--capsule-player-main);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 40px;
  opacity: 0;
  font-size: 12px;
  z-index: 2;
  transition: 0.3s;
}

#nav-music:hover:not(.playing) #nav-music-hoverTips {
  opacity: 1;
}

#nav-music
  .aplayer
  .aplayer-info
  .aplayer-controller
  .aplayer-bar-wrap:hover
  .aplayer-bar
  .aplayer-played
  .aplayer-thumb {
  display: none;
}

#nav-music .aplayer {
  background: var(--card-bg);
  border-radius: 60px;
  height: 41px;
  display: flex;
  margin: 0;
  transition: 0.3s;
  border: var(--style-border);
  box-shadow: none;
}

#nav-music.playing .aplayer {
  background: var(--capsule-player-main-op-deep);
  border: var(--style-border-hover);
  backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: blur(20px);
}

#nav-music .aplayer .aplayer-notice {
  display: none;
}

#nav-music .aplayer .aplayer-miniswitcher {
  display: none;
}

#nav-music .aplayer .aplayer-body {
  position: relative;
  display: flex;
  align-items: center;
}

#nav-music .aplayer-list {
  display: none;
}

#nav-music .aplayer .aplayer-info .aplayer-music {
  margin: 0;
  display: flex;
  align-items: center;
  padding: 0 12px 0 8px;
  cursor: pointer;
  z-index: 1;
  height: 100%;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-time {
  display: none;
}

#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-author {
  display: none;
}

#nav-music .aplayer.aplayer-withlist .aplayer-info {
  border: none;
}

#nav-music .aplayer .aplayer-pic .aplayer-button {
  bottom: 50%;
  right: 50%;
  transform: translate(50%, 50%);
  margin: 0;
  transition: 0.3s;
}
#nav-music .aplayer .aplayer-pic:has(.aplayer-button.aplayer-play) {
  animation-play-state: paused;
  transform: rotate(0deg) scale(1) !important;
}
#nav-music .aplayer.aplayer-withlrc .aplayer-pic {
  margin-left: 8px;
}
#nav-music .aplayer .aplayer-info .aplayer-music .aplayer-title {
  cursor: pointer;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.3s;
  user-select: none;
}

#nav-music .aplayer .aplayer-info .aplayer-controller {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
  margin: 0;
  padding: 0;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
  height: 100%;
  background: none;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
  display: none;
}

#nav-music .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
  height: 100%;
  opacity: 0.1;
  background-color: var(--capsule-player-white) !important;
  animation: lightBar 5s ease infinite;
  animation-play-state: paused;
}

#nav-music.playing .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
  animation-play-state: running;
}

@keyframes lightBar {
  0% {
    opacity: 0.1;
  }

  60% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.1;
  }
}

/* 歌词 */
#nav-music .aplayer.aplayer-withlrc .aplayer-lrc {
  width: 0;
  opacity: 0;
  transition: 0.3s;
  margin-top: -2px;
  padding: 5px 0;
}
#nav-music.stretch .aplayer.aplayer-withlrc .aplayer-lrc {
  margin-left: 8px;
}
#nav-music.stretch .aplayer.aplayer-withlrc .aplayer-lrc {
  width: 200px;
  margin-bottom: 0;
  opacity: 1;
}

#nav-music .aplayer .aplayer-lrc p.aplayer-lrc-current {
  color: var(--capsule-player-white);
  border: none;
}

#nav-music .aplayer .aplayer-lrc:after,
#nav-music .aplayer .aplayer-lrc:before {
  display: none;
}

#nav-music .aplayer .aplayer-lrc p {
  color: #ffffffb3;
}

#nav-music .aplayer .aplayer-pic {
  pointer-events: none;
}
#nav-music .aplayer .aplayer-pic .aplayer-button {
  pointer-events: all;
}


/* 个人喜欢的变量 START */
/* 颜色 */
:root {
    --capsule-player-theme-op: #4259ef23;
    --capsule-player-card-bg-none: rgba(255, 255, 255, 0);
    --capsule-player-main-op-deep: var(--capsule-player-theme-op-deep) !important;
    --capsule-player-gray-op: #9999992b;
    --capsule-player-theme-top: var(--capsule-player-theme);
    --capsule-player-white: #fff;
    --capsule-player-white-op: rgba(255, 255, 255, 0.2);
    --capsule-player-black: #000;
    --capsule-player-black-op: rgba(0, 0, 0, 0.2);
    --capsule-player-none: rgba(0, 0, 0, 0);
    --capsule-player-gray: #999999;
    --capsule-player-yellow: #ffc93e;
    --capsule-player-orange: #e38100;
    --capsule-player-border-radius: 8px;
    --capsule-player-main: var(--capsule-player-theme);
    --capsule-player-main-op: var(--capsule-player-theme-op);
    --capsule-player-shadow-theme: 0 8px 12px -3px var(--capsule-player-theme-op);
    --capsule-player-shadow-main: 0 8px 12px -3px var(--capsule-player-main-op);
    --capsule-player-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, 0.2);
    --capsule-player-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, 0.2);
    --capsule-player-shadow-black: 0 0 12px 4px rgba(0, 0, 0, 0.05);
    --capsule-player-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, 0.12);
    --capsule-player-shadow-red: 0 8px 12px -3px #ee7d7936;
    --capsule-player-shadow-green: 0 8px 12px -3px #87ee7936;
    --capsule-player-shadow-border: 0 8px 16px -4px #2c2d300c;
    --capsule-player-shadow-blackdeep: 0 2px 16px -3px rgba(0, 0, 0, 0.15);
    --capsule-player-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
    --style-border: 1px solid var(--capsule-player-card-border);
    --capsule-player-blue-main: #3b70fc;
    --style-border-hover: 1px solid var(--capsule-player-main);
    --style-border-dashed: 1px dashed var(--capsule-player-theme-op);
    --style-border-avatar: 4px solid var(--capsule-player-background);
    --style-border-always: 1px solid var(--capsule-player-card-border);
    --style-border-none: 1px solid transparent;
    --capsule-player-white-acrylic1: #fefeff !important;
    --capsule-player-white-acrylic2: #fcfdff !important;
    --capsule-player-black-acrylic2: #08080a !important;
    --capsule-player-black-acrylic1: #0b0b0e !important;
    --capsule-player-main-none: #b8b8b800 !important;
  }
  
  [data-theme="light"] {
    --capsule-player-theme-op-deep: #4259efdd;
    --global-bg: #f7f9fe;
    --capsule-player-theme: #3b70fc;
    --capsule-player-theme-deep: #1856fb;
    --capsule-player-theme-op: #4259ef23;
    --capsule-player-blue: #3b70fc;
    --capsule-player-red: #d8213c;
    --capsule-player-pink: #ff7c7c;
    --capsule-player-green: #57bd6a;
    --capsule-player-fontcolor: #363636;
    --capsule-player-background: #f7f9fe;
    --capsule-player-reverse: #000;
    --capsule-player-maskbg: rgba(255, 255, 255, 0.6);
    --capsule-player-maskbgdeep: rgba(255, 255, 255, 0.85);
    --capsule-player-hovertext: var(--capsule-player-theme);
    --capsule-player-ahoverbg: #f7f7fa;
    --capsule-player-lighttext: var(--capsule-player-main);
    --capsule-player-secondtext: rgba(60, 60, 67, 0.6);
    --capsule-player-scrollbar: rgba(60, 60, 67, 0.4);
    --capsule-player-card-btn-bg: #edf0f7;
    --capsule-player-post-blockquote-bg: #fafcff;
    --capsule-player-post-tabs-bg: #f2f5f8;
    --capsule-player-secondbg: #f1f3f8;
    --capsule-player-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.05);
    --capsule-player-card-bg: #fff;
    --capsule-player-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --capsule-player-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --capsule-player-card-border: #e3e8f7;
  }
  
  [data-theme="dark"] {
    --capsule-player-theme-op-deep: #0084ffdd;
    --global-bg: #18171d;
    --capsule-player-theme: #0084ff;
    --capsule-player-theme-deep: #0076e5;
    --capsule-player-theme-op: #0084ff23;
    --capsule-player-blue: #0084ff;
    --capsule-player-red: #ff3842;
    --capsule-player-pink: #ff7c7c;
    --capsule-player-green: #57bd6a;
    --capsule-player-fontcolor: #f7f7fa;
    --capsule-player-background: #18171d;
    --capsule-player-reverse: #fff;
    --capsule-player-maskbg: rgba(0, 0, 0, 0.6);
    --capsule-player-maskbgdeep: rgba(0, 0, 0, 0.85);
    --capsule-player-hovertext: #0a84ff;
    --capsule-player-ahoverbg: #fff;
    --capsule-player-lighttext: #f2b94b;
    --capsule-player-secondtext: #a1a2b8;
    --capsule-player-scrollbar: rgba(200, 200, 223, 0.4);
    --capsule-player-card-btn-bg: #30343f;
    --capsule-player-post-blockquote-bg: #000;
    --capsule-player-post-tabs-bg: #121212;
    --capsule-player-secondbg: #30343f;
    --capsule-player-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
    --capsule-player-card-bg: #1d1b26;
    --capsule-player-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --capsule-player-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0);
    --capsule-player-card-border: #42444a;
  }
/* 个人喜欢的变量 END */

新建capsule-player-conf.js
capsule-player-conf.js 为任意一个未添加data-pjax属性的js即可，目的是防止变量在pjax重载时被恢复到初始值。
1
2
var capsule_player_musicPlaying = false;
var capsule_player_musicFirst = false;

新建capsule-player.js

capsule-player.js 内容如下, 感谢李文若发现的右键 bug, 已修复

var navMusicEl = document.getElementById("nav-music");
var playerItem = {
  //切换音乐播放状态
  musicToggle: function (changePaly = true) {
    if (!capsule_player_musicFirst) {
      musicBindEvent();
      capsule_player_musicFirst = true;
    }
    let msgPlay = '<i class="fa-solid fa-play"></i><span>播放音乐</span>'; // 此處可以更改為你想要顯示的文字
    let msgPause = '<i class="fa-solid fa-pause"></i><span>暂停音乐</span>'; // 同上，但兩處均不建議更改
    if (capsule_player_musicPlaying) {
      navMusicEl.classList.remove("playing");
      // 修改右键菜单文案为播放
      // document.getElementById("menu-music-toggle").innerHTML = msgPlay;
      document.getElementById("nav-music-hoverTips").innerHTML = "音乐已暂停";
      // document.querySelector("#consoleMusic").classList.remove("on");
      capsule_player_musicPlaying = false;
      navMusicEl.classList.remove("stretch");
    } else {
      navMusicEl.classList.add("playing");
      // 修改右键菜单文案为暂停
      // document.getElementById("menu-music-toggle").innerHTML = msgPause;
      // document.querySelector("#consoleMusic").classList.add("on");
      capsule_player_musicPlaying = true;
      navMusicEl.classList.add("stretch");
    }
    if (changePaly) document.querySelector("#nav-music meting-js").aplayer.toggle();
  },
  // 音乐胶囊伸缩
  musicTelescopic: function () {
    if (navMusicEl.classList.contains("stretch")) {
      navMusicEl.classList.remove("stretch");
    } else {
      navMusicEl.classList.add("stretch");
    }
  },
  // 音乐胶囊展开
  musicDiastole: function () {
    navMusicEl.classList.remove("stretch");
  },
  // 音乐胶囊缩放
  musicSystolic: function () {
    navMusicEl.classList.remove("stretch");
  },
  //音乐上一曲
  musicSkipBack: function () {
    // document.querySelector("#nav-music meting-js").aplayer.skipBack();
    console.log(document.querySelector("meting-js"))
    document.querySelector("meting-js").aplayer.skipBack();
  },

  //音乐下一曲
  musicSkipForward: function () {
    // document.querySelector("#nav-music meting-js").aplayer.skipForward();
    document.querySelector("meting-js").aplayer.skipForward();
  },

  //获取音乐中的名称
  musicGetName: function () {
    var x = $(".aplayer-title");
    var arr = [];
    for (var i = x.length - 1; i >= 0; i--) {
      arr[i] = x[i].innerText;
    }
    return arr[0];
  },
};

// 音乐绑定事件
function musicBindEvent() {
  document.querySelector("#nav-music .aplayer-music").addEventListener("click", function () {
    playerItem.musicTelescopic();
  });
  document.querySelector("#nav-music .aplayer-button").addEventListener("click", function () {
    playerItem.musicToggle(false);
  });
}

// 如果有右键事件 可以在这里写。
// addRightMenuClickEvent();

进阶

如果有魔改右键菜单的同学, 可以尝试加入以下方法来判断是否点击的为音乐以控制右键可以下一曲, 上一曲, 暂停音乐

const metingJs = document.querySelector("#nav-music meting-js");
//判断是否是音乐
if (metingJs.contains(event.target)) {
} else { }

做完以后大致的逻辑就是第一次只能点播放, 点完第一次的播放后, 右键可以控制上一曲和下一曲, 然后点击名称可以缩回去, 歌词部分胶囊控制进度，但是目前有个 bug 就是因为 aplayer 给控制条绑定的事件是鼠标抬起事件, 导致点击也可以切换进度, 但这不是我所期望的, 如果可以做成歌词部分点击不触发, 仅拖拽触发就好了 QWQ。

在hexo-blog-demo/node_modules/hexo-theme-butterfly/layout/includes/header/index.pug加入下面右键按钮

.rightMenu-group.rightMenu-line.rightMenuOther
.rightMenu-group.rightMenu-small
    //- 切换上一首
    .rightMenu-item#menu-music-back
        i.fa.fa-fast-backward
    //- 播放
    .rightMenu-item#menu-music-play
        i.fa.fa-power-off
    //- 切换下一首
    .rightMenu-item#menu-music-forward
        i.fa.fa-fast-forward
    //- 复制歌名
    .rightMenu-item#menu-music-copyMusicName
        i.fa.fa-copy

在 themes/butterfly/source/js/righttMenu.js添加触发JavaScript

/**
 * 音乐胶囊 #nav-music meting-js
 */
$("#menu-music-back").on("click", function () { //上一首
    playerItem.musicSkipBack()
    removeRightMenu();
});
$("#menu-music-forward").on("click", function () { //下一首
    playerItem.musicSkipForward()
    removeRightMenu();
});
$("#menu-music-play").on("click", function () { //播放&暂停
    playerItem.musicTelescopic()
    playerItem.musicToggle()
    playerItem.musicSystolic()
    removeRightMenu();
});
$("#menu-music-copyMusicName").on("click", function () { //复制名称
    var musicName = playerItem.musicGetName()
    if (navigator.clipboard) {
        navigator.clipboard.writeText(musicName);
    }
    removeRightMenu();
    btf.snackbarShow("复制歌曲名称成功");
});

dplayer本地音乐播放器

dplayer本地音乐播放器 Github
DPlayer文档
 弹幕环境安装

安装依赖

1	npm install hexo-tag-dplayer --save

修改配置文件

修改_config.yml配置文件
修改 Hexo 的站点配置文件 _config.yml ，增加

Yaml
hexo-tag-dplayer:
  cdn:
    - https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js
    - https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css
  default: 
    api: https://api.prprpr.me/dplayer/
    loop: yes
    screenshot: yes
    # 后面还可以接着写其他默认配置

修改存放路径配置(可以忽略)

方案一：同步路径

ps：打开这个可以让你new新的文章时生成同名文件夹。当然如果你要使用别的路径，可以忽略这步

1	post_asset_folder: true

方案二：客制化路径

# on _config.yml of hexo-site
hexo-tag-dplayer:
  js_path: /path/to/your/default/path
  css_path: /sth
  default: #default tag argument 
    id: somedefid # equals to setting id=somedefid in all {%dplayer%} tags
    api: https://api.prprpr.me/dplayer/
    #and other options...

文档

名称	默认值	描述
container	document.querySelector(‘.dplayer’)	播放器容器元素
live	false	开启直播模式, 见#直播
autoplay	false	视频自动播放
theme	‘#b7daff’	主题色
loop	false	视频循环播放
lang	navigator.language.toLowerCase()	可选值: ‘en’, ‘zh-cn’, ‘zh-tw’
screenshot	false	开启截图，如果开启，视频和视频封面需要允许跨域
hotkey	true	开启热键，支持快进、快退、音量控制、播放暂停
airplay	false	在 Safari 中开启 AirPlay
chromecast	false	启用 Chromecast
preload	‘auto’	视频预加载，可选值: ‘none’, ‘metadata’, ‘auto’
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
playbackSpeed	[0.5, 0.75, 1, 1.25, 1.5, 2]	可选的播放速率，可以设置成自定义的数组
logo	-	在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置
apiBackend	-	自定义获取和发送弹幕行为，见#直播
preventClickToggle	false	阻止点击播放器时候自动切换播放/暂停
video	-	视频信息
video.quality	-	见#清晰度切换
video.defaultQuality	-	见#清晰度切换
video.url	-	视频链接
video.pic	-	视频封面
video.thumbnails	-	视频缩略图，可以使用 DPlayer-thumbnails (opens new window)生成
video.type	‘auto’	可选值: ‘auto’, ‘hls’, ‘flv’, ‘dash’, ‘webtorrent’, ‘normal’ 或其他自定义类型, 见#MSE 支持
video.customType	-	自定义类型, 见#MSE 支持
subtitle	-	外挂字幕
subtitle.url	required	字幕链接
subtitle.type	‘webvtt’	字幕类型，可选值: ‘webvtt’, ‘ass’，目前只支持 webvtt
subtitle.fontSize	‘20px’	字幕字号
subtitle.bottom	‘40px’	字幕距离播放器底部的距离，取值形如: ‘10px’ ‘10%’
subtitle.color	‘#fff’	字幕颜色
danmaku	-	显示弹幕
danmaku.id	required	弹幕池 id，必须唯一
danmaku.api	required	见#弹幕接口
danmaku.token	-	弹幕后端验证 token
danmaku.maximum	-	弹幕最大数量
danmaku.addition	-	额外外挂弹幕，见#bilibili 弹幕
danmaku.user	‘DIYgod’	弹幕用户名
danmaku.bottom	-	弹幕距离播放器底部的距离，防止遮挡字幕，取值形如: ‘10px’ ‘10%’
danmaku.unlimited	false	海量弹幕模式，即使重叠也展示全部弹幕，请注意播放器会记忆用户设置，用户手动设置后即失效
danmaku.speedRate	1	弹幕速度倍率，越大速度越快
contextmenu	[]	自定义右键菜单
highlight	[]	自定义进度条提示点
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器

存放音视频文件

把视频文件放到同名文件夹里，然后在文章插入以下语句

{% dplayer "url=视频地址" %}

{% dplayer "url=1.mp4"  "pic=1.png" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

{% dplayer "url=https://xxxx.1.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=https://api.prprpr.me/dplayer/" "pic=https://xxx.hikarunara.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}

{% dplayer 'url=1.mp4' "id=someid" "api=https://api.prprpr.me/dplayer/" "addition=/some.json" 'code=player.on("loadstart",function(){console.log("loadstart")})' "autoplay" %}

弹幕：安装弹幕

如果有弹幕需求，可以进入安装弹幕服务器步骤