【开源】WPwebplayer——简洁通用的网页播放器
2025-08-09
本文章非站长本人撰写，由他人Pr添加： https://github.com/afoim/fuwari/pull/23
WPWebPlayer（html网站播放组件）
一款简单，简洁，轻量的网站音乐播放器 体验界面
项目文章（博客） | 体验界面 | NPM包（前端资源）
项目特性：
- 简约：仅需引入css与js文件，统一使用
<wp-music-player>标签 - 简单：无更多冗杂功能，回归最基础的【网站音乐播放】
- 可控性强：支持多个自定义参数，播放功能 ui颜色均可自定义
- 易于集成：可用于任何html项目中
使用方式：
- 在
<head>标签中引入css与js文件
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wpwebplayer@1.1.5/min-css.css">
<script src="https://cdn.jsdelivr.net/npm/wpwebplayer@1.1.5/min-js.js"></script>
- 在
<body>中使用<wp-music-player>标签
<wp-music-player
src=""
title=""
artist=""
cover=""
autoplay="true"
loop="true"
volume="0.3"
fixed="true"
mini="true"
theme="#ff6b6b">
</wp-music-player>
（代码示例请前往example.html)
参数说明
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
src | string | 无 | 音频文件地址（必须） |
title | string | 无 | 音乐标题 |
artist | string | 无 | 作者 |
cover | string | 无 | 封面图片URL |
autoplay | true / false | false | 是否自动播放 |
loop | true / false | true | 是否循环播放 |
volume | number (0~1) | 1.0 | 初始音量（0~1） |
fixed | true / false | true | 是否固定样式 |
mini | true / false | true | 是否迷你模式 |
theme | string（色值） | #00c3ff | 主题颜色 |
说明
- src&cover：均需将图片上传至图床并引用
- autoplay：参数失效 浏览器安全策略禁止未经允许的音频自动播放Chrome 中的自动播放政策（需要用户手动操作后才能播放）
- volume： 0~1 的小数值，代表 0%~100% 的音量大小
- fixed：使播放器始终固定在页脚，不会因页面滚动产生的相对位置变化影响播放器实际位置（默认为 true）
- mini：“迷你模式”和“完整模式”切换 完整模式支持更多功能（有bug 还没修）
- theme：主题颜色 默认为#00c3ff
特别鸣谢
@MarSeventh 叁月柒大佬，在开发过程中提供宝贵帮助，解决数个关键bug
标签： Web