音乐播放器功能使用示例

欢迎来到 Demius 主题音乐播放器功能使用示例！本文将展示如何使用全新的基于 MetingJS 的音乐播放器。

🎵 功能简介

Demius 主题已全面升级音乐播放器，基于 MetingJS，支持：

支持的音乐平台

✅ 网易云音乐 (netease)
✅ QQ音乐 (tencent)
✅ 酷狗音乐 (kugou)
✅ 虾米音乐 (xiami)
✅ 百度音乐 (baidu)

支持的内容类型

✅ 单曲 (song)
✅ 播放列表 (playlist)
✅ 专辑 (album)
✅ 搜索 (search)
✅ 歌手 (artist)
✅ 本地文件 (local)

其他特性

✅ 响应式设计，完美适配所有设备
✅ 暗色模式自动适配
✅ 丰富的自定义选项
✅ 支持歌词显示
✅ 固定模式和迷你模式

📖 基础用法

1. 网易云音乐单曲

播放单首歌曲：

{{< music server="netease" type="song" id="27583305" >}}

示例：

2. QQ音乐单曲

播放QQ音乐：

{{< music server="tencent" type="song" id="001vJijV1gXaxA" >}}

示例：

3. 酷狗音乐单曲

播放酷狗音乐：

{{< music server="kugou" type="song" id="D6AB302BS6519B3D666E4F6C8CDAFE6B" >}}

示例（额…酷狗没测试，因为我没有酷狗…：

🎼 播放列表

网易云播放列表

播放整个播放列表：

{{< music server="netease" type="playlist" id="60198" >}}

示例：

📝 提示：网易云播放列表ID可以从分享链接中获取，如 https://music.163.com/#/playlist?id=60198

QQ音乐播放列表

{{< music server="tencent" type="playlist" id="3278367961" >}}

示例：

💿 专辑播放

播放整张专辑：

{{< music server="netease" type="album" id="16937" >}}

示例：

🔍 搜索功能

使用关键词搜索并播放：

{{< music server="netease" type="search" id="海阔天空" >}}

示例：

📝 提示：搜索会自动播放搜索结果中的歌曲

🎤 歌手作品

播放歌手的所有作品：

{{< music server="netease" type="artist" id="2118" >}}

示例：

📁 本地文件

播放本地音频文件：

{{< music name="歌曲名" artist="歌手名" url="/audio/demo.mp3" cover="/img/cover.jpg" >}}

示例

带歌词的完整示例：

{{< music 
  name="Rainymood" 
  artist="Rainymood" 
  url="https://rainymood.com/audio1110/0.m4a" 
  cover="https://rainymood.com/i/badge.jpg"
  lrc="[00:00.00]这是\n[00:04.01]歌词\n[00:08.02]内容" 
>}}

📝 提示：

本地文件路径相对于网站根目录的 static 文件夹

支持 MP3、M4A、WAV、OGG 等常见格式

⚙️ 自定义选项

自动播放

{{< music server="netease" type="song" id="27583305" autoplay="true" >}}

自定义主题颜色

{{< music server="netease" type="song" id="27583305" theme="#FF0000" >}}

循环模式

{{< music server="netease" type="song" id="27583305" loop="one" >}}

all：循环播放所有（默认）
one：单曲循环
none：不循环

播放顺序

{{< music server="netease" type="playlist" id="60198" order="random" >}}

list：列表顺序（默认）
random：随机播放

音量设置

{{< music server="netease" type="song" id="27583305" volume="0.5" >}}

范围：0.0 - 1.0（默认 0.7）

歌词类型

{{< music server="netease" type="song" id="27583305" lrcType="1" >}}

0：不显示歌词（默认）
1：显示外置歌词
3：显示内置歌词

列表折叠

{{< music server="netease" type="playlist" id="60198" listFolded="true" >}}

列表最大高度

{{< music server="netease" type="playlist" id="60198" listMaxHeight="200px" >}}

固定模式

{{< music server="netease" type="song" id="27583305" fixed="true" >}}

固定模式会将播放器固定在页面底部。

迷你模式

{{< music server="netease" type="song" id="27583305" mini="true" >}}

迷你模式显示精简的播放器界面。

🎨 完整示例

自定义主题播放器

{{< music 
  server="netease" 
  type="song" 
  id="27583305" 
  autoplay="false" 
  theme="#FF6B6B" 
  loop="all" 
  order="list" 
  volume="0.7" 
  lrcType="1" 
  listMaxHeight="300px" 
>}}

示例：

🔗 自动链接解析

MetingJS 支持直接使用音乐链接：

{{< music auto="https://music.163.com/#/song?id=27583305" >}}

示例：

支持的链接格式：

网易云音乐：https://music.163.com/
QQ音乐：https://y.qq.com/
虾米音乐：https://www.xiami.com/

📊 参数参考

必填参数（平台模式）

参数	说明	示例
`server`	音乐平台	netease, tencent, kugou, xiami, baidu
`type`	类型	song, playlist, album, search, artist
`id`	ID或关键词	27583305, 60198, 海阔天空

必填参数（本地模式）

参数	说明	示例
`name`	歌曲名	海阔天空
`url`	音频地址	/audio/song.mp3

可选参数

参数	默认值	说明
`artist`	-	歌手名（本地模式）
`cover`	-	封面图（本地模式）
`lrc`	-	歌词内容（本地模式）
`api`	-	自定义API地址
`autoplay`	false	自动播放
`theme`	#2980b9	主题颜色
`loop`	all	循环模式
`order`	list	播放顺序
`volume`	0.7	音量
`lrcType`	0	歌词类型
`listFolded`	false	列表折叠
`listMaxHeight`	340px	列表最大高度
`fixed`	false	固定模式
`mini`	false	迷你模式
`mutex`	true	互斥播放
`preload`	auto	预加载

🛠️ 高级用法

自定义API

如果MetingJS的默认API不可用，可以使用自建API：

{{< music 
  server="netease" 
  type="song" 
  id="27583305" 
  api="https://your-api.com/meting?server=:server&type=:type&id=:id" 
>}}

也可以在 hugo.toml 中全局配置：

[params.music]
  metingApi = "https://your-api.com/meting?server=:server&type=:type&id=:id"

API占位符

:server - 音乐平台
:type - 类型
:id - ID
:r - 随机数（防止缓存）

💡 使用技巧

1. 获取音乐ID

网易云音乐：

打开歌曲页面，URL中的数字即为ID
示例：https://music.163.com/#/song?id=27583305 → ID为 27583305

QQ音乐：

打开歌曲页面，URL中的部分即为ID
示例：https://y.qq.com/n/yqq/song/001vJijV1gXaxA.html → ID为 001vJijV1gXaxA

酷狗音乐：

需要从页面源代码或API中获取Hash值

2. 播放列表推荐

建议使用播放列表而不是手动添加多首歌曲
播放列表会自动获取最新内容
减少维护工作量

3. 性能优化

避免在一个页面中添加过多播放器
使用 autoplay="false" 避免自动播放
大型播放列表使用 listFolded="true" 折叠列表

4. 移动端体验

播放器完全响应式设计
自动适配移动端屏幕
触摸友好的控件

🐛 常见问题

1. 播放器无法加载？

可能原因：

MetingJS CDN加载失败
API服务不可用
网络问题

解决方法：

检查浏览器控制台错误信息
尝试使用其他音乐平台
配置自定义API

2. 某些歌曲无法播放？

可能原因：

歌曲ID错误
歌曲已下架
版权限制

解决方法：

验证歌曲ID是否正确
尝试其他歌曲或平台

3. 播放列表显示不完整？

可能原因：

API限制返回数量
播放列表为空或私密

解决方法：

确认播放列表为公开状态
尝试使用官方播放列表

📚 相关文档

🎉 总结

Demius主题的音乐播放器基于强大的MetingJS，为您提供：

✅ 多平台支持：5大音乐平台随心选
✅ 多种类型：单曲、播放列表、专辑、搜索、歌手
✅ 简单易用：一行代码即可嵌入
✅ 功能丰富：自定义选项满足各种需求
✅ 完美体验：响应式设计，暗色模式适配

开始在您的文章中添加音乐播放器，让内容更生动！🎵

提示：更多高级配置请参考 MetingJS官方文档