WordPress 背景音乐播放器

一个功能完整的WordPress背景音乐播放器插件，支持播放列表管理、自动播放、音量控制等功能。

功能特点

• 🎵 播放列表管理 - 支持多首歌曲的播放列表
• ▶️ 完整控制 - 播放/暂停、上一首/下一首、进度条控制
• 🔊 音量控制 - 可调节音量，支持静音
• 🔄 播放模式 - 列表循环、单曲循环、随机播放
• 🎨 美观界面 - 渐变色设计，固定在网站顶部
• 📱 响应式 - 支持移动端和桌面端
• ⌨️ 快捷键 - 空格播放/暂停、左右键切换歌曲

安装方法

方法一：通过FTP上传（推荐）

1. 将以下文件上传到 WordPress 的 wp-content/plugins/wp-bg-music-player/ 目录：

   • wp-bg-music-player.php
   • wp-bg-music-player.css
   • wp-bg-music-player.js

2. 登录 WordPress 后台

3. 进入 插件 → 已安装的插件

4. 找到 "Winggon Background Music Player" 并点击 启用

方法二：直接修改主题（不推荐，仅供测试）

如果你不想创建插件，可以将代码直接添加到主题中：

1. 打开主题的 functions.php 文件
2. 将 wp-bg-music-player.php 中的代码（去掉文件头的插件声明）粘贴到文件末尾
3. 将 CSS 和 JS 文件放到主题目录
4. 修改 PHP 中的资源路径

使用说明

1. 添加音乐

登录 WordPress 后台，进入 设置 → 背景音乐：

方式一：从媒体库添加

• 点击 从媒体库添加 按钮
• 选择已上传的音频文件
• 点击 添加到播放列表

方式二：上传新音乐

• 点击 上传新音乐 按钮
• 选择本地的音频文件（MP3、WAV、OGG等）
• 文件将自动上传并添加到播放列表

2. 编辑歌曲信息

在播放列表中可以编辑每首歌的信息：

• 歌曲名称 - 显示在播放器上的标题
• 歌手 - 显示在播放器上的艺术家
• 时长 - 歌曲时长（可选，格式如 "3:45"）

3. 调整播放器设置

• 启用播放器 - 控制播放器是否显示
• 自动播放 - 页面加载后自动播放（浏览器可能会阻止）
• 默认音量 - 设置初始音量（0-100%）
• 播放模式 - 列表循环/单曲循环/播放一次
• 随机播放 - 随机播放列表中的歌曲

4. 前端使用

播放器会固定显示在网站顶部，包含以下功能：

控制按钮：

• ⏮️ 上一首
• ⏯️ 播放/暂停
• ⏭️ 下一首
• 🔁 播放模式切换
• 🔊 音量控制
• 📋 播放列表

键盘快捷键：

• 空格 - 播放/暂停
• ← - 上一首
• → - 下一首

折叠功能：

• 双击播放器右侧控制区域可折叠播放器
• 折叠后会显示一个圆形按钮，点击可展开

文件结构

wp-bg-music-player/
├── wp-bg-music-player.php    # 主插件文件
├── wp-bg-music-player.css    # 样式文件
├── wp-bg-music-player.js     # JavaScript逻辑
└── README.md                  # 使用说明

浏览器兼容性

• Chrome/Edge (最新版)
• Firefox (最新版)
• Safari (最新版)
• 移动端浏览器

注意： 现代浏览器为了改善用户体验，可能会阻止音频自动播放。用户需要先与页面交互（点击、滚动）后才能自动播放。

常见问题

Q: 为什么音乐不会自动播放？

A: 现代浏览器（Chrome、Safari等）默认阻止自动播放。用户需要先与页面交互后才能播放。

Q: 支持哪些音频格式？

A: 支持常见的音频格式，包括 MP3、WAV、OGG、M4A 等。

Q: 如何更换播放器的颜色？

A: 编辑 wp-bg-music-player.css 文件，修改 .wg-player-main 的 background 属性。

Q: 播放器会影响网站速度吗？

A: 不会。播放器文件体积很小（总计约50KB），并且只在需要时加载。

Q: 能否只在首页显示播放器？

A: 可以。在 PHP 文件中的 enqueue_assets 方法添加条件判断：

if (!is_front_page()) return;

卸载方法

1. 登录 WordPress 后台
2. 进入 插件 → 已安装的插件
3. 找到 "Winggon Background Music Player" 点击 停用
4. 点击 删除 完全移除插件

注意： 删除插件不会删除已上传的音频文件（仍在媒体库中）。

技术支持

如有问题，请访问：https://winggon.cc

更新日志

1.0.1

• UI重构 - 极简透明设计，移除按钮背景和外轮廓
• 自适应图标 - 使用mix-blend-mode实现图标颜色自动适配背景
• 音量滑块 - 三角形设计(clip-path)，支持长按拖动调节
• 静音状态 - 显示带斜线图标
• 面板优化 - 暗色主题，移除控制按钮区域
• 间距修复 - 修复WordPress主题导致的按钮间距不均匀问题
• 状态持久化 - 跨页面保持播放进度和状态

1.0.0

• 初始版本发布
• 支持播放列表管理
• 支持自动播放
• 支持音量控制
• 支持多种播放模式
• 响应式设计