网易云音乐、QQ音乐、酷狗音乐、虾米音乐、酷我音乐播放器 - 在线音乐播放
let server = 'netease'; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
let type = 'playlist'; //song: 单曲; playlist: 歌单; album: 唱片
let id = '961612751'; //封面 ID / 单曲 ID / 歌单 ID
$.ajax({
url: 'https://api.wuenci.com/meting/api/?server=' + server + '&type=' + type + '&id=' + id,
type: 'GET',
dataType: 'JSON',
success: function (data) {
const ap = new APlayer({
container: document.getElementById('aplayer'),
order: 'list', // random:随机播放 list:顺序播放
preload: 'auto',
listMaxHeight: '336px',
volume: '0.5',
mutex: true,
lrcType: 3,
// loop: 'one', 单曲循环已关闭
audio: data,
});
/* 底栏歌词 */
setInterval(function () {
$("#lrc").html('<span id='The_music' class='lrc-show' style='position: relative;top: 15px;'>' + $('.aplayer-lrc-current').text() + '</span><img src='' + data[0].cover + '' 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);
/* COPY底栏歌词 */
setInterval(function () {
const copycurrentLine = $('.aplayer-lrc-current').text();
let fontSize = '';
if (copycurrentLine.length > 12) {
fontSize = '12px';
}
$("#copylrc").html('<span id='The_music' class='lrc-show' style='position: relative;top: 15px;font-size: ' + fontSize + ';'>' + $('.aplayer-lrc-current').text() + '</span><img src='' + data[0].cover + '' style='width: 100%;border-radius: 20px;pointer-events:none;position: absolute;top: -320px;right: -270px;'><div style='width: 100%;text-align: center;position: absolute;top: -80px;right: -270px;'><div class='vavatar'><img src='https://q4.qlogo.cn/headimg_dl?dst_uin=1957860834&spec=640' style='width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;pointer-events:none;'><div class='vicon'></div></div><span style='margin-left: 10px;'>Hey 是柯佑鸭<div style='width: 100%;height: 30px;margin-top: 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'><font size='2px'>正在播放(' + $("#music-name").text() + ')</font></div></span><div id='hellolrc' style='margin-top: 10px;background: rgba(0,0,0,0.0);display: block !important;position: absolute!important;top: 80px!important;left: 50%!important;'></div></div>');
}, 500);
/* HELLO底栏歌词 */
setInterval(function () {
const currentLine = $('.aplayer-lrc-current').text();
const nextLine = $('.aplayer-lrc-current').next().text();
const lyrics = currentLine + '<br>' + nextLine;
let fontSize = '12px';
if (currentLine.length > 15) {
fontSize = '10px';
}
if (nextLine.length > 15) {
fontSize = '10px';
}
$("#hellolrc").html('<center><span class='lrc-show' style='font-size: ' + fontSize + ';'>' + lyrics + '</span></center>');
}, 500);
/* HELLOCOPY底栏歌词 */
setInterval(function () {
const currentLine = $('.aplayer-lrc-current').text();
const nextLine = $('.aplayer-lrc-current').next().text();
const lyrics = currentLine + '<br>' + nextLine;
let fontSize = '12px';
if (currentLine.length > 15) {
fontSize = '10px';
}
if (nextLine.length > 15) {
fontSize = '10px';
}
$("#hellocopylrc").html('<center><span class='lrc-show' style='font-size: ' + fontSize + ';'>' + lyrics + '</span></center>');
}, 500);
/* 音乐通知及控制 */
ap.on('play', function () {
music = $('.aplayer-title').text() + $('.aplayer-author').text();
iziToast.info({
timeout: 4000,
icon: 'fa-solid fa-circle-play',
displayMode: 'replace',
message: music
});
$("#play").html('<i class='fa-solid fa-pause'>');
$("#music-name").html($('.aplayer-title').text() + $('.aplayer-author').text());
if ($(document).width() >= 990) {
$('.power').css('cssText', 'display:none');
$('#lrc').css('cssText', 'display:block !important');
$('.copypower').css('cssText', 'display:none');
$('#copylrc').css('cssText', 'display:block !important');
};
// Notification.requestPermission().then(res => {
// console.log(res)
// });
// new Notification('音乐通知', {
// body: '正在播放：' + music,
// tag: 1
// });
});
ap.on('pause', function () {
$("#play").html('<i class='fa-solid fa-play'>');
if ($(document).width() >= 990) {
$('#lrc').css('cssText', 'display:none !important');
$('.power').css('cssText', 'display:block');
$('#copylrc').css('cssText', 'display:none !important');
$('.copypower').css('cssText', 'display:block');
}
});
$("#music").hover(function () {
$('.music-text').css('display', 'none');
$('.music-volume').css('display', 'flex');
}, function () {
$('.music-text').css('display', 'block');
$('.music-volume').css('display', 'none');
})
/* 一言与音乐切换 */
$('#open-music').on('click', function () {
$('#hitokoto').css('display', 'none');
$('#music').css('display', 'flex');
});
$("#hitokoto").hover(function () {
$('#open-music').css('display', 'flex');
}, function () {
$('#open-music').css('display', 'none');
})
$('#music-close').on('click', function () {
$('#music').css('display', 'none');
$('#hitokoto').css('display', 'flex');
});
/* 上下曲 */
$('#play').on('click', function () {
ap.toggle();
$("#music-name").html($('.aplayer-title').text() + $('.aplayer-author').text());
});
$('#last').on('click', function () {
ap.skipBack();
ap.play();
$("#music-name").html($('.aplayer-title').text() + $('.aplayer-author').text());
});
$('#next').on('click', function () {
ap.skipForward();
ap.play();
$("#music-name").html($('.aplayer-title').text() + $('.aplayer-author').text());
});
window.onkeydown = function (e) {
if (e.keyCode == 32) {
ap.toggle();
}
}
/* 打开音乐列表 */
$('#music-open').on('click', function () {
if ($(document).width() >= 990) {
$('#box').css('display', 'block');
$('#row').css('display', 'none');
$('#more').css('cssText', 'display:none !important');
}
});
//音量调节
$("#volume").on('input propertychange touchend', function () {
let x = $("#volume").val();
ap.volume(x, true);
if (x == 0) {
$("#volume-ico").html('<i class='fa-solid fa-volume-xmark'></i>');
} else if (x > 0 && x <= 0.3) {
$("#volume-ico").html('<i class='fa-solid fa-volume-off'></i>');
} else if (x > 0.3 && x <= 0.6) {
$("#volume-ico").html('<i class='fa-solid fa-volume-low'></i>');
} else {
$("#volume-ico").html('<i class='fa-solid fa-volume-high'></i>');
}
});
//倍速播放
$("#speed").on('input propertychange touchend', function () {
let x = $("#speed").val();
ap.audio.playbackRate = x;
$("#speed-ico").html(x + 'x');
});
let playMode = 'list'; // 初始播放模式: list-顺序播放, loop-单曲循环, random-随机播放
// 切换循环播放、顺序播放和随机播放的按钮点击事件
$('#play-mode').on('click', function() {
if (playMode === 'list') {
playMode = 'loop';
$(this).html('<i class='fa-solid fa-repeat'></i>');
iziToast.info({
timeout: 4000,
icon: 'fa-solid fa-circle-check',
displayMode: 'replace',
message: '已切换为单曲循环'
});
} else if (playMode === 'loop') {
playMode = 'random';
$(this).html('<i class='fa-solid fa-random'></i>');
iziToast.info({
timeout: 4000,
icon: 'fa-solid fa-circle-check',
displayMode: 'replace',
message: '已切换为随机播放'
});
} else {
playMode = 'list';
$(this).html('<i class='fa-solid fa-list'></i>');
iziToast.info({
timeout: 4000,
icon: 'fa-solid fa-circle-check',
displayMode: 'replace',
message: '已切换为顺序播放'
});
}
ap.options.order = playMode;
});
// 进度条
setInterval(function() {
const currentTime = ap.audio.currentTime;
const duration = ap.audio.duration;
const progress = (currentTime / duration) * 100;
$('#progress-bar').css('width', progress + '%');
}, 500);
},
error: function () {
setTimeout(function () {
iziToast.info({
timeout: 8000,
icon: 'fa-solid fa-circle-exclamation',
displayMode: 'replace',
message: '音乐播放器加载失败'
});
}, 3800);
}
})
此代码 img 中的 ' + data[0].cover + ' 这个图片显示不出来，另外替换成 data[0].cover 这个只会显示第一张图片，我的要求是当前播放的哪首歌就显示当前的歌曲封面内容：
要实现当前播放的歌曲封面显示，可以将图片的 src 属性替换为 data[0].cover，即当前播放歌曲的封面。修改代码如下：
$.ajax({
url: 'https://api.wuenci.com/meting/api/?server=' + server + '&type=' + type + '&id=' + id,
type: 'GET',
dataType: 'JSON',
success: function (data) {
const ap = new APlayer({
container: document.getElementById('aplayer'),
order: 'list',
preload: 'auto',
listMaxHeight: '336px',
volume: '0.5',
mutex: true,
lrcType: 3,
audio: data,
});
/* 底栏歌词 */
setInterval(function () {
$("#lrc").html('<span id='The_music' class='lrc-show' style='position: relative;top: 15px;'>' + $('.aplayer-lrc-current').text() + '</span><img src='' + data[ap.audio.index].cover + '' 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);
/* COPY底栏歌词 */
setInterval(function () {
const copycurrentLine = $('.aplayer-lrc-current').text();
let fontSize = '';
if (copycurrentLine.length > 12) {
fontSize = '12px';
}
$("#copylrc").html('<span id='The_music' class='lrc-show' style='position: relative;top: 15px;font-size: ' + fontSize + ';'>' + $('.aplayer-lrc-current').text() + '</span><img src='' + data[ap.audio.index].cover + '' style='width: 100%;border-radius: 20px;pointer-events:none;position: absolute;top: -320px;right: -270px;'><div style='width: 100%;text-align: center;position: absolute;top: -80px;right: -270px;'><div class='vavatar'><img src='https://q4.qlogo.cn/headimg_dl?dst_uin=1957860834&spec=640' style='width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;pointer-events:none;'><div class='vicon'></div></div><span style='margin-left: 10px;'>Hey 是柯佑鸭<div style='width: 100%;height: 30px;margin-top: 10px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;'><font size='2px'>正在播放(' + $("#music-name").text() + ')</font></div></span><div id='hellolrc' style='margin-top: 10px;background: rgba(0,0,0,0.0);display: block !important;position: absolute!important;top: 80px!important;left: 50%!important;'></div></div>');
}, 500);
/* HELLO底栏歌词 */
setInterval(function () {
const currentLine = $('.aplayer-lrc-current').text();
const nextLine = $('.aplayer-lrc-current').next().text();
const lyrics = currentLine + '<br>' + nextLine;
let fontSize = '12px';
if (currentLine.length > 15) {
fontSize = '10px';
}
if (nextLine.length > 15) {
fontSize = '10px';
}
$("#hellolrc").html('<center><span class='lrc-show' style='font-size: ' + fontSize + ';'>' + lyrics + '</span></center>');
}, 500);
/* HELLOCOPY底栏歌词 */
setInterval(function () {
const currentLine = $('.aplayer-lrc-current').text();
const nextLine = $('.aplayer-lrc-current').next().text();
const lyrics = currentLine + '<br>' + nextLine;
let fontSize = '12px';
if (currentLine.length > 15) {
fontSize = '10px';
}
if (nextLine.length > 15) {
fontSize = '10px';
}
$("#hellocopylrc").html('<center><span class='lrc-show' style='font-size: ' + fontSize + ';'>' + lyrics + '</span></center>');
}, 500);
/* 音乐通知及控制 */
ap.on('play', function () {
music = $('.aplayer-title').text() + $('.aplayer-author').text();
iziToast.info({
timeout: 4000,
icon: 'fa-solid fa-circle-play',
displayMode: 'replace',
message: music
});
$("#play").html('<i class='fa-solid fa-pause'>');
$("#music-name").html($('.aplayer-title').text() + $('.aplayer-author').text());
if ($(document).width() >= 990) {
$('.power').css('cssText', 'display:none');
$('#lrc').css('cssText', 'display:block !important');
$('.copypower').css('cssText', 'display:none');
$('#copylrc').css('cssText', 'display:block !important');
};
// Notification.requestPermission().then(res => {
// console.log(res)
// });
// new Notification('音乐通知', {
// body: '正在播放：' + music,
// tag: 1
// });
});
ap.on('pause', function () {
$("#play").html('<i class='fa-solid fa-play'></i>');
if ($(document).width() >= 990) {
$('#lrc').css('cssText', 'display:none !important');
$('.power').css('cssText', 'display:block');
$('#copylrc').css('cssText', 'display:none !important');
$('.copypower').css('cssText', 'display:block');
}
});
$("#music").hover(function () {
$('.music-text').css('display', 'none');
$('.music-volume').css('display', 'flex');
}, function () {
$('.music-text').css('display', 'block');
$('.music-volume').css('display', 'none');
})
/* 一言与音乐切换 */
$('#open-music').on('click', function () {
$('#hitokoto').css('display', 'none');
$('#music').css('display', 'flex');
});
$("#hitokoto").hover(function () {
$('#open-music').css('display', 'flex');
}, function () {
$('#open-music').css('display', 'none');
})
$('#music-close').on('click', function () {
$('#music').css('display', 'none');
$('#hitokoto').css('display', 'flex');
});
/* 上下曲 */
$('#play').on('click', function () {
ap.toggle();
$("#music-name").html($('.aplayer-title').text() + $('.aplayer-author').text());
});
$('#last').on('click', function () {
ap.skipBack();
ap.play();
$("#music-name").html($('.aplayer-title').text() + $('.aplayer-author').text());
});
$('#next').on('click', function () {
ap.skipForward();
ap.play();
$("#music-name").html($('.aplayer-title').text() + $('.aplayer-author').text());
});
window.onkeydown = function (e) {
if (e.keyCode == 32) {
ap.toggle();
}
}
/* 打开音乐列表 */
$('#music-open').on('click', function () {
if ($(document).width() >= 990) {
$('#box').css('display', 'block');
$('#row').css('display', 'none');
$('#more').css('cssText', 'display:none !important');
}
});
//音量调节
$("#volume").on('input propertychange touchend', function () {
let x = $("#volume").val();
ap.volume(x, true);
if (x == 0) {
$("#volume-ico").html('<i class='fa-solid fa-volume-xmark'></i>');
} else if (x > 0 && x <= 0.3) {
$("#volume-ico").html('<i class='fa-solid fa-volume-off'></i>');
} else if (x > 0.3 && x <= 0.6) {
$("#volume-ico").html('<i class='fa-solid fa-volume-low'></i>');
} else {
$("#volume-ico").html('<i class='fa-solid fa-volume-high'></i>');
}
});
//倍速播放
$("#speed").on('input propertychange touchend', function () {
let x = $("#speed").val();
ap.audio.playbackRate = x;
$("#speed-ico").html(x + 'x');
});
let playMode = 'list'; // 初始播放模式: list-顺序播放, loop-单曲循环, random-随机播放
// 切换循环播放、顺序播放和随机播放的按钮点击事件
$('#play-mode').on('click', function() {
if (playMode === 'list') {
playMode = 'loop';
$(this).html('<i class='fa-solid fa-repeat'></i>');
iziToast.info({
timeout: 4000,
icon: 'fa-solid fa-circle-check',
displayMode: 'replace',
message: '已切换为单曲循环'
});
} else if (playMode === 'loop') {
playMode = 'random';
$(this).html('<i class='fa-solid fa-random'></i>');
iziToast.info({
timeout: 4000,
icon: 'fa-solid fa-circle-check',
displayMode: 'replace',
message: '已切换为随机播放'
});
} else {
playMode = 'list';
$(this).html('<i class='fa-solid fa-list'></i>');
iziToast.info({
timeout: 4000,
icon: 'fa-solid fa-circle-check',
displayMode: 'replace',
message: '已切换为顺序播放'
});
}
ap.options.order = playMode;
});
// 进度条
setInterval(function() {
const currentTime = ap.audio.currentTime;
const duration = ap.audio.duration;
const progress = (currentTime / duration) * 100;
$('#progress-bar').css('width', progress + '%');
}, 500);
},
error: function () {
setTimeout(function () {
iziToast.info({
timeout: 8000,
icon: 'fa-solid fa-circle-exclamation',
displayMode: 'replace',
message: '音乐播放器加载失败'
});
}, 3800);
}
})
原文地址: https://www.cveoy.top/t/topic/qD0L 著作权归作者所有。请勿转载和采集!