mirror of
https://github.com/MCKero6423/fuwari.git
synced 2026-10-02 03:15:35 +00:00
修复音乐播放器bug
bug
现在还有一个超级无敌的bug，那就是展开音乐列表的时候，会把整个网页都给拉伸一下。这应该是因为？尝试了很多次，但都是展开之后，音乐播放器都不能自由滚动😓，这主要是因为我改变了本来aplayer的样式，因为它一直出现两个播放器，生成不一样的aplayer之后，原生的列表也变了。
所以我决定回复原来的aplayer引用，改为销毁一个音乐播放器
一度变成了
内容来自其他网站。
This commit is contained in:
mckero authored and 
GitHub committed
1 parent
edcd2a207b
commit
e2d9d41e95
2 files changed
+226
-16
No files matched your search
@@ -1,14 +1,178 @@
|
||||
<div class="meting" id="meting">
|
||||
<!-- require APlayer -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
|
||||
<!-- require MetingJS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
|
||||
<meting-js
|
||||
server="netease"
|
||||
type="playlist"
|
||||
id="420944487"
|
||||
order="random"
|
||||
list-folded="true">
|
||||
</meting-js>
|
||||
</div>
|
||||
<script>
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
|
||||
let container;
|
||||
let playerInstance = null;
|
||||
|
||||
onMount(() => {
|
||||
// 确保脚本加载完成后再初始化
|
||||
loadScripts().then(() => {
|
||||
initPlayer();
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
destroyPlayer();
|
||||
});
|
||||
|
||||
function loadScripts() {
|
||||
return new Promise((resolve) => {
|
||||
// 检查是否已经加载了必要的脚本
|
||||
if (window.APlayer && window.Meting) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
let loadedCount = 0;
|
||||
const totalScripts = 3;
|
||||
|
||||
function checkLoaded() {
|
||||
loadedCount++;
|
||||
if (loadedCount === totalScripts) {
|
||||
resolve();
|
||||
}
|
||||
}
|
||||
|
||||
// 加载CSS
|
||||
if (!document.querySelector('link[href*="aplayer"]')) {
|
||||
const css = document.createElement('link');
|
||||
css.rel = 'stylesheet';
|
||||
css.href = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css';
|
||||
css.onload = checkLoaded;
|
||||
document.head.appendChild(css);
|
||||
} else {
|
||||
checkLoaded();
|
||||
}
|
||||
|
||||
// 加载APlayer JS
|
||||
if (!window.APlayer) {
|
||||
const script1 = document.createElement('script');
|
||||
script1.src = 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js';
|
||||
script1.onload = checkLoaded;
|
||||
document.body.appendChild(script1);
|
||||
} else {
|
||||
checkLoaded();
|
||||
}
|
||||
|
||||
// 加载Meting JS
|
||||
if (!window.Meting) {
|
||||
const script2 = document.createElement('script');
|
||||
script2.src = 'https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js';
|
||||
script2.onload = checkLoaded;
|
||||
document.body.appendChild(script2);
|
||||
} else {
|
||||
checkLoaded();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function destroyPlayer() {
|
||||
if (playerInstance) {
|
||||
try {
|
||||
playerInstance.destroy();
|
||||
console.log('播放器实例已销毁');
|
||||
} catch (e) {
|
||||
console.log('销毁播放器时出错:', e);
|
||||
}
|
||||
playerInstance = null;
|
||||
}
|
||||
|
||||
// 清理全局实例引用
|
||||
if (window.musicPlayerInstance === playerInstance) {
|
||||
window.musicPlayerInstance = null;
|
||||
}
|
||||
}
|
||||
|
||||
function initPlayer() {
|
||||
if (!container) return;
|
||||
|
||||
// 先销毁现有实例
|
||||
destroyPlayer();
|
||||
|
||||
// 清空容器
|
||||
container.innerHTML = '';
|
||||
|
||||
// 创建meting-js元素
|
||||
const metingElement = document.createElement('meting-js');
|
||||
metingElement.setAttribute('server', 'netease');
|
||||
metingElement.setAttribute('type', 'playlist');
|
||||
metingElement.setAttribute('id', '420944487');
|
||||
metingElement.setAttribute('order', 'random');
|
||||
metingElement.setAttribute('list-folded', 'true');
|
||||
metingElement.setAttribute('list-max-height', '300px'); // 限制列表最大高度
|
||||
metingElement.setAttribute('fixed', 'false');
|
||||
metingElement.setAttribute('autoplay', 'false');
|
||||
metingElement.setAttribute('preload', 'auto');
|
||||
|
||||
container.appendChild(metingElement);
|
||||
|
||||
// 等待Meting初始化完成
|
||||
setTimeout(() => {
|
||||
const aplayerElement = container.querySelector('.aplayer');
|
||||
if (aplayerElement && aplayerElement.aplayer) {
|
||||
playerInstance = aplayerElement.aplayer;
|
||||
window.musicPlayerInstance = playerInstance;
|
||||
|
||||
// 添加样式修复
|
||||
if (aplayerElement) {
|
||||
aplayerElement.style.boxShadow = 'none';
|
||||
aplayerElement.style.margin = '0';
|
||||
|
||||
// 确保列表滚动正常
|
||||
const listElement = aplayerElement.querySelector('.aplayer-list');
|
||||
if (listElement) {
|
||||
listElement.style.maxHeight = '300px';
|
||||
listElement.style.overflowY = 'auto';
|
||||
}
|
||||
}
|
||||
|
||||
console.log('播放器初始化完成');
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 播放器容器 -->
|
||||
<div bind:this={container} class="music-player-container"></div>
|
||||
|
||||
<style>
|
||||
.music-player-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 全局样式修复 */
|
||||
:global(.aplayer) {
|
||||
box-shadow: none !important;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(.aplayer-list) {
|
||||
max-height: 300px !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
:global(.aplayer-list ol) {
|
||||
max-height: none !important;
|
||||
}
|
||||
|
||||
/* 防止列表展开时影响页面布局 */
|
||||
:global(.aplayer.aplayer-withlist .aplayer-list) {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* 确保滚动条样式 */
|
||||
:global(.aplayer-list::-webkit-scrollbar) {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
:global(.aplayer-list::-webkit-scrollbar-thumb) {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
:global(.aplayer-list::-webkit-scrollbar-track) {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
@@ -13,8 +13,54 @@ const style = Astro.props.style
|
||||
|
||||
const isCollapsed = false
|
||||
---
|
||||
|
||||
<WidgetLayout name="音乐" id="music" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex flex-col gap-1 music-widget-container">
|
||||
<APlayer client:only="svelte"/>
|
||||
</div>
|
||||
</WidgetLayout>
|
||||
</WidgetLayout>
|
||||
|
||||
<script>
|
||||
// 页面切换时的清理工作
|
||||
function cleanupMusicPlayer() {
|
||||
if (window.musicPlayerInstance) {
|
||||
try {
|
||||
window.musicPlayerInstance.destroy();
|
||||
console.log('页面切换时清理播放器');
|
||||
} catch (e) {
|
||||
console.log('清理播放器时出错:', e);
|
||||
}
|
||||
window.musicPlayerInstance = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Astro 页面切换事件
|
||||
document.addEventListener('astro:before-preparation', cleanupMusicPlayer);
|
||||
document.addEventListener('astro:before-swap', cleanupMusicPlayer);
|
||||
|
||||
// 如果使用了 Swup
|
||||
if (typeof window !== 'undefined' && window.swup) {
|
||||
window.swup.hooks.on('content:replace', cleanupMusicPlayer);
|
||||
}
|
||||
|
||||
// 页面卸载时清理
|
||||
window.addEventListener('beforeunload', cleanupMusicPlayer);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.music-widget-container {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 防止音乐播放器影响整体布局 */
|
||||
.music-widget-container :global(.aplayer) {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.music-widget-container :global(.aplayer-list) {
|
||||
position: relative !important;
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user