构建 Groovie：一款高级网页鼓机与节拍音序器
来源：pointersgonewild.com — 2026-08-06
📋 概述
作者在 2012 年构建了最早期的网页音乐应用 MusicToy（早于 Web Audio API），如今基于多年经验做出更先进的网页鼓机 Groovie。它拥有 150+ 采样、最多 32 个 pattern、可在时间线上编排多个 pattern、支持多 pattern 同时播放、变长 pattern 制造复节奏，还带高低通滤波、延迟、每采样音量与声像。像 MusicToy 一样，Groovie 完全静态，把整个项目编码进 URL 的 fragment 部分，目标把链接压到 2000 字符以内以便分享。作者详细介绍了如何用 base64url、可变长前缀编码、以及针对 pattern 的重复/稀疏/复用等编码策略，把海量信息压进 10800 比特的预算。
🔑 核心要点
- Groovie 拥有 150+ 采样、最多 32 个 pattern、时间线视图，能同时编排和播放多个 pattern，并支持变长 pattern 制造复节奏。
- 作为纯静态网站，它把整个项目编码进 URL 的 fragment 部分，目标是让分享链接不超 2000 字符。
- 用 base64url 每个字符携带 6 比特，总共约 10800 比特的编码预算，需容纳 pattern、采样索引、声像、音量与时间线。
- 针对 pattern 的重复、稀疏和跨 pattern 复用特点，每行用几个比特在8 种编码策略间选择（可变长前缀码），加上字面量位图回退。
- 作者用编码助手构建了约十几首歌的语料库和度量脚本作为基准，验证优化是否有效。
💡 金句
以 base64url 编码，每个字符留给我们 6 比特信息，总共 10800 比特——而凭经验我知道，这点比特其实能塞进很多东西。
👍 0
👎 0
← 返回 Lobsters 首页