进来白嫖，网页端音乐播放器，即拿即用

闲鱼茶酱呀 7小时前

17 0

## 简介

这是一个轻量级的网页音乐播放器插件，可以固定在页面底部，提供基本的音乐播放控制功能。播放器具有美观的UI设计，支持响应式布局，适合集成到各种网页项目中。

## 功能特性

- 🎵 播放/暂停、上一首、下一首控制
- ⏳ 进度条显示和拖动控制
- 🔊 音量调节
- 📋 播放列表选择
- 🎨 美观的渐变UI设计
- 📱 移动设备适配
- 🚀 简单的API接口

## 安装使用

1. 将 `server_music_player.js` 文件引入到你的网页中：

```html
<script src="server_music_player.js"></script>
```

2. 确保页面加载了Font Awesome图标库（插件会自动添加）

3. 初始化播放列表：

```javascript
// 设置播放列表
window.serverMusicList = [
{
name: "歌曲名称",
artist: "艺术家",
url: "音乐文件URL"
},
// 更多歌曲...
];

// 或者使用API设置
ServerMusicPlayer.setPlaylist([
{
name: "另一首歌",
artist: "另一位艺术家",
url: "音乐文件URL"
}
]);
```

## API接口

插件提供了一个简单的API接口：

```javascript
// 设置播放列表
ServerMusicPlayer.setPlaylist([
{
name: "歌曲名称", // 必填
artist: "艺术家", // 必填
url: "音乐文件URL" // 必填
}
]);
```

## 自定义样式

播放器的所有样式都封装在 `.server_music_player` 命名空间下，你可以通过CSS覆盖默认样式来自定义外观。

## 浏览器支持

- 现代浏览器（Chrome, Firefox, Safari, Edge）
- 移动端浏览器

## 注意事项

1. 确保音乐文件URL是可访问的
2. 播放器默认使用Font Awesome 6图标，需要网络连接
3. 如需离线使用，请自行引入Font Awesome

## 示例

```html
<!DOCTYPE html>
<html>
<head>
<title>音乐播放器示例</title>
<script src="server_music_player.js"></script>
</head>
<body>
<script>
// 设置播放列表
ServerMusicPlayer.setPlaylist([
{
name: "示例歌曲",
artist: "示例艺术家",
url: "https://example.com/music.mp3"
}
]);
</script>
</body>
</html>
```