网易云音乐、QQ 音乐、酷狗音乐、虾米、酷我音乐播放器代码优化
音乐播放器代码优化
以下代码使用 APlayer 播放器实现网易云音乐、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.mizore.cn/meting/api.php?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='image/f806913b91e44645b1451768f8fbf737.png' style='width: 64%;height: 64%;border-bottom-left-radius: 20px;position: relative;top: 74px;left: -720px;'>');
}, 500);
/* COPY底栏歌词 */
setInterval(function () {
$('#copylrc').html('<span id='The_music' class='lrc-show' style='position: relative;top: 15px;'>' + $('.aplayer-lrc-current').text() + '</span><img src='image/ylnwkTd9ZesTNEibo6IGSxl2MPQqPicgnR47uaV6nzAxiahpVuic42QJVw.jpg' style='width: 100%;border-radius: 20px;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 是柯佑鸭<br><font size='2px'>正在播放(' + $('#music-name').text() + ')</font></span></div>');
}, 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');
});
},
error: function () {
setTimeout(function () {
iziToast.info({
timeout: 8000,
icon: 'fa-solid fa-circle-exclamation',
displayMode: 'replace',
message: '音乐播放器加载失败'
});
}, 3800);
}
});
代码优化说明：
将代码中的 order: 'random', 改为 order: 'list'，即可将播放顺序改为顺序播放，解决切换上下曲无法切换的问题。
其他优化建议：
- 可以使用更简洁的代码编写方式，例如使用 ES6 语法和箭头函数等。
- 可以添加更多功能，例如播放列表、歌词显示、进度条等。
- 可以对代码进行注释，方便他人阅读和理解。
注意：
- 以上代码需要引入 APlayer 库和相关依赖。
- 需要根据实际情况调整代码中的参数和配置。
- 请遵守相关版权协议，使用正版音乐。
原文地址: https://www.cveoy.top/t/topic/oTj0 著作权归作者所有。请勿转载和采集!