博客前端页面添加音乐播放器组件

博客前端页面添加音乐播放器组件

1.引入css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">

2.引入js

<script src="https://files.cnblogs.com/files/wkfvawl/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

3.在页面底部加入如下代码

<div id="aplayer" class="aplayer"  data-id="5433036795" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>

其中data-id为网易云音乐歌单id,可以自行修改，data-id获取方式如下：

打开网易云音乐网站，点击进入一个歌单，此歌单不能是已登录用户自己的收藏歌单。

如图地址栏中标红处就是data-id,复制粘贴即可。