我的博客全站播放器的设置方法
本文发布于 725 天前,其中的信息可能已经有所发展或是发生改变。

近期有多位访客留言询问我的博客左下方的播放器是如何设置的。之前在【API已终止公共使用】网易云音乐API文章中写过示例,但由于API关闭,该文章在首页隐去,于是今天我写一篇文章大概介绍一下基本用法。

我的博客全站播放器的设置方法-随意之光的港湾 · 博客

基础组件

APlayer

一个HTML5音乐播放器,是我的博客播放器的主体部分。

Meting

是一个音乐解析api框架,通过该框架可以自行开发属于自己的国内各大平台音乐解析api。

这并不要求我们自行创建api,我们可以使用包括Meting作者在内提供的公共api进行使用。

MetingJS

该组件是用于连接APlayer与Meting,可以快速创建相应音乐

一个简单的示例

本次设置播放器我们需要在博客中引入上述组件中的几个js、css及一些html代码。如果主题可以通过后台添加html,可以直接在后台设置。也可通过修改footer.php等主题文件设置。

具体引入方式可以根据自己主题选择。

<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>
<meting-js
fixed="true"
server="netease"
type="playlist"
id="5225821464"
order="random"
preload="none">
</meting-js>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

*jsdelivr国内访问异常,请自行更换为其他公共CDN服务,或下载后使用本地服务

这是本站设置的播放器基础代码。其中<meting-js>中参数设置是一个重点,下面我列一个表格说明一下

参数项参数值说明可选值
fixedtrueAPlayer开启吸底模式,即现在左下角这个样子。false,
true
servernetease即播放源平台,这里我选择的是网易云音乐。netease, tencent, kugou, xiami, baidu
typeplaylist音乐类型,这里我选择的是歌单。song, playlist, album, search, artist
id5225821464id,由于我选择是歌单,这里便是歌单id
orderrandom循环模式,这里选择的是随机循环'list', 'random'
preloadnone预加载,我选择的是不预加载'none', 'metadata', 'auto'

server,type取决于我们使用的api。

更多的设置项请前往APlayer[1]、MetingJS[2]文档学习。

切换页面不刷新功能请自行研究pjax等技术

以上便是本次基础设置的内容了,感谢各位的阅读。有什么问题可以在评论区留言,我会尽力进行回复。

注释与参考

  1. ^APlayer 参数(aplayer.js.org)
  2. ^MetingJS option(github.com)
我的博客全站播放器的设置方法(https://blog.suiyil.cn/3152.html)随意之光发布于随意之光博客,其中原创内容均以知识共享署名-非商业性使用-以相同方式共享 4.0 国际许可协议(CC BY-NC-SA 4.0)进行许可,转载与引用请注明出处,详见版权协议与免责声明

评论

  1. lovau
    Windows
     安徽省
    1 年前
    2023-1-23 20:37:48

    大佬大佬,您的aplayer+meting还在生效是咋操作的呀,为啥国内的很多人都失效了

    • 博主
      lovau
      Android
       山东省
      1 年前
      2023-1-24 2:31:33

      我看了一下,因为作者大大的默认api坏了。
      我现在使用的是其他人提供的第三方的api,所以不影响。

  2. Macintosh
     广东省
    2 年前
    2022-8-07 2:38:21

    很棒的工具

  3. 随风
    Windows
     日本
    2 年前
    2022-4-25 17:15:14

    大佬,为什么输入我的歌单id,播放器不显示了,是不是因为歌单里有会员才可以听的歌啊!

    • 博主
      随风
      Android
       山东省
      2 年前
      2022-4-25 17:37:33

      会员歌曲只是不能播放,播放器是能正常显示的。看看参数输对了吗,要是还是不行,留一个网站地址我看看

      • 随风
        随意之光
        Windows
         日本
        2 年前
        2022-4-25 18:29:52

        博主,我试了很多次发现不能加网易云自带的我喜欢的音乐这个歌单id,使用后不显示,别的歌单id都可以。另外我的博客域名正在申请,目前只有IP地址,我听说被别人知道ip地址后网站很容易被攻击,所以不敢公开自己的IP地址。

        • 博主
          随风
          Android
           山东省
          2 年前
          2022-4-25 18:50:49

          刚才测试一下,确实原作者的默认api对默认歌单不返回解析内容。具体原因我也不清楚,先使用其他歌单吧。

本文评论已关闭
上一篇
下一篇