2022年03月05日   温氏效应   72 次浏览   暂无评论  

想在自己页面中挂载一个精美的音乐播放器吗?

那就快来试试 Aplayer + MetingJS 组合吧。

再也不用担心歌曲太多占用存储空间以及流量资源了。

废话不多说,直接上神器!

Aplayer

Aplayer 一个高性能+高颜值的HTML5音乐播放器

官方网站:https://aplayer.js.org

Github:https://github.com/MoePlayer/APlayer

说明文档:https://aplayer.js.org/#/home

Aplayer 的安装和使用方法在说明说明文档里介绍的很清楚,这里就不在赘述。这里主要说一下配合Aplayer使用的插件MetingJS。

MetingJS

MetingJS 通俗的说,就是可以让Aplayer的音乐列表直接调用音乐平台歌单列表,这样我们在音乐平台创建歌单,添加自己喜欢的音乐就可以了。不用把歌曲一个一个添加在自己的页面和服务器里了,有木有很方便,有木有很激动!

支持平台:网易云音乐、QQ音乐、酷狗、虾米音乐、百度音乐

Github:https://github.com/MoePlayer/APlayer

说明文档:https://github.com/metowolf/MetingJS/blob/master/README.md

使用方法

基本配置需要一个CSS和两个JS文件,分别是:APlayer.min.cssAPlayer.min.jsMeting.min.js ,三个文件的链接放在下面了,大家可以保存部署也可以直接调用。

快速部署:

<!-- 配置 APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- 配置 MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<meting-js
    server="netease"
    type="playlist"
    id="60198">
</meting-js>

<head></head> 中间插入APlayer.min.cssAPlayer.min.jsMeting.min.js ,三个文件,然后在需要显示播放器的位置添加:<meting-js server="netease" type="playlist" id="60198"></meting-js> 就可以啦。

参数介绍:

server(音乐平台)=netease(网易云音乐),tencent(QQ音乐),kugou(酷狗),xiami(虾米音乐),baidu(百度音乐)

id=歌单id

autoplay(自动播放),默认false ,开启 true

listFolded(列表状态),默认true 为打开状态,需要默认收起可以改为 false

fixed固定在页面左下角默认false,如需开启请设置为:fixed="true"

简单说这么几个吧,其他的参数自行查看说明文档吧。

我调用的是网易云音乐,给大家说一下我的操作:

  • 创建歌单(这里强调一下,歌单不能设置为私密状态,否则无法调用)
  • 添加喜欢的歌曲到歌单
  • 打开歌单,点击分享=>复制链接,查看链接中的 playlist?id=123456 这串数字就是歌单ID,替换上面的ID即可使用。

OK,完了,就是这么简单。下面是我的网易云音乐歌单,不妨听一听吧。

共有 0 条评论

发表评论