添加全站 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 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

微信小程序从零开始开发步骤(四)自定义分享的功能

1624
来自专栏杨逸轩 ' sBlog

常见的个人博客系统

3616
来自专栏python+iOS学习交流

7年iOS架构师教你如何快速提高并掌握 iOS开发核心技能

首先你要花点时间针对objective-c语言的学习;毕竟这个是iOS开发的基础(你也可以尝试用Swift,但此项目只是针对OC),编程套路其实都是差不多,多写...

1581
来自专栏Thinks

你的第一个渐进式网站应用(4)

任何项目都可以以多种方式开始,我们通常建议使用Web Starter Kit。但是,在这个案例中,为了让我们的项目尽可能简单,并专注于渐进式网站应用,我们为您提...

661
来自专栏极客编程

Angular 5 快速入门与提高

尽管被称为Angular5,实际上它只是这个诞生于2012年的前端框架的的第四个版本:

1712
来自专栏腾讯IVWEB团队的专栏

使用HeadlessChrome做单页应用SEO

随着react、vue、angular等前端框架的流行越来越多的web应用变成了单页应用,它们的特点是异步拉取数据在浏览器中渲染出HTML。

1410
来自专栏phodal

React Native 持续部署实践— push 代码构建出新版的 Growth

最近我们正在使用 React Native 来重写 Growth 应用,GitHub 地址:growth-ng 。作为一个『咨询师』,我要再一次地切换技术栈,从...

2485
来自专栏企鹅号快讯

8.实战篇_关于前端路由

写在前面的话:有的读者提意见“文字太多,图片太少,不活泼可爱”,我已经尽力了。 1.一张图理解“页面路由” 这就是页面路由,很古老的J2EE开发,一般一个页面路...

2337
来自专栏Android自学

解决 WordPress 后台加载非常缓慢/打不开问题

1263
来自专栏Bug生活2048

利用云开发优化博客小程序(二)——评论功能

这次迭代主要是完善了评论功能「不知道审核能不能过」,一开始觉得很快能搞定,然而真正开发的时候还是碰到很多问题,这篇文章既是回顾总结,也是记录下自己在开发过程中遇...

3113

扫码关注云+社区