学习
实践
活动
专区
工具
TVP
写文章
专栏首页惶心 - 技术博客添加全站 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 已经在博客可用

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

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

登录 后参与评论
0 条评论

相关文章

  • 网站插入 Aplayer/网易云 音乐播放器

    为了方便操作,直接使用Aplayer插件中的MetingJS (基于Meting API 的 APlayer 衍生播放器) 在 Hexo 配置文件 _confi...

    十玖八柒
  • 文章插入Aplayer播放器报错解决方案

    请在 Hexo 配置文件 _config.yml 中设置即可: (切记是hexo的配置文件,不是themes文件夹里面的)

    用户6808043
  • hexo-tag-aplayer音乐插件使用

    除了使用标签 lrc 选项来设定歌词,你也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中:

    匿名用户的日记
  • typecho插件合集(持续更新)

    typecho以轻量著称,不足500k的安装包却满足了百分之九十以上的博客需求,但是还有很多的不足,不足的地方就只能用插件来弥补了!这里做一个插件合集方便大家查...

    用户7146828
  • WordPress添加音乐播放器(纯代码实现)

    为WordPress网站添加一个音乐播放器,网上大部分的教程都是使用各种插件,有的插件还需要花钱买授权,用着不爽。本文用纯代码为网站添加音乐播放器,安全可靠,可...

    子润先生
  • 网站这样引入一款简洁而功能强大的音乐播放器

    APlayer 是一个简洁漂亮、功能强大的 Html5 音乐播放器 MetingJS 是为 APlayer 添加网易云、QQ音乐、酷狗音乐等支持的插件

    张旭博客
  • 更换音乐盒组件Aplayer+Metingjs

    大头大头下雨不愁
  • 引入Aplayer播放音乐(踩坑向)

    看到大佬们的网页可以播放音乐,不得不说我是有点心动的,所以就在这里放一下教程。写这个的时候我也在一边试着安装,算是先驱者。 有两种方式,一种是安装源文件支持,在...

    Akilar
  • hexo-butterfly-音频视频播放器嵌入

    ​ 实现引入有两种方式,一种是在markdown中用原生的html编写(需开启配置文件中aplayerInject配置),一种则是借助hexo-tag-a...

    hahah
  • 使用vue互联QQ音乐完成网站音乐播放器

    开源地址:https://github.com/DIYgod/APlayer 在线文档:https://aplayer.js.org/#/zh-Hans/

    木字楠
  • 7b2美化-添加网页音乐播放器

    声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。...

    小狐狸
  • hexo-tag-aplayer使用方法

    当开启 Hexo 的 文章资源文件夹 功能时,可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中,然后直接引用:

    用户6808043
  • Aplayer+Metingjs音乐插件的使用

    Aplayer是一个功能强大的HTML5音乐播放器,Metingjs基于Aplayer插件封装好的插件,开箱即用。

    用户7162790
  • 给网站添加ssl证书并实现全站https

    自己在服务器上建了这个小博客,但是一直都是裸站,这正好有空就配置个 ssl 证书,显得更安全也更好看一点。下面显示的是未申请证书的网站。

    SweetHunter
  • 一个播放器和云村的故事

    从疫情确定开始已两月有余了,虽然国内已经好转起来了,但境外输入在不断增加,并且国外疫情日趋严重,受此影响公司现在没什么事做,加上神兽还没复课,每天在家上课,因此...

    楚客追梦
  • Vue中音乐播放器

    小小咸鱼YwY
  • 小白博客 迷你音乐播放器及实现全站pjax无刷新加载

    演示截图: ? 请点击此处输入图片描述 ? 请点击此处输入图片描述 使用教程,下载播放器文件,直接上传压缩包至你的网站根目录,然后解压到根目...

    奶糖味的代言

作者介绍

惶心

惶心博客博主

惶心博客 · 博主 (已认证)

专栏

精选专题

活动推荐

关注

腾讯云开发者公众号
10元无门槛代金券
洞察腾讯核心技术
剖析业界实践案例
腾讯云开发者公众号二维码

扫码关注腾讯云开发者

领取腾讯云代金券