个人博客的APlayer音乐播放器

大家好,今天看到的个人了博客音乐播放器,就想自己搞一个。弄了几个小时才搞懂。在网上找了好多资料,最后发现没用。出差各种问题,因为小编我一开始也不是很理解。我目前找到了三种方法,给大家分享一下,如果还有其他的方法,请在评论区留言。

第一种就是APlayer音乐播放器

需要引入三个文件APlayer.min.js、APlayer.min.css、Meting.min.js。

 <!-- require 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>
        <!-- require MetingJS -->
        <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

在body内添加这行代码就行

  <meting-js server="netease" type="playlist" id="5260535564" fixed="true" autoplay="true" loop="all" order="random"
            preload="auto" list-folded="ture" list-max-height="500px" lrc-type="1">
        </meting-js>

这是所有代码复制粘贴运行就可以显示了,如果要换歌单,就修改id,id的歌单可以在网易云上获取等下在说。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- require 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>
        <!-- require MetingJS -->
        <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
    </head>
    <body>
        <meting-js server="netease" type="playlist" id="5260535564" fixed="true" autoplay="true" loop="all" order="random"
            preload="auto" list-folded="ture" list-max-height="500px" lrc-type="1">
        </meting-js>

    </body>
</html>

效果图:

第二章方法 使用网易云的 外联播放器。

学习歌单‖极静轻音乐01 - 歌单 - 网易云音乐 (163.com)

点击 生成外链播放器 然后复制代码粘贴就好了

这个相对比较简单

注意:APlayer音乐播放器 修改歌单使用的id 歌单id是我标红线的地方 粘贴复制就行 看下图

第三个是一个管方的网站,永久免费。但是只能添加一个播放器。多个吗,氪金你值得拥有。

这个还可以更换皮肤。还是比较不错的。

地址:🎵明月浩空网-永久免费的HTML5网站音乐播放器 (myhkw.cn)

皮肤有四个,经典、Maini(背景透明迷你)、swhite(背景白色迷你)、cover

大家都比较关心怎么使用,上面都有写。直接复制粘贴就好了。换歌单的话自己注册账号登录里面可以设置。一般不换歌单都可以。

<script src="https://myhkw.cn/api/player/demo" id="myhk" key="demo" skin="player" lr="l" m="1"></script>

参考地址:

(90条消息) aplayer.js音乐播放器插件使用_不懂人情世故的博客-CSDN博客

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值