Typecho 音乐播放器 QPlayer2 🎵

一款简洁小巧的 HTML5 底部悬浮音乐播放器，为您的 Typecho 博客增添音乐魅力

✨ 功能特点

· 🎶 简洁美观的底部悬浮设计 · 📱 响应式布局，支持移动端 · 🎨 支持歌词显示和歌曲封面 · ⚡ 基于 HTML5 Audio API，无需 Flash · 🔧 简单易用的 JSON 配置方式

📦 安装步骤

下载插件

最新版本下载

) 或使用 git 克隆：

1

git clone https://github.com/moeshin/QPlayer2-Typecho.git

安装到 Typecho
将文件夹重命名为 QPlayer2
上传到 Typecho 的插件目录：usr/plugins/
登录 Typecho 后台，进入"控制台" → “插件”
找到 QPlayer2 并点击"启用"
配置播放列表
在插件设置页面打开 QPlayer2 配置
在"播放列表"中添加 JSON 格式的歌曲数据
保存设置

🎼 歌曲列表配置

JSON 数据结构

字段说明是否必须示例 name 歌曲名称 ✅ “星河万里” artist 歌手名称 ❌ “Rom邢锐” audio 音频文件链接 ✅ “ https://example.com/song.mp3" cover 封面图片链接 ❌ “ https://example.com/cover.jpg" lrc 歌词文件链接 ❌ “ https://example.com/lyrics.lrc"

完整配置示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


[
  {
    "name": "我真怕自己哪天倒下",
    "artist": "张良",
    "audio": "https://file.mobufan.eu.org:666/music/我真怕自己哪天倒下-张良.mp3",
    "cover": "https://file.mobufan.eu.org:666/music/我真怕自己哪天倒下-张良.jpg",
    "lrc": "https://file.mobufan.eu.org:666/music/我真怕自己哪天倒下-张良.lrc"
  },
  {
    "name": "星河万里",
    "artist": "Rom邢锐",
    "audio": "https://file.mobufan.eu.org:666/music/星河万里-Rom邢锐.mp3",
    "cover": "https://file.mobufan.eu.org:666/music/星河万里-Rom邢锐.jpg",
    "lrc": "https://file.mobufan.eu.org:666/music/星河万里-Rom邢锐.lrc"
  },
  // 更多歌曲...
]

🎵 推荐歌曲列表

以下是精心挑选的歌曲推荐列表，可以直接复制使用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51


[
  {
    "name": "我真怕自己哪天倒下",
    "artist": "张良",
    "audio": "https://file.mobufan.eu.org:666/music/我真怕自己哪天倒下-张良.mp3",
    "cover": "https://file.mobufan.eu.org:666/music/我真怕自己哪天倒下-张良.jpg",
    "lrc": "https://file.mobufan.eu.org:666/music/我真怕自己哪天倒下-张良.lrc"
  },
  {
    "name": "星河万里",
    "artist": "Rom邢锐",
    "audio": "https://file.mobufan.eu.org:666/music/星河万里-Rom邢锐.mp3",
    "cover": "https://file.mobufan.eu.org:666/music/星河万里-Rom邢锐.jpg",
    "lrc": "https://file.mobufan.eu.org:666/music/星河万里-Rom邢锐.lrc"
  },
  {
    "name": "伤心太平洋",
    "artist": "任贤齐",
    "audio": "https://file.mobufan.eu.org:666/music/伤心太平洋-任贤齐.mp3",
    "cover": "https://file.mobufan.eu.org:666/music/伤心太平洋-任贤齐.jpg",
    "lrc": "https://file.mobufan.eu.org:666/music/伤心太平洋-任贤齐.lrc"
  },
  {
    "name": "胡广生",
    "artist": "任素汐",
    "audio": "https://file.mobufan.eu.org:666/music/胡广生-任素汐.mp3",
    "cover": "https://file.mobufan.eu.org:666/music/胡广生-任素汐.jpg",
    "lrc": "https://file.mobufan.eu.org:666/music/胡广生-任素汐.lrc"
  },
  {
    "name": "可能",
    "artist": "程响",
    "audio": "https://file.mobufan.eu.org:666/music/可能-程响.mp3",
    "cover": "https://file.mobufan.eu.org:666/music/可能-程响.jpg",
    "lrc": "https://file.mobufan.eu.org:666/music/可能-程响.lrc"
  },
  {
    "name": "万有引力",
    "artist": "汪苏泷",
    "audio": "https://file.mobufan.eu.org:666/music/万有引力-汪苏泷.mp3",
    "cover": "https://file.mobufan.eu.org:666/music/万有引力-汪苏泷.jpg",
    "lrc": "https://file.mobufan.eu.org:666/music/万有引力-汪苏泷.lrc"
  },
  {
    "name": "人间烟火",
    "artist": "程响",
    "audio": "https://file.mobufan.eu.org:666/music/人间烟火-程响.mp3",
    "cover": "https://file.mobufan.eu.org:666/music/人间烟火-程响.jpg",
    "lrc": "https://file.mobufan.eu.org:666/music/人间烟火-程响.lrc"
  }
]

⚙️ 自定义配置

播放器设置选项

· 自动播放: 设置是否加载后自动播放 · 循环模式: 单曲循环/列表循环/随机播放 · 音量控制: 默认音量设置 · 歌词显示: 是否启用歌词功能 · 进度条: 显示播放进度条

样式自定义

可以通过 CSS 自定义播放器样式：

1
2
3
4
5
6
7
8
9


.qplayer-container {
  /* 自定义播放器容器样式 */
  background-color: rgba(0, 0, 0, 0.8);
}

.qplayer-controls {
  /* 自定义控制按钮样式 */
  color: #ffffff;
}

🔧 常见问题解答

❓ 播放器不显示怎么办？

检查插件是否已启用
确认浏览器控制台是否有错误信息
检查歌曲链接是否可访问

❓ 歌词不显示怎么办？

确认歌词文件链接正确
检查歌词文件格式是否为 LRC 标准格式
确保歌词文件编码为 UTF-8

❓ 移动端显示异常？

检查响应式布局是否正常工作
确认触摸事件处理是否正常

❓ 如何添加新歌曲？

在播放列表 JSON 中添加新的歌曲对象
确保音频文件可公开访问
保存设置并刷新页面

📱 移动端适配

QPlayer2 已针对移动设备进行优化：

· ✅ 触摸友好的控制界面 · ✅ 滑动调节进度和音量 · ✅ 自适应屏幕尺寸 · ✅ 省电模式优化

🌟 使用技巧

批量添加歌曲: 使用数组格式一次性添加多首歌曲
本地测试: 可以先使用本地服务器测试音频文件
CDN 加速: 建议将音频文件放在 CDN 上提高加载速度
定期更新: 定期检查歌曲链接有效性，更新失效链接

🆘 获取帮助

· 📖 官方文档 · 🐛 提交问题 · 💬 社区讨论

💡 提示：使用前请确保您有权使用相关音乐资源，尊重版权哦！

希望 QPlayer2 能为您的 Typecho 博客增添更多音乐魅力！🎵