简单的线上音乐播放器 APlayer & MetingJS

最近想在一个单页里面使用音乐播放器

但各种线上音乐网站的接口更新

令以前用着的不能用了

但又不想重新写

然后就见到了它

APlayer & MetingJS

它可以很复杂——定制显示内容和样式

也可以很简单——就那么几行代码的事

详细学习还是看官方文档吧：

https://github.com/MoePlayer/APlayer

https://github.com/metowolf/MetingJS

简单的：

在header上添加

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

在footer上添加

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

在使用的地方上添加

<div class="aplayer" data-id="60198" data-server="netease" data-type="playlist"></div>

<div class="aplayer" data-id="002QE24W26baEy" data-server="tencent" data-type="album" data-fixed="true" data-autoplay="false" data-volume="1.0" data-list-max-height="200px" data-list-folded="true"></div>

必要的参数

data-id =>音乐页面链接上的id号

data-server => 平台名称。netease：网易；tencent：腾讯；xiami：虾米；kugou：酷狗；baidu：百度

data-type=>类型。playlist：歌单；song：单曲；专辑：album；关键词：search；歌手：artist

更多参数详见 https://github.com/metowolf/MetingJS#option

最后。浏览器兼容问题

Browsers without native custom element support require a polyfill.

• Chrome
• Firefox
• Safari
• Internet Explorer 11
• Microsoft Edge

um...继续诅咒 ie 

完成！