专栏首页惶心 - 技术博客添加全站 APlayer 播放器
原创

添加全站 APlayer 播放器

之前 @狗子 在群里秀他的 Aplayer,还 post 了博文。然后我一看,哇!这就是我想要的!

他所展示的,是一个固定在网页左下角的 APlayer 播放器,并且配上了自己写的 API 进行歌曲解析,可以说是非常厉害了。

萌新瑟瑟发抖.jpg

之前一度以为固定在左下角的样式是他自己写的(顿时觉得大佬就是很厉害),然后就要求了几次他开发个插件而不是单单集成在他的主题里面,后来他喊我去读 APlayer 的文档,才发现 Aplayer 自带 fixed mode,也就是我刚刚说的固定左下角的样式(吸底模式)。

Aplayer Fixed Mode 效果

APlayer 的官方文档是这么写的

Aplayer 的官方文档关于吸底模式的描述

然而我 看!不!懂!啊!

折腾了好久都不知道怎么弄啊!

调用都不成功啊!

然后我在 GitHub 找了个 APlayer Demo,确实是成功了。但是我想要实现的是:自动抓取我的网易云 “我喜欢的音乐” 列表,并且播放第一首歌(最新一首我喜欢的歌)。但是 Meting API 又不是太清楚怎么调用……

后来想起来,博客在使用 Memory 主题的时候,曾经在侧边栏放过基于 MetingJS 的 APlayer 播放器,四行代码即可调用:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
<div class="aplayer" data-id="534542404" data-server="netease" data-type="song"></div>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>

后来发现,MetingJS 已经支持 Aplayer 1.10.x,已经支持吸底模式了!

所以,稍微改动下代码,就成功了!

这里的外部调用链接没有包含版本号,默认加载最新 release 版本;正常来说不会出什么问题,但是如果需要 100% 稳定运行,建议自行加上版本号。

    <!-- MetingJS start -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <div class="aplayer" data-id="2305794885" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"
        data-volume="1.0"></div>
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/meting/dist/Meting.min.js"></script>
    <!-- MetingJS end -->

因为这是纯 HTML 代码,所以可以在任何网站程序(甚至单页 HTML)里面使用。Wordpress 在 footer.php 加入以上代码即可。

提供两个 Demo 以供参考,同时包含了感谢信息:

https://hx.getrbq.com/aplayer.html (GitHub Pages)

https://hx.js.org/statics/aplayer.html (Cloudflare CDN)

目前,全站 APlayer 已经在博客可用:

全站 APlayer 已经在博客可用

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Grouper.html: 分享群组的最佳方式

    之前看到 狗子 的 https://getrbq.com ,是给 DIYgod 的群组做的一个加群页面,发现他是用 折影轻梦 的模板修改了一下做好的。虽然说这个...

    惶心
  • WebMaster 123 - 如何简单地搭建 Hexo 博客

    因为惶心的 Wordpress 博客数据库崩掉了,但是有有些东西实在很想写下来,于是就搭建了个临时博客。然而不能重蹈覆辙,所以就选择了不依赖数据库,文章全部以 ...

    惶心
  • 【Premium 文章】远行 要开心

    从今天开始,博客将会不定期发布完全原创的文章,与博客其余大部分文章不同,这些文章属于惶心的个人文学创作,不属于技术类教程。想了半天,这类文章以后就叫【Premi...

    惶心
  • 20个可靠的免费的数据源送给你了!

    Julie Joyce发文列出了 20 种被广泛认可的免费数据源,其中信息涵盖天文地理、政法医经等,比较全面。不过数据源中的大部分数据集都采集的美国信息,也有少...

    我被狗咬了
  • 20 个安全可靠的免费数据源,各领域数据任你挑

    我们都喜欢免费的东西,对吧?实际上,虽然网络上充斥着各种免费信息,但这些信息有时是错误或具有误导性的。但以下这 20 个是被广泛认为相当可信的免费数据源。

    崔庆才
  • Catboost:超越Lightgbm和XGBoost的又一个boost算法神器

    今天介绍一个超级简单并且又极其实用的boosting算法包Catboost,据开发者所说这一boosting算法是超越Lightgbm和XGBoost的又一个神...

    机器学习AI算法工程
  • 魏艾斯博客重装 CentOS 系统和添加 Let’s Encrypt 免费 SSL 证书过程全记录

    常来魏艾斯博客的朋友都知道,老魏一直用的 http 协议,也有想法把 https 提到议程上来,总也不得时间。最近终于得了空赶紧规划一下,借机会把云服务器也重新...

    魏艾斯博客www.vpsss.net
  • 20个安全可靠的免费数据源,各领域数据任你挑

    本文作者列出了 20 种被广泛认可的免费数据源,其中信息涵盖天文地理、政法医经等,可以说是很全面了。不过数据源中的大部分数据集都采集的美国信息,也有少部分是关于...

    Spark学习技巧
  • 【译】如何真正学习数据科学

    对于数据科学领域来说,现在是一个令人振奋的时期。它是新兴的研究领域,但是却在飞速的发展。如今数据科学领域需要大量的数据科学家,而他们在硅谷年人均收入则超过10万...

    小莹莹
  • 20个安全可靠的免费数据源,各领域数据任你挑

    我们都喜欢免费的东西,对吧?实际上,虽然网络上充斥着各种免费信息,但这些信息有时是错误或具有误导性的。但以下这 20 个是被广泛认为相当可信的免费数据源。

    昱良

扫码关注云+社区

领取腾讯云代金券