说明

想在网页里直接放歌？三分钟就能搞定。
我这套用 ThinkPHP5 写的音乐解析接口，已经帮你把酷狗、网易云、QQ 三大平台的歌单扒了个遍。只要把接口地址往 APlayer 里一塞，前端立刻多出一个会唱歌的小挂件，连歌词都能同步滚。

唯一要注意：酷狗那边只能读官方榜单，你自己在 App 里攒的私房歌单它不认，别白费劲儿。

使用步骤简单粗暴：
1. 先把后端部署好，拿到类似下面这种链接：
http://你的域名/index/music/index?id=2205345458
id 换成你要的榜单/歌单号。

2. 前端把下面这段代码粘过去，css、js 都是 CDN，不用下载：

“`html
<!– 放播放器的地方 –>
<div id=”player” class=”aplayer”></div>

<!– 引入文件 –>
<link rel=”stylesheet” href=”https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css”>
<script src=”https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js”></script>
<script src=”https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js”></script>

<!– 启动脚本 –>
<script>
$(function(){
$.ajax({
url: “http://你的域名/index/music/index?id=2205345458”, //换成自己的接口
success: function(res){
var ap = new APlayer({
element: document.getElementById(‘player’),
autoplay: true,
fixed: true,
loop: ‘all’,
order: ‘random’,
listFolded: true,
showlrc: 3,
theme: ‘#FFC0CB’,
listMaxHeight: ‘200px’,
music: eval(res)
});
window.aplayers || (window.aplayers = []);
window.aplayers.push(ap);
}
});
});
</script>
“`

保存刷新，页面右下角就会冒出粉色的小播放器，歌单一键即播。接口返回的是标准 APlayer 格式，想改颜色、高度、自动播放自己调参数就行。

后端源码、部署文档都放在 Git，拿去改个名就能上线，搜索引擎秒收。

演示图

感谢您的来访，获取更多精彩文章请收藏本站。