大家好,今天看到的个人了博客音乐播放器,就想自己搞一个。弄了几个小时才搞懂。在网上找了好多资料,最后发现没用。出差各种问题,因为小编我一开始也不是很理解。我目前找到了三种方法,给大家分享一下,如果还有其他的方法,请在评论区留言。
第一种就是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>
效果图:
![](https://img-blog.csdnimg.cn/img_convert/5bca7d760308a34337a10f00afea449e.png)
第二章方法 使用网易云的 外联播放器。
学习歌单‖极静轻音乐01 - 歌单 - 网易云音乐 (163.com)
点击 生成外链播放器 然后复制代码粘贴就好了
这个相对比较简单
![](https://img-blog.csdnimg.cn/img_convert/18f3d638a111bd5f817f7d03ca82bc29.png)
注意:APlayer音乐播放器 修改歌单使用的id 歌单id是我标红线的地方 粘贴复制就行 看下图
![](https://img-blog.csdnimg.cn/img_convert/ee9be81209d63b14711124fdd7550f14.png)
第三个是一个管方的网站,永久免费。但是只能添加一个播放器。多个吗,氪金你值得拥有。
这个还可以更换皮肤。还是比较不错的。
地址:🎵明月浩空网-永久免费的HTML5网站音乐播放器 (myhkw.cn)
![](https://img-blog.csdnimg.cn/img_convert/56f5ea90e39de7f1f458bccbb89e9ce7.png)
![](https://img-blog.csdnimg.cn/img_convert/4487083aaf305962406295313a96da63.png)
皮肤有四个,经典、Maini(背景透明迷你)、swhite(背景白色迷你)、cover
![](https://img-blog.csdnimg.cn/img_convert/fbdb0e969fd5c0b94655f1f65885893c.png)
大家都比较关心怎么使用,上面都有写。直接复制粘贴就好了。换歌单的话自己注册账号登录里面可以设置。一般不换歌单都可以。
<script src="https://myhkw.cn/api/player/demo" id="myhk" key="demo" skin="player" lr="l" m="1"></script>
参考地址: