添加APlayer音乐播放器

  • 最近几天都呆在家里不能出门,属实很无聊,给某个机器人插件写了一个小HTML单页(命令表)
  • 一切搞好后想添加一首背景音乐,突然觉得传统的后台播放不是很好,就想到了APlayer音乐播放器,但在HTML单页里添加实属麻烦,还要固定在浏览器左下角.
  • 官方文档是这么写的:
  • 然而我..怎么加都加不进去...(膜拜那些大佬!)
  • 在一次机缘巧合下我在腾讯云看到了这么一段代码:
  • 1
    2
    3
    4
    5
    6
      <!-- MetingJS start -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.css">
    <div class="aplayer" data-id="2305794885" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-volume="1.0"></div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/APlayer.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
    <!-- MetingJS end -->
  • 试了一下,调用成功,但这不是我想要的效果
  • 通过自己的认知改进了一下代码:
  • 1
    2
    3
    4
    5
    6
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
    <!--引入css文件-->
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <!--引入js文件-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Meting.min.js"></script>
    <!--引入js文件-->
  • 以下代码放入body标签内
  • 1
    2
    3
    <div class="aplayer" data-id="571339817" data-server="netease" data-type="song" data-fixed="true" data-autoplay="true" data-volume="1.0" style="position: fixed;
    bottom: 0;">
    </div>
  • 如何更改音乐:
  • 1
    2
    3
    data-id="音乐ID"
    <!-- 目前支持网易云音乐,进入网易云官网搜索一首好听的歌 -->
    <!-- 然后抬头看浏览器地址栏,链接最后面的一段数字就是音乐ID,复制到data-id中即可 -->
  • 成功调用并固定到了网页底部
  • APlayer音乐播放器真好看(不许反驳我哦!)

评论完整模式加载中...如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理