LifeBlog

在搭建博客的过程中，当前主题内置了 APlayer 与 MetingJS 作为音乐播放器解决方案。

实际使用时，播放器无法正常加载音乐资源，浏览器控制台中可观察到以下异常现象：

  • MetingJS 请求上游 API 失败
  • APlayer 音频资源请求状态码为 500
  • 播放列表无法加载，播放器停留在初始化状态

alt text

初步排查思路

由于错误表现为 API 请求异常，最初判断问题可能出现在以下几个方向：

  • Hexo 或主题版本兼容性问题
  • Meting API 服务不稳定或不可用
  • 本地或服务器网络环境异常
  • 配置项填写错误

基于以上判断，先后进行了多项尝试。

排查过程记录

  • 重新部署博客并清理缓存，问题依旧存在
  • 升级 Hexo 及相关依赖版本，未出现行为变化
  • 更换多个公开 Meting API 地址，返回结果一致
  • 排除本地网络及服务器访问限制问题

上述尝试均未解决播放器 500 错误的问题，说明问题并非出现在构建流程或 API 服务可用性层面。

实际配置情况

当时使用的播放器相关配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
player:
  disable_on_mobile: false
  position: before_sidebar
  aplayer:
    enable: true
    options:
      order: random
  meting:
    enable: true
    meting_api: https://api.injahow.cn/meting/?server=:server&type=:type&id=:id&auth=:auth&r=:r
    options:
      id: #歌单的id
      server: netease
      type: playlist

配置项本身不存在明显错误，播放器也能够正常初始化。

问题根因

最终确认问题并非来自播放器配置或 API 服务，而是 网易云音乐歌单权限设置。

当前使用的歌单为 私密歌单，在未授权的情况下，MetingJS 无法通过 API 获取歌单内容，最终导致：

  • API 返回异常数据
  • APlayer 请求音频资源失败
  • 播放器表现为 500 错误

将歌单调整为公开后，播放器功能恢复正常。

结论

当使用 MetingJS 加载网易云音乐歌单时，即使 API 地址与播放器配置均正确，私密歌单仍会导致播放器加载失败。

在遇到类似 500 或 API 异常问题时，除检查配置与服务可用性外，应优先确认音乐资源本身的访问权限。

后续问题

线上环境自动播放被拦截

在本地静态页面环境下测试时，音乐播放器可以正常自动播放，未出现异常。

但在将博客部署至服务器并通过浏览器实际访问后，发现播放器的自动播放行为被拦截。浏览器控制台中可看到与自动播放策略相关的提示信息。

经过排查，该问题并非播放器或配置错误，而是由 浏览器自动播放策略（Autoplay Policy） 导致。

现代浏览器默认禁止在用户首次与页面产生交互之前，由脚本主动触发音频或视频播放行为。
由于 APlayer 在页面加载阶段即尝试调用 play()，在线上真实访问场景下会被浏览器直接拦截。

处理结论

该问题属于浏览器层面的安全与体验限制，无法通过服务器或播放器配置强制绕过。

实际使用中，应避免默认开启自动播放，或改为在用户明确交互（如点击页面或播放器）后再触发播放行为。

说些什么吧！

waline