Aplayer音乐播放器通用插件js代码

正文索引 [隐藏]

前言

可能有很多萌新也跟我一样看不懂DIYgod大佬发的APlayer项目怎么使用叭

所以我就集成一段代码,各位看官引用到自己网页上就可以食用了,非常的方便欢呼

代码

播放器代码

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css”>
<script type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js”></script>
<div class=”aplayer aplayer-withlrc aplayer-withlist” data-id=”7625573185″ data-server=”tencent” data-type=”playlist” data-autoplay=”ture” data-theme=”#f4a7b9″ style=”width:600px; height:300px;”> </div>

侧边栏播放器代码

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css”>
<script type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js”></script>
<div class=”aplayer” data-id=”7625573185″ data-server=”tencent” data-type=”playlist” data-autoplay=”false” data-fixed=”true”> </div>

食用说明

前三行引用APlayer的外部文件,放在<head></head>内

最后一行为播放器代码,放在<body></body>内,按照自己需求修改参数

复制代码后记得把中文引号改为英文引号“”

参数设置

  • data-id=”歌单id或歌曲id”
  • data-server=”netease或tencent”(netease为网易云,tencent为QQ音乐)
  • data-autoplay=”ture或false”(设为ture的话打开网页歌曲会自动播放,false不自动播放)
  • data-theme=”#f4a7b9″(按照自己的喜好更换颜色)
  • style=”width:600px; height:300px;”(按照自己的喜好设置宽高)

示例

播放器演示

刷新页面显示

侧边栏播放器演示

请移步到APlayer官网
APlayer播放器

华丽的分割线
版权归属:@一叶三秋⚡️,转载请注明出处
本文链接:https://ghser.com/182.html
版权声明:采用 CC BY-NC-SA 3.0 协议进行许可 《Aplayer音乐播放器通用插件js代码》的文章页面二维码