🎵 音乐播放器组件

这是一个基于 APlayer 和 MetingJS 封装的原生 Vue 3 组件，可以直接在 Markdown 文件中使用，无需编写任何 HTML 代码。

✨ 特性

• 📦 开箱即用：只需一行代码即可插入播放器
• 🔄 真实对接：直接调用 MetingJS 接口，实时同步网易云歌单
• ⚡ 智能加载：自动管理依赖资源，不会阻塞页面渲染
• 🎨 主题适配：完美适配 VitePress 主题样式，支持暗色模式
• 🛠 配置灵活：支持歌单、单曲、专辑等多种模式

🚀 快速使用

在任何 .md 文件中直接使用 <MusicPlayer /> 组件：

<!-- 使用默认歌单 -->
<MusicPlayer />

<!-- 指定网易云歌单ID -->
<MusicPlayer id="7360465359" />

🎮 演示

默认歌单

正在加载音乐播放器...

指定歌单 (周杰伦精选)

正在加载音乐播放器...

单曲模式 (晴天)

正在加载音乐播放器...

迷你模式

正在加载音乐播放器...

⚙️ 参数配置

组件支持以下属性配置：

属性名	类型	默认值	说明
id	String	7360465359	网易云音乐的歌单/歌曲/专辑 ID
type	String	playlist	类型：playlist(歌单), song(单曲), album(专辑), artist(歌手)
theme	String	#667eea	主题色，支持十六进制颜色值
autoplay	Boolean	false	是否自动播放（部分浏览器可能限制）
listFolded	Boolean	false	是否默认折叠播放列表
fixed	Boolean	false	是否开启吸底模式
mini	Boolean	false	是否开启迷你模式

💡 获取 ID 方法

1. 打开网易云音乐网页版 (https://music.163.com/)
2. 进入歌单或歌曲页面
3. 复制 URL 中的 id 参数
   • 歌单：playlist?id=xxxx
   • 单曲：song?id=xxxx

💻 技术实现

该组件使用 Vue 3 Composition API 编写，内部动态加载 APlayer 和 MetingJS 的 CDN 资源，并通过 DOM 操作手动挂载播放器，从而避免了 Vue 对自定义标签 <meting-js> 的编译警告，保证了最大的兼容性和稳定性。

源码位置

docs/.vitepress/theme/components/MusicPlayer.vue

---

提示

由于浏览器策略限制，移动端通常无法自动播放音频。