**注意：您应该在浏览下面的内容前备份您的博客文件夹，以防止您的重要数据丢失** # 正式开始 ## WPwebplayer方案偶然发现2x.nz上的一个音乐播放器**WPwebplayer**，感觉挺好看的，于是把它放进了博客里。 ![【开源】WPwebplayer——简洁通用的网页播放器 - AcoFork Blog (2x.nz)](https://www.2x.nz/posts/wpwebplayer") ## 修改博客根目录下的src/layouts/Layout.astro `Ctrl+F`搜索``，定位之后在``上一行粘贴如下代码： ```html ``` 这样你就引入了WPwebplayer的样式和js，我们继续修改，`Ctrl+F`定位到``,在``上一行写粘贴如下代码： ```html ``` 参数说明： | 属性 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | `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`查看你的成果： ![](https://tc-new.z.wiki/autoupload/f/fuaMVbgVWIrwTCzmFqZNP412_FRYNb81z6UPhMWD8iI/20250822/vDI0/1727X931/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE_2025-08-22_122846.png/webp) 唯一的缺点就是不支持多首歌，不过挺好看的 ## Aplayer方案上一个方案不支持多首歌或者网易云歌单，这个方案使用Aplayer实现在侧边栏显示歌曲播放卡片这个方案是在ikamusume7.org上看到的，感谢大佬 !["对Fuwari进行一些小的改动（二）改 - 伊卡的记事本"](https://ikamusume7.org/posts/frontend/some_small_code_changes2/) ### 在博客根目录下的src\components\widget文件夹中创建APlayer.svelte文件在`你的博客目录\src\components\widget`文件夹下创建文件`APlayer.svelte` ```text

``` ### 创建Music.astro文件然后在同目录下创建文件`Music.astro` ```text --- import WidgetLayout from './WidgetLayout.astro' import APlayer from './APlayer.svelte' const COLLAPSED_HEIGHT = '7.5rem' interface Props { class?: string style?: string } const className = Astro.props.class const style = Astro.props.style const isCollapsed = false ---

``` ### 修改src\components\widget\SideBar.astro文件 ```diff --- import type { MarkdownHeading } from "astro"; import Categories from "./Categories.astro"; import Profile from "./Profile.astro"; import Tag from "./Tags.astro"; +import Music from './Music.astro' interface Props { class?: string; headings?: MarkdownHeading[]; } const className = Astro.props.class; --- ``` 完毕，`pnpm run dev`查看你的成果

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

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