最新消息:Laov博客专业为广大站长朋友提供网站源码

在自己的网站上添加HTML悬浮音乐播放器APlayer & MetingJS

技术教程 LAOV 72浏览

官方文档

https://github.com/MoePlayer/APlayer
https://github.com/metowolf/MetingJS

引入线上的js代码放到你的HTML结构页面中,link链接放在head内部即可。

替换div中的网易云ID号即可

在header上添加

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>

在body上添加

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

在footer上添加

<!-- aplayer -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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

效果

 

转载请注明:LAOV博客 » 在自己的网站上添加HTML悬浮音乐播放器APlayer & MetingJS