APlayer和MetingJS的使用
咕咕咕 fishing

简介

APlayer是一个可爱的HTML5音乐播放器。
MetingJS给APlayer播放器加入网易云等支持。

APlayer项目地址
MetingJS项目地址
APlayer官方文档

配置

使用cdn调用
在 里面插入:

1
2
<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 里面插入:

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

当然,也可以将原文件下载至本地进行调用。

使用

Aplayer原生用法

例如:

使用音乐播放器加载音乐,url可以是本地资源也可以是http链接。
代码:

1
2
3
4
5
6
7
8
9
10
11
12
<div id="aplayer_1"></div>
<script type="text/javascript">
const ap = new APlayer({
container: document.getElementById('aplayer_1'),
audio: [{
name: '长岛',
artist: '花粥',
url: '../../images/APlayer和MetingJS的使用/长岛.mp3',
cover: '../../images/APlayer和MetingJS的使用/长岛封面.png'
}]
});
</script>

更多的用法,比如多个音乐组成的列表模式、节省空间的迷你模式等可以参考APlayer官方文档

使用MetingJs载入网易云等其他音乐网站的音乐

例如:

代码:

1
2
3
4
5
<meting-js
server="netease"
type="song"
id="536622304">
</meting-js>

可以看出MetingJS的代码也更简洁。
有三个必要参数:

  1. id 指定歌曲 ID / 播放列表 ID / 专辑 ID / 搜索关键字
  2. server 指定音乐平台: netease tencent kugou xiami baidu
  3. type 指定调用类型:song playlist album search artist

    还有许多其他的参数可以参看MetingJS官方文档

播放列表(type="playlist"):

固定播放器(fixed="true"),像页面左下角那个一样
迷你播放器(mini="true"):

更多的参数就不介绍了。

总结

之前使用butterfly主题时,主题内置了MetingJS。只需要在配置中改几个配置项,加一个div便可实现全盘吸底的APlayer。
但是本文的方法是通用的,在主题中使用的话,需要找header、footer等文件,在其中修改。
啊,我怎么又在改博客。

  • 本文标题:APlayer和MetingJS的使用
  • 本文作者:咕咕咕
  • 创建时间:2022-08-15 15:25:36
  • 本文链接:https://cooooing.github.io/学习记录/APlayer和MetingJS的使用/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!