🔓 不加密版 · 无域名限制 · v1.0.0 — 纯 JS · 零依赖

你的音乐
值得更好的可视化

4 种频谱皮肤、明暗双主题、平滑音量渐变、一行代码嵌入。基于 Web Audio API 的轻量音频播放器。

点击右上角按钮可切换播放器皮肤主题（网页背景保持不变）
4
频谱皮肤
2
明暗主题
0
外部依赖
~12KB
库体积
1
行代码嵌入
功能特性

开箱即用的完整体验

从频谱可视化到主题切换，每个细节都经过打磨

4 种频谱可视化

填充波形、线条波形、渐变柱状、细线柱状。Catmull-Rom 样条插值，5 层渐变叠加渲染。

明暗双主题

自动跟随浏览器颜色方案，也可手动切换。所有 UI 元素均通过 CSS 变量驱动，过渡平滑。

音量平滑渐变

静音/取消静音采用 350ms ease-in-out 缓动，并实时显示音量百分比，音量条与手柄逐帧同步。

一行代码嵌入

引入 JS 文件后，用 data-wf 短代码即可创建播放器。CSS 自动注入，无需额外文件。

完整 JS API

play / pause / switchSkin / setTheme / setVolume / destroy。支持编程式创建与销毁。

皮肤记忆

用户选择的皮肤与主题通过 localStorage 持久化，下次打开自动恢复上次设置。

触摸 + 响应式

支持触摸拖拽进度条与音量条。移动端自动隐藏时间显示与音量条，适配各种屏幕。

自定义主题色

通过 data-accent 自定义播放按钮、进度条、音量条的主题色，轻松融入你的品牌。

加载进度可视化

未播放时显示频谱样式的加载进度条与百分比；播放时展示真实音频频谱，加载完成自动消失。

皮肤展示

4 种频谱可视化皮肤

每种皮肤拥有独特的主题色与频谱配色方案，点击频谱区域即可播放

波形 1 — 填充频谱 wave1
波形 2 — 线条频谱 wave2
柱状 1 — 渐变柱 bars1
柱状 2 — 细线 bars2
明暗主题

同一播放器，两种气质

下方两个播放器被锁定为固定主题，用于直观对比；页面右上角按钮可切换其余播放器的皮肤

深色主题（固定）
浅色主题（固定）

注：网页背景始终保持不变，主题切换仅改变播放器皮肤。

自定义配色

一键换色，融入品牌

选择预设色或自定义颜色，实时预览效果

<!-- 自定义主题色 --> <div data-wf data-src="audio.mp3" data-skin="wave1" data-accent="#f70c3e"></div>
JS API

编程式控制

通过返回的实例对象，完整控制播放器的每一个行为

// 创建播放器实例 var player = WFPlayer.create('#container', { src: 'audio.mp3', skin: 'wave1', theme: 'auto' }); // 播放控制 player.play(); // 播放 player.pause(); // 暂停 player.toggle(); // 切换播放/暂停 // 音量控制（调节时显示百分比） player.setVolume(0.5); // 设置音量 (0~1) player.getVolume(); // 获取当前音量 // 皮肤与主题 player.switchSkin('bars1'); // 切换皮肤 player.getSkin(); // 获取当前皮肤 player.setTheme('light'); // 切换主题 player.getTheme(); // 获取当前主题 // 销毁 player.destroy(); // 清理资源
快速开始

3 步集成

从引入到使用，不到 1 分钟

步骤 1 — 引入库文件（页面只需一次） <script src="wuyifan-player.js"></script> 提示：开发/不加密版用 wuyifan-player.js（任何域名可运行）；交付/加密版用 wuyifan-player.min.js（域名锁定） 步骤 2 — 在需要播放器的位置写短代码 <div data-wf data-src="你的音频.mp3" data-skin="wave1"></div> 步骤 3 — 完成！页面加载后自动初始化 — 如需皮肤切换栏：加 data-switcher — 如需明暗切换按钮：加 data-theme-toggle — 如需自定义颜色：加 data-accent="#ff6600" — 如需强制主题：加 data-theme="dark" — 如需 JS 控制：用 WFPlayer.create() 创建实例

手机扫码预览

用手机相机或微信「扫一扫」，在手机浏览器打开本页