悬浮音乐播放器APlayer & MetingJS

流浪 2022-5-7 377 5/7

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

他们的 GitHub 项目地址分别为:
APlayer:https://github.com/DIYgod/APlayer
MetingJS:https://github.com/metowolf/MetingJS

引入

引入很简单,一共需要调用三个文件: APlayer.min.js APlayer.min.css Meting.min.js

你可以使用 CDN 调用,只需要在<head>里面插入:

<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>

在 footer 里面插入:

<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

当然,你可以将这些文件托管在自己的服务器,把上面的调用链接改成自己的就行了,请参考:jsDelivr 为开发者提供免费公共 CDN 加速服务

APlayer 原生用法

代码如下:

<div id="aplayer01"></div>
<script type="text/javascript">
const ap = new APlayer({
container: document.getElementById('aplayer01'),
audio: [{
name: '碧い瞳のエリス',
artist: '安全地帯',
url: 'https://doge.ottoli.cn/安全地帯 - 碧い瞳のエリス.mp3',
cover: 'https://doge.ottoli.cn/aqdd.jpg'
}]
});
</script>

在js 代码中:

  • 参数 container 值为 document.getElementById('aplayer01') 意思是定义当前播放器容器 id 为 aplayer01
  • 参数 audio 中有 4 个子参数,定义关于音频的相关参数:
    • 参数 name 定义音频名称
    • 参数 artist 定义艺术家名
    • 参数 url 指向音频文件的地址
    • 参数 url 指向音频封面的地址

然后,在需要使用播放器的地方,将容器 <div> 的 id 设置为参数 container 中设定的值即可

至于如何添加多个音频组成播放别表、显示歌词等更多功能,请参考APlayer 官方文档

MetingJS 的用法

前面已经看到,APlayer 原生用法设置参数十分繁琐,而且只能调用音频文件直链,增加服务器开销。而使用 MetingJS 就很好地解决了这个问题

对应的代码为:

<meting-js server="tencent" type="song" id="000akynZ2Rbro5"></meting-js>

一个 MetingJS 播放器至少需要三个参数:

  • server 指定调用的 API ,可选 neteasetencentkugouxiamibaidu ,分别对应网易云音乐、QQ音乐、酷狗音乐、虾米音乐、百度音乐
  • type 指定调用类型,可选 songplaylistalbumsearchartist ,分别对应单曲、歌单、专辑、搜索结果、艺术家
  • id 指定调用的 id ,一般可以在地址栏中找到

播放列表默认是打开的,你可以使用参数 listFolded="true" 使其默认折叠

当你设定 fixed="true" ,会生成一个吸附在页面左下角的播放器,就像我的博客左下角那个

当你设定 mini="true" ,会生成一个 mini 播放器:

值得注意的是:除了 mini 模式,MetingJS 生成的播放器默认是带有歌词的(而且关不掉)

全部参数说明请查阅 MetingJS 官方文档 (其实除了三个必要参数其余都和 APlayer 原生参数一样)

完整代码如下:

<!--header-->

<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>

<!--body-->

<meting-js
server="tencent"
type="playlist"
id="759015626"
fixed="true">
</meting-js>

<!--footer-->

<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

详情可参考APlayer & MetingJS 音乐播放器使用指南,本文基于此文章创作


在MetingJS的基础上美化样式

1、在header上添加

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>

 

2、在body上添加

<div id="aplayer" class="aplayer" data-order="random" data-id="2044905443" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-volume="0.6"></div>

3、在footer上添加

<!-- aplayer -->
<script src="https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kaygb/kaygb@master/js/v3.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kaygb/kaygb@master/layer/layer.js"></script>

必要的参数

data-id =>音乐页面链接上的id号 data-server => 平台名称。netease:网易;tencent:腾讯;xiami:虾米;kugou:酷狗;baidu:百度 data-type=>类型。playlist:歌单;song:单曲;专辑:album;关键词:search;歌手:artist

效果

悬浮音乐播放器APlayer & MetingJS

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

- THE END -

流浪

7月02日22:11

最后修改:2022年7月2日
0

非特殊说明,本博所有文章均为博主原创。