面向网页的高性能 2D 渲染库，基于 WebGL 和 WebGPU 绘制图形、精灵与文本。
4.8万5105TypeScriptMIT更新于 3天前
- Star
- 1,972
- Fork
- 171
- 未关闭 Issue
- 24
- 最近提交
- 6个月前
这是什么？
Butterchurn 是一个 JavaScript 库，基于 WebGL 重新实现了 Milkdrop 音乐可视化器，让 Milkdrop 风格的视觉效果可以在现代浏览器中运行。它通过 Web Audio API 获取音频数据，并将动画帧渲染到 HTML canvas 上。
开发者只需创建带 canvas 和音频上下文的可视化器，连接来自音源或麦克风的音频节点，再加载预设即可。预设之间可以设定过渡秒数，渲染尺寸也可以随时调整。配套的 butterchurn-presets 包提供了一批现成预设。
由于依赖 WebGL 2，库中附带了一个小工具用于检测当前浏览器是否支持。Webamp 等音乐播放器已集成该库。
核心功能
- 01在浏览器中基于 WebGL 渲染 Milkdrop 预设。
- 02通过 Web Audio API 接收音频输入。
- 03预设之间可按指定秒数平滑过渡。
- 04运行时可调整渲染器尺寸。
- 05提供独立的预设合集包 butterchurn-presets。
- 06内置 WebGL 2 支持检测工具。
适用场景
- 为网页音乐播放器添加音乐可视化效果。
- 为网页或浏览器扩展中的音频提供可视化。
- 在浏览器中构建现场音乐或卡拉 OK 显示界面。
- 在 Web 应用中试用和调试 Milkdrop 预设。
快速上手
- 1
使用 npm 安装软件包
npm install butterchurn butterchurn-presets - 2
在画布上基于音频上下文创建可视化器
- 3
加载预设并渲染帧
使用前须知
- 需要支持 WebGL 2 的浏览器。
标签
常见问题
- butterchurn 是什么？
- 基于 WebGL 重新实现的经典 Milkdrop 音乐可视化器，可在浏览器中播放 Milkdrop 预设效果。 Butterchurn 是一个 JavaScript 库，基于 WebGL 重新实现了 Milkdrop 音乐可视化器，让 Milkdrop 风格的视觉效果可以在现代浏览器中运行。它通过 Web Audio API 获取音频数据，并将动画帧渲染到 HTML canvas 上。
- butterchurn 可以免费使用吗？用的什么许可证？
- butterchurn 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
- butterchurn 还在维护吗？
- 超过半年未提交。butterchurn 最近一次提交是在 2026年4月20日。
- butterchurn 适合用来做什么？
- 为网页音乐播放器添加音乐可视化效果。 为网页或浏览器扩展中的音频提供可视化。 在浏览器中构建现场音乐或卡拉 OK 显示界面。 在 Web 应用中试用和调试 Milkdrop 预设。
- butterchurn 怎么安装和运行？
- 使用 npm 安装软件包: npm install butterchurn butterchurn-presets 在画布上基于音频上下文创建可视化器 加载预设并渲染帧
- 在哪里获取 butterchurn？
- 源代码和安装说明在 GitHub 上：https://github.com/jberg/butterchurn
概要由 AI 根据项目 README 生成；GitHub 数据每日更新。
相关项目
一个 Claude 智能体技能，可生成可交互的等距 SVG 图解，用真实机械与系统解释技术概念。
1.7万1295JavaScriptMIT更新于 前天
GPU.js 可将简单的 JavaScript 函数转译为 GPU 着色器代码，在浏览器和 Node.js 中加速计算，无 GPU 时回退到普通 JavaScript。
1.6万666JavaScriptMIT更新于 15天前
将 JavaScript 代码转换为 SVG 流程图的库与命令行工具，支持抽象层级、代码块修饰和主题定制。
7105478JavaScriptMIT更新于 3年前
一个小型同步渲染器，把 Mermaid 图表文本渲染为 SVG，无运行时依赖。
255977TypeScriptOther更新于 20小时前
纯前端户型装修工具，可在 2D 平面图上布置家具、拆改墙体，并一键切换到 3D 场景查看。
2479472HTMLMIT更新于 19天前