APlayer+Meeting JS播放器设计问题总结

关于APlayer 播放器加载失败 / 不显示：

播放器插入后页面无任何反应；

控制台报错：Uncaught ReferenceError: APlayer is not defined；

或者 DOM 结构加载前执行了初始化代码，导致播放器未挂载成功。
正确引入 CDN：
1
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>

关于播放器美化和基本配置方案以及bug修复（2025.7.20最后修改）

/*播放器*/
.aplayer {
  margin: 5px;
  border-radius: 8px;
  overflow: hidden;
  user-select: none;
  line-height: initial;
  position: relative;
  transition: opacity 0.3s ease;
}

@media (max-width: 767px) {
  .aplayer {
    display: none;
  }
}

.aplayer.hide {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}



.aplayer.aplayer-withlist .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-menu {
  display: inline;
}

.aplayer.aplayer-fixed .aplayer-body {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 0;
  margin: 0;
  z-index: 99;
  padding-right: 18px;
  transition: all 0.3s ease;
  max-width: 400px;
  border-radius: 8px;
}

.aplayer.aplayer-fixed .aplayer-miniswitcher {
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher .aplayer-icon {
  transform: rotateY(0);
}

.aplayer.aplayer-fixed .aplayer-icon-back,
.aplayer.aplayer-fixed .aplayer-icon-play,
.aplayer.aplayer-fixed .aplayer-icon-forward,
.aplayer.aplayer-fixed .aplayer-icon-menu {
  position: absolute;
  bottom: 27px;
  width: 20px;
  height: 20px;
}

.aplayer .aplayer-icon-forward {
  transform: rotate(180deg);
}

.aplayer .aplayer-pic {
  position: relative;
  float: left;
  height: 66px;
  width: 66px;
  background-size: cover;
  background-position: center;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid var(--shadow-color-1);
  border-radius: 8px;
}
.aplayer .aplayer-list-hide {
  display: none !important;
}

.aplayer .aplayer-miniswitcher .aplayer-icon {
  height: 100%;
  width: 100%;
  transform: rotateY(180deg);
  transition: all 0.3s ease;
}

.aplayer:hover .aplayer-miniswitcher {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* 默认封面图宽度为 64px（用于收起状态） */
.aplayer .aplayer-pic,
.aplayer.aplayer-withlrc .aplayer-pic {
  width: 66px !important;
  height: 66px !important;
}
/* =============================此处已经多余，可删，因为下面的更新固定了封面大小和位置=============================== */
/* 展开状态时封面图宽度还原为 66px */
.aplayer:not(.aplayer-narrow) .aplayer-pic,
.aplayer.aplayer-withlrc:not(.aplayer-narrow) .aplayer-pic {
  width: 66px !important;
}
.aplayer .aplayer-miniswitcher {
  transform: translateX(20px);
  border-radius: 8px !important;
  overflow: hidden;
  display: none;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0px;
  height: calc(100% - 2px);
  background: var(--third-background-color-transparent);
  border: 1px solid var(--shadow-color-1);
  width: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.3s ease, border-radius 0.3s ease;
}
/* ============================================================================================= */

.aplayer .aplayer-miniswitcher .aplayer-icon {
  border-radius: 8px !important;
}/* 16px + 10px 空隙 ,解决展开按钮和容器分开*/

.aplayer.aplayer-fixed:not(.aplayer-narrow) .aplayer-body {
  position: fixed; /* 确保定位 */
  left: 26px; /* 16px + 10px 空隙 */
  right: 0;
  margin: 0;
  z-index: 99;
  padding-right: 18px;
  max-width: 400px;
  border-radius: 8px;
  transition: left 0.3s ease;
}

/* 1. 先把整体容器改回正常左边距，避免封面跟着移动 */
.aplayer.aplayer-fixed:not(.aplayer-narrow) .aplayer-body {
  left: 70px !important; /* 让整体容器靠左，封面正常 */
  transition: left 0.3s ease;
}

/* 2. 封面固定大小和位置 */
.aplayer.aplayer-fixed:not(.aplayer-narrow) .aplayer-pic {
  position: absolute; /* 绝对定位 */
  left: -70px; /* 固定位置 */
  width: 66px !important;
  height: 66px !important;
  border-radius: 8px;
  background-color: transparent !important;
  transition: left 0.3s ease;
  z-index: 100; /* 保证盖在后面 */
}

/* 3. 控制框整体右移 */
.aplayer.aplayer-fixed:not(.aplayer-narrow) .aplayer-info {
  margin-left: 6px !important; /* 比原来的76px多20px空隙 */
  transition: margin-left 0.3s ease;
}


/* 收起状态下，播放器的控制容器宽度设置为 180px */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  width: 180px !important;
  min-width: 18px !important;
  max-width: 180px !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
}
/* 关于歌曲列表展开界面*/
.aplayer-fixed:not(.aplayer-narrow) .aplayer-list {
  all: initial !important; /* 重置所有样式，防止 APlayer 内部 JS 干扰 */

  position: absolute !important;
  bottom: 70px !important;
  left:  !important; /* 你想让它往右挪多少就改这里，现在默认不移动左靠页面 */
  width: 490px !important; /* 与容器展开的宽度相同 */
  max-height: 220px !important;
  overflow-y: auto !important;
  background: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
  z-index: 9999 !important;
  padding: 5px 0 !important;
  display: block !important; /* 保证它显示出来 */
  font-family: inherit !important;
  color: inherit !important;
}
 /* 修复歌曲列表收回留有白条边的bug */
.aplayer .aplayer-list.aplayer-list-hide {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition: none !important;
}
/* 2025.8.2新增调整移动端网页适配功能 */
@media (max-width: 767px) {
  .aplayer.aplayer-fixed .aplayer-body {
    position: fixed !important;
    left: 0 !important;
    right: 10px !important;
    max-width: calc(100vw - 10px) !important;
    border-radius: 8px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  /* 收起状态下播放器容器宽度固定，隐藏封面 */
  .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* 收起状态时隐藏封面图 */
  .aplayer.aplayer-fixed.aplayer-narrow .aplayer-pic {
    display: none !important;
  }

  /* 展开状态时恢复封面图 */
  .aplayer.aplayer-fixed:not(.aplayer-narrow) .aplayer-pic {
    position: relative !important;
    float: left !important;
    margin-right: 10px !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 8px !important;
  }

  /* 控制信息区域正常对齐 */
  .aplayer.aplayer-fixed .aplayer-info {
    margin-left: 0 !important;
    overflow: hidden !important;
  }

  /* 展开按钮始终可见，大小统一，贴左边 */
  .aplayer .aplayer-miniswitcher {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 66px !important;
    width: 20px !important;
    background: #f2f2f2 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    z-index: 9999 !important;
    transform: none !important;
    justify-content: center;
    align-items: center;
  }

  .aplayer .aplayer-miniswitcher .aplayer-icon {
    width: 100% !important;
    height: 100% !important;
    font-size: 20px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  /* 歌曲列表缩小并居中 */
  .aplayer-fixed:not(.aplayer-narrow) .aplayer-list {
    width: 90vw !important;
    max-height: 40vh !important;
    left: 5vw !important;
    font-size: 14px !important;
    overflow-y: auto !important;
    border-radius: 8px !important;
    z-index: 9998 !important;
  }
}


 /* 修复鼠标指针被播放器容器图层覆盖的bug（其实是html里面写的z-index太高了） */

#custom-cursor {
  position: fixed;
  pointer-events: none; /* 光标不阻塞鼠标事件 */
  z-index: 1000000 !important; /* 保证比播放器高很多 */

<!-- APlayer 和 MetingJS 所需资源 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
  <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

  <style>
    #aplayer-wrapper {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 9999;
      transition: transform 0.4s ease, opacity 0.4s ease;
    }
  </style>
<!-- 规定歌单来源接口和设置-->
<body>
  <div id="aplayer-wrapper">
    <meting-js
      server="netease"  
      type="playlist"
      id="2791573169"
      fixed="true"
      autoplay="false"
      theme="white"
      loop="all"
      order="random"
      volume="0.8"
      list-folded="true"
      format="mp3"
      crossorigin="anonymous"
    ></meting-js>
  </div>
<!-- 新增页面滑倒顶部播放器隐身，下滑出现的功能-->
  <script>
document.addEventListener('DOMContentLoaded', () => {
  const wrapper = document.getElementById('aplayer-wrapper');
  if (!wrapper) return;

  let lastScrollY = window.scrollY;
  let ticking = false;

  const update = () => {
    const currentScrollY = window.scrollY;

    if (currentScrollY < 100) {
      wrapper.style.opacity = '0';
      wrapper.style.visibility = 'hidden';
    } else if (currentScrollY > lastScrollY) {
      wrapper.style.opacity = '1';
      wrapper.style.visibility = 'visible';
      // 不用 pointer-events: auto;
    }

    lastScrollY = currentScrollY;
    ticking = false;
  };

  window.addEventListener('scroll', () => {
    if (!ticking) {
      window.requestAnimationFrame(update);
      ticking = true;
    }
  });
});
   
  </script>

关于播放器缺失单曲循环，随机列表等功能：

如果是单独引用aplayer播放器，最新版是有这些功能的

但是我这里为了方便歌单添加，用了aplayer+metingjs组合的，直接引用了metingjs的网易云接口，导致样式没有这些功能

关于这个日记站点的播放器：

用到的是hexo+redefine主题自带的aplayer播放器样式,最原始的添加歌单方法：

artist: # audio artist
url: # audio url
cover: # audio cover url
lrc: # audio cover lrc

关于具体的样式文件在\themes\redefine\source\css\layout_modules文件夹里，aplayer.styl,转css比较麻烦