WebPlayer.js

（本文由人工智能（AIGC）辅助生成）

一款轻量、美观的 Web 背景音乐播放器，基于原生 JavaScript 和 CSS 实现。它可以在任何网页中嵌入，提供背景音乐播放功能，具备完整的播放控制、播放列表和响应式 UI。

功能特性

即插即用：引入一个 JS 和一个 CSS 文件即可使用。
自动播放与恢复：支持自动播放（遵循浏览器策略），并能恢复上次播放的进度和音量。
播放列表管理：通过 PHP 后端动态扫描并加载 music/ 目录下的 MP3 文件。
响应式设计：完美适配桌面和移动端屏幕。
深色/浅色主题：自动跟随页面主题，或可通过 data-theme 属性手动切换。
播放控制：播放/暂停、上一曲/下一曲、进度条拖拽、音量控制。
全局固定：播放器始终固定在页面底部，不干扰主内容。

##文件结构 webplayer.js/

├── README.md

├── index(demo).html or index(demo).php # 示例页面

├── getmusiclist.php # PHP后端，用于扫描音乐目录并返回JSON列表

├── player.js # 播放器核心逻辑

├── player.css # 播放器样式

└── music/ # 存放您的MP3音乐文件

快速开始

克隆此仓库到您的 Web 服务器目录。
将您的 MP3 文件放入 music/ 文件夹。
确保您的服务器支持 PHP（用于 getmusiclist.php）。
在您的 HTML 页面中引入 player.css 和 player.js。
访问页面：通过您的服务器域名或 IP 访问该 HTML 页面，播放器将自动在底部加载。

场景二：在纯静态环境（如 GitHub Pages）使用

由于纯静态环境无法运行 PHP，需要对播放器进行修改，使用静态的播放列表。

创建静态列表文件：新建一个 music_list.json 文件，内容为您手动整理的歌曲列表。

[
  { "name": "歌曲名称1", "url": "/music/歌曲1.mp3" },
  { "name": "歌曲名称2", "url": "/music/歌曲2.mp3" }
]2.修改播放器源码：打开 player.js 文件，找到 loadPlaylist() 函数，将其中的 fetch('getmusiclist.php') 修改为指向您的静态 JSON 文件
async function loadPlaylist() {
    try {
        const res = await fetch('music_list.json'); // 修改这里
        const data = await res.json();
        if (data && data.music_list) {
            playlist = data.music_list;
        } else if (Array.isArray(data)) {
            playlist = data;
        }
        localStorage.setItem(STORAGE.PLAYLIST, JSON.stringify(playlist));
        return;
    } catch (e) {
        console.error('加载播放列表失败:', e);
    }
    const cached = localStorage.getItem(STORAGE.PLAYLIST);
    if (cached) playlist = JSON.parse(cached);
}

3.部署：将 player.js、player.css、music_list.json 和 music/ 目录一起上传到静态托管服务。

配置与自定义

修改音乐目录路径在 getmusiclist.php 文件开头修改 $musicDir 变量：

$musicDir = DIR . '/你的音乐文件夹路径/';

主题适配 HTML 设置：

<html data-theme="dark">  <!-- 深色主题 -->
<html data-theme="light"> <!-- 浅色主题 -->

JavaScript 动态切换：

document.documentElement.setAttribute('data-theme', 'dark');  // 深色

播放器位置与样式主容器：.global-music-player 展开面板：.player-expanded 迷你播放栏：.player-minimized

常见问题

Q: 播放器没有显示，控制台有错误提示。 A: 常见原因：路径错误、服务器不支持 PHP、跨域问题。 Q: 自动播放不生效。 A: 现代浏览器禁止未经用户交互的自动播放，播放器会提示用户点击页面启动播放。 Q: 播放列表为空。 A: 请检查 music/ 目录是否存在并含有 MP3 文件，PHP 环境是否正常，文件权限是否允许 Web 服务器读取。 document.documentElement.setAttribute('data-theme', 'light'); // 浅色

##开源协议本项目基于 MIT 协议开源，可自由使用、修改和分发

###github仓库 https://github.com/zhouchenya/webPlayer.js

##AIGC

Webplayer.Js一款轻量、美观的Web背景音乐播放器