丘比女王

你抚琵笆奏琴弦😍我坐戏子楼台前😏😏😏

公告

主域名:klqn.top 副域名:qbqueen.xyz

Learn More

571 字

3 分钟

为你的Fuwari博客添加音乐播放器！

2025-08-22

教程

博客

/

Fuwari

/

WPwebplayer

CAUTION
您应该在浏览下面的内容前备份您的博客文件夹，以防止您的重要数据丢失

正式开始#

WPwebplayer方案#

偶然发现2x.nz上的一个音乐播放器WPwebplayer，感觉挺好看的，于是把它放进了博客里。

修改博客根目录下的src/layouts/Layout.astro#

Ctrl+F搜索</head>，定位之后在</head>上一行粘贴如下代码：

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wpwebplayer@1.1.5/min-css.css">
2
<script src="https://cdn.jsdelivr.net/npm/wpwebplayer@1.1.5/min-js.js"></script>

这样你就引入了WPwebplayer的样式和js，我们继续修改，Ctrl+F定位到</body>,在</body>上一行写粘贴如下代码：

1
<wp-music-player
2
    src=""
3
    title=""
4
    artist=""
5
    cover=""
6
    autoplay="true"
7
    loop="true"
8
    volume="0.1"
9
    fixed="true"
10
    mini="true"
11
    theme="#ff6b6b">
12
</wp-music-player>

参数说明：

属性	类型	默认值	描述
`src`	`string`	无	音频文件地址（必须）
`title`	`string`	无	音乐标题
`artist`	`string`	无	作者
`cover`	`string`	无	封面图片URL
`autoplay`	`true / false`	`false`	是否自动播放
`loop`	`true / false`	`true`	是否循环播放
`volume`	`number` (0~1)	`1.0`	初始音量（0~1）
`fixed`	`true / false`	`true`	是否固定样式
`mini`	`true / false`	`true`	是否迷你模式
`theme`	`string`（色值）	`#00c3ff`	主题颜色

往里填你的自定义参数就行了，然后pnpm run dev查看你的成果：

唯一的缺点就是不支持多首歌，不过挺好看的

Aplayer方案#

上一个方案不支持多首歌或者网易云歌单，这个方案使用Aplayer实现在侧边栏显示歌曲播放卡片

这个方案是在ikamusume7.org上看到的，感谢大佬

在博客根目录下的src\components\widget文件夹中创建APlayer.svelte文件#

在你的博客目录\src\components\widget文件夹下创建文件APlayer.svelte

1
<div class="meting" id="meting">
2
    <!-- require APlayer -->
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
    <!-- require MetingJS -->
6
    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
7
    <meting-js
8
        server="netease"
9
        type="playlist"
10
        id="你的网易云歌单ID"
11
        order="random"
12
        list-folded="true">
13
    </meting-js>
14
</div>

创建Music.astro文件#

然后在同目录下创建文件Music.astro

1
---
2
import WidgetLayout from './WidgetLayout.astro'
3
import APlayer from './APlayer.svelte'
4

5
const COLLAPSED_HEIGHT = '7.5rem'
6

7
interface Props {
8
  class?: string
9
  style?: string
10
}
11
const className = Astro.props.class
12
const style = Astro.props.style
13

14
const isCollapsed = false
15
---
16
<WidgetLayout name="音乐" id="music" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
17
    <div class="flex flex-col gap-1">
18
        <APlayer client:only="svelte"/>
19
    </div>
20
</WidgetLayout>

修改src\components\widget\SideBar.astro文件#

1
---
2
import type { MarkdownHeading } from "astro";
3
import Categories from "./Categories.astro";
4
import Profile from "./Profile.astro";
5
import Tag from "./Tags.astro";
6
import Music from './Music.astro'
7
interface Props {
8
    class?: string;
9
    headings?: MarkdownHeading[];
10
}
11

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