fuwari主题侧边栏音乐播放器解决方案

778 字

4 分钟

fuwari主题侧边栏音乐播放器解决方案

2025-08-22

技术折腾

fuwari

/

aplayer

学习自

www.kekesxk.online

Ke.ke的博客

初步试想#

本来默认的aplayer固定在左下角，观感不是很好，也不是很贴合fuwari主题。

一直想换，但是不知道从哪里入手。知道偶然误入了大佬的博客，唤醒了我的xp。

解决方案#

我也不知道咋解决的，反正改了4个文件。gemini是主谋😄，只是描述一下过程。

/src/layouts/Layout.astro
/src/layouts/MainGridLayout.astro
/src/components/MusicPlayer.astro
/src/components/widget/SideBar.astro

先把原来引用的删除#

本来的做法是把MusicPlayer.astro引入layout.astro，实现全局的效果，我把它放在了body标签的底下，所以它在左下角

那么首先要把本来的全局layout.astro、MainGridLayout.astro本来的删除。然后更改SideBar.astro，把它引入到侧边栏中。

1
---
2
---
3
import type { MarkdownHeading } from "astro";
4
import Categories from "./Categories.astro";
5
import Profile from "./Profile.astro";
6
import Tag from "./Tags.astro";
7
import MusicPlayer from "../MusicPlayer.astro";
8

9
interface Props {
10
class?: string;
11
headings?: MarkdownHeading[];
12
}
13

14
const className = Astro.props.class;
15
---
16
<div id="sidebar" class:list={[className, "w-full"]}>
17
    <div class="flex flex-col w-full gap-4 mb-4">
18
        <Profile></Profile>
19
    </div>
20
    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
21
        <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
22
        <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
23
        <MusicPlayer class="onload-animation" style="animation-delay: 250ms" />
24
    </div>
25
</div>

吐槽#

几乎搞了2个小时的音乐播放器，终于实现了初步效果，从默认的左下角实现了类似卡片集成的效果，看起来很原生。要是样式可以再匹配主题一点的话，就更像了。

bug#

现在还有一个超级无敌的bug，那就是展开音乐列表的时候，会把整个网页都给拉伸一下。这应该是因为？尝试了很多次，但都是展开之后，音乐播放器都不能自由滚动😓，这主要是因为我改变了本来aplayer的样式，因为它一直出现两个播放器，生成不一样的aplayer之后，原生的列表也变了。

所以我决定回复原来的aplayer引用，改为销毁一个音乐播放器

一度变成了山的那边

解决#

最后还是豆包解决的，微笑。

修改MusicPlayer.astro

1
---
2
---
3
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" />
4
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
5
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
6

7
<div class="pb-4 card-base">
8
    <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 relative ml-8 mt-4 mb-2
9
      before:w-1 before:h-4 before:rounded-md before:bg-[var(--primary)]
10
      before:absolute before:left-[-16px] before:top-[5.5px]">
11
        音乐
12
    </div>
13

14
    <div class="px-4" id="music-player-container"></div>
15
</div>
16

17
<script is:inline>
18
// 全局变量存储播放器实例
19
window.musicPlayerInstance = null;
20

21
// 确保只初始化一次播放器
22
function initMusicPlayer() {
23
    // 先销毁已存在的实例
24
    if (window.musicPlayerInstance) {
25
        try {
26
            window.musicPlayerInstance.destroy();
27
        } catch (e) {
28
            console.log('销毁旧播放器实例:', e);
29
        }
30
        window.musicPlayerInstance = null;
31
    }
32

33
    // 清除容器内容
34
    const container = document.getElementById('music-player-container');
35
    if (!container) return;
36
    container.innerHTML = '';
37

38
    // 创建新的meting-js元素
39
    const metingElement = document.createElement('meting-js');
40
    metingElement.setAttribute('api', 'meting服务器?server=:server&type=:type&id=:id');
41
    metingElement.setAttribute('server', 'netease');
42
    metingElement.setAttribute('type', 'playlist');
43
    metingElement.setAttribute('id', '歌单id');
44
    metingElement.setAttribute('fixed', 'false');
45
    metingElement.setAttribute('autoplay', 'false');
46
    metingElement.setAttribute('theme', '#25c6fc');
47
    metingElement.setAttribute('loop', 'all');
48
    metingElement.setAttribute('order', 'list');
49
    metingElement.setAttribute('preload', 'auto');
50
    metingElement.setAttribute('list-folded', 'true');
51
    metingElement.setAttribute('list-max-height', '300px');
52

53
    container.appendChild(metingElement);
54

55
    // 手动初始化并存储实例
56
    window.Meting(metingElement, {
57
        // 配置参数
58
    });
59

60
    // 获取APlayer实例并存储
61
    setTimeout(() => {
62
        const aplayerElement = container.querySelector('.aplayer');
63
        if (aplayerElement && aplayerElement.aplayer) {
64
            window.musicPlayerInstance = aplayerElement.aplayer;
65
        }
66
    }, 100);
67
}
68

69
// 页面加载时初始化
70
document.addEventListener('DOMContentLoaded', initMusicPlayer);
71

72
// Astro页面切换时重新初始化
73
document.addEventListener('astro:page-load', initMusicPlayer);
74

75
// Swup路由切换时清理并重新初始化
76
if (window.swup) {
77
    window.swup.hooks.on('content:replace', () => {
78
        if (window.musicPlayerInstance) {
79
            try {
80
                window.musicPlayerInstance.destroy();
81
            } catch (e) {
82
                console.log('Swup切换时销毁播放器:', e);
83
            }
84
            window.musicPlayerInstance = null;
85
        }
86
    });
87

88
    window.swup.hooks.on('page:view', initMusicPlayer);
89
}
90
</script>