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

闲鱼茶酱呀 · 2025/06/30

简介

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

功能特性

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

安装使用

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

HTML：

<script src="https://craftblockht6x.github.io/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>

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

相似主题

主题

资源

回复

在线会员

我们重视您的隐私

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

相似主题

主题

资源

回复

在线会员

我们重视您的隐私

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