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

相关文章

来自专栏河湾欢儿的专栏

HTML简介

必备条件是什么? 1>会上网,会打字,懂得互联网是什么 2>兴趣 3>肯练习

1052
来自专栏phodal

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

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

2635
来自专栏微信平台开发

【腾讯游戏人生】微信小程序开发总结

目前【腾讯游戏人生】小程序已经发布上线,大家可以扫小程序码进行体验。接下来主要介绍在开发该款小程序过程中的一些思考和积累。

6448
来自专栏Android自学

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

1663
来自专栏知晓程序

「大众点评点餐」小程序开发经验 05:解析开发工具

周中坚,美团点评工程师,4年 Web 前端开发经验,主要负责过会员卡、外卖、预订、商家平台等业务的前端开发,现在是美团点评点餐团队的一员。

1863
来自专栏IMWeb前端团队

使用HeadlessChrome做单页应用SEO

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

3245
来自专栏DeveWork

WordPress 设置与调用 Cookie 的相关代码

在开发Jeff的阳台目前正在使用的主题Geekwork 的时候,需要对向导那段js 代码进行只执行一次的设置,固然想到了利用cookie ,但对于js 层面的c...

2096
来自专栏狂码一生

thinkphp3.2简洁美观的分页样式

风格一 分页模块: <div class="tp_page">     {$pageShow} </div> 分页样式: .tp_page{     width...

3786
来自专栏Bug生活2048

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

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

4193
来自专栏微信小程序开发

零基础入门小程序 &实战经验分享

讲师介绍:连胜老师曾经就职于点心移动 & 百度,折腾小程序也有段时间了,参与开发的“小小签到”小程序,在2017年荣获阿拉丁神灯奖。我公司开发了多个工具类小程序...

59613

扫码关注云+社区

领取腾讯云代金券