所需依赖

<!-- APlayer.js相关依赖，作用是播放器的相关功能与样式的封装 -->
<link href="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js"></script>

APlayer.js官网

<!-- Meting.js相关依赖，是基于APlayer.js封装的播放器制作的一个可以调用到QQ音乐或网易云歌单的项目 -->
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

Meting.js项目地址

安装

在添加好依赖之后，直接引入下面的代码，就可以看到你的网页左下角多出了一个播放器

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

配置详解

带*的表示是必须的

server*

指定调用的 API，可选 netease, tencent, kugou, xiami, baidu，分别对应网易云音乐、QQ音乐、酷狗音乐、虾米音乐、百度音乐

type*

指定调用类型，可选 song, playlist, album, search, artist，分别对应单曲、歌单、专辑、搜索结果、艺术家

id*

指定调用的 id，一般可以在地址栏中找到，例如我引入的是网易云的歌单，打开网页版的网易云，登入后找到你需要绑定的歌单，例如https://music.163.com/#/my/m/music/playlist?id=7542145956中，后面的7542145956就是歌单的id

autoplay

字面意思，是否自动播放，如果开启自动播放，则从其他页面跳转进来时会自动播放音乐，刷新不会触发这个效果

fixed

是否固定，如果值为true，那么就会绑定到页面的左下角，就像我博客这样

loop

是否循环播放歌曲

order

播放模式，可选 list, random，分别对应顺序播放与随机播放

list-folded

是否默认折叠歌曲列表

list-max-length

歌曲列表的最大高度，超过后出现滚动条

lrc-type

歌词类型，这个没有深入研究，默认值是0，歌词会显示在页面中间，如果需要隐藏歌词，设置为1即可

标签：播放器,音乐,list,歌单,博客,添加,自动播放,id,页面
来源： https://www.cnblogs.com/hyjax/p/16488156.html