个人博客的APlayer音乐播放器

@饭团

已于 2023-02-23 17:02:44 修改

阅读量869

点赞数 1

分类专栏： win10 文章标签：前端 Powered by 金山文档

于 2023-02-14 13:52:15 首次发布

本文链接：https://blog.csdn.net/weixin_50582284/article/details/129024959

版权

win10 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

第一种就是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
评论
个人博客的APlayer音乐播放器

个人了博客的APlayer音乐播放器
复制链接

扫一扫

专栏目录

个人博客的APlayer音乐播放器

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