let server = netease; netease 网易云音乐; tencent QQ音乐; kugou 酷狗音乐; xiami 虾米; kuwo 酷我let type = playlist; song 单曲; playlist 歌单; album 唱片let id = 961612751; 封面 ID 单曲 ID 歌单 ID$ajax url httpsapiwuencicom
为了显示歌曲封面图片,您需要修改以下代码:
- 在
success回调函数中,找到ap对象的初始化部分:
const ap = new APlayer({
container: document.getElementById('aplayer'),
order: 'list', // random:随机播放 list:顺序播放
preload: 'auto',
listMaxHeight: '336px',
volume: '0.5',
mutex: true,
lrcType: 3,
audio: data,
});
- 在
ap对象初始化的参数列表中,添加一个新的参数listFolded: false,用于展开歌曲列表:
const ap = new APlayer({
container: document.getElementById('aplayer'),
order: 'list',
preload: 'auto',
listMaxHeight: '336px',
volume: '0.5',
mutex: true,
lrcType: 3,
listFolded: false, // 新增代码
audio: data,
});
- 在
success回调函数中,找到底栏歌词的更新部分:
setInterval(function () {
$("#lrc").html("<span id='The_music' class='lrc-show' style='position: relative;top: 15px;'>" + $(".aplayer-lrc-current").text() + "</span><img src='image/mmexport1693834969153.png' style='width: 120%;border-bottom-left-radius: 20px;position: absolute;top: 180px;left: -710px;'><img src='image/770e41c585c44ba3b5a8ec38600cbe200904.png' style='width: 130%;border-bottom-left-radius: 20px;position: absolute;top: 144px;left: -420px;'><div id='hellocopylrc' style='margin-top: 10px;background: rgba(0,0,0,0.0);display: block !important;position: absolute!important;top: 320px!important;left: -160px!important;'></div>");
}, 500);
- 在底栏歌词的更新部分之前,添加以下代码,用于显示歌曲封面图片:
const coverUrl = data[0].cover;
$("#aplayer").css("background-image", "url(" + coverUrl + ")");
将以上代码插入到底栏歌词的更新部分之前,最终的代码应如下所示:
setInterval(function () {
const coverUrl = data[0].cover;
$("#aplayer").css("background-image", "url(" + coverUrl + ")");
$("#lrc").html("<span id='The_music' class='lrc-show' style='position: relative;top: 15px;'>" + $(".aplayer-lrc-current").text() + "</span><img src='image/mmexport1693834969153.png' style='width: 120%;border-bottom-left-radius: 20px;position: absolute;top: 180px;left: -710px;'><img src='image/770e41c585c44ba3b5a8ec38600cbe200904.png' style='width: 130%;border-bottom-left-radius: 20px;position: absolute;top: 144px;left: -420px;'><div id='hellocopylrc' style='margin-top: 10px;background: rgba(0,0,0,0.0);display: block !important;position: absolute!important;top: 320px!important;left: -160px!important;'></div>");
}, 500);
这样,歌曲封面图片就会显示在播放器的背景上了。记得替换coverUrl的值为您实际的封面图片链接
原文地址: http://www.cveoy.top/t/topic/iXZV 著作权归作者所有。请勿转载和采集!