构建 Groovie：一款先进的基于 Web 的鼓机 / 节拍音序器

# 构建 Groovie：一款高级网页版鼓机 / 节拍音序器 来源：https://pointersgonewild.com/2026-08-06-building-groovie-an-advanced-web-based-drum-beat-sequencer/ 这是一篇关于我最近几周制作的新音乐应用 Groovie 的博客文章。早在 2012 年，我就构建了 [MusicToy](https://pointersgonewild.com/2012/04/23/musictoy-music-made-simple/)，它是网络上最早的 JavaScript 音乐应用之一。这是一个非常简单的音序器，使用五声音阶和少量采样。它旨在对初学者非常直观。我说它是最早之一的原因在于，这款应用实际上早于 Web Audio API。第一个版本使用了现已长期弃用的 Mozilla Audio Data API。不过有趣的是，MusicToy 允许你在不使用任何后端的情况下分享歌曲。它是一个完全静态的网站，但可以将模式[编码到 URL 的哈希/片段部分](https://maximecb.github.io/MusicToy/#baaaaaaaaaaaaaaibaaaaaaeaaaaaaakaaaaaaafaaaaaaecababaiabicicabeaeeeeciaaciciabaababadaaabaeacjeaababababaaaaaaaaeeeeeeee)（这是一个酷炫但仍旧被低估的网络技巧）。 从那以后，我又创建了几个更高级的网页音乐应用，其中最高级的是 [NoiseCraft](https://pointersgonewild.com/2021/12/05/noisecraft-a-browser-based-visual-programming-language-for-sound-music/)。NoiseCraft 具有带有多个可选模式的音序器节点。然而，用单一长模式构建一首歌曲极其繁琐。我觉得缺少的是将多个模式串联起来的方法，部分原因在于当时我对于如何在用户界面设计上干净利落地实现这一点并不清楚。通过这个项目，我想最终解决这个问题。 Groovie 是一款使用采样并具有许多高级功能的鼓/节拍音序器应用。我构建它是因为我看到了市场中的某种空白。网上有许多鼓机，但大多数都非常基础，带有固定的鼓组和单一模式。有些更高级，但往往充斥着广告或需要付费账户。为数不多的没有这些问题的更高级产品，其用户界面常常令人困惑。Groovie 提供 150 多种可选采样、最多 32 个模式，以及一个允许按时间对多个模式进行排序、并同时播放多个模式的时间线视图。模式可以具有可变长度并产生复合节奏。它还具有低通/高通滤波器、延迟、每采样音量和声像等功能。在做到这一切的同时，它还保持了相当直观的 UI，并采用响应式布局，即使在手机上也可用。最棒的是，它是[开源的](https://github.com/maximecb/groovie)，并且永远免费。 以下是一些示例作品/节拍： - [柏林科技舞曲编排](https://maximecb.github.io/groovie/#a_96_bar_berlin_techno_arrangement/FdAnck8QxEjUoejHv1EvwfEK6CeBmwopEcII9JpEroPEWkq1BNYCSCCGuJfjJXg-IlIsCRaIxHSJy3kypqJbIWInFCJnoAKRACYV6k66nWHiLAkKcUOiNHoJYx8spdj6AiiApQ4MYQYiORhGkyyR7YlJspwJJsWUzW0gmxi1h5BQCgiABSWcUtGvoirKXQx6x8gkTVroJyQDVpJIPpIGD0lvoyQHMeHgCKIFK8SfJ5dlnnng) - [Drill and bass 编排](https://maximecb.github.io/groovie/#a_64_bar_drill_and_bass_arrangement/B9ATI_5htYoCCAImhWOL9cICQhhNTEuGBTQszLjv36cmILUJCQERFJMkCIK1qWpZ-eQCgiBBCRRAjjXAiCRSCAVFZjaWhcFV2e_nsVIbBIiCQkxIJRQiixxLEl4iJICCKCBFyOSZT1ASSGk0JiFx1q0misRcCIgTmdSiU0mRsgG8UlIoZ5wGwIiBCCCgi0YBjCOtVLx8hn4rr77_NYTG6rBEgQESKApNnvpKr_LPLPE4j6kA8Ag2ASR0iZrn2IlYuQflAFNAC5AiCT0VQxEhEz9UsA) - [声像调宽的浩室律动](https://maximecb.github.io/groovie/#a_32_bar_house_groove_panned_wide/BUNDfUOBjgQQR4kZyAh8BDkCAHAQwIJT60SsfbvgRgn6RHH79-4ihH_Fj6AQQRwnEjMLyAh8BK0gQFgeYEEp-JUHmORQAWO5EBWNpBCWBCPFfqSA) - [摇滚乐编排](https://maximecb.github.io/groovie/#a_112_bar_rock_arrangement/JcAs5I75BOEcnF5PXPWob1IAu9Y-XeQRb60FAKK_HJlw-gsY9KGCTvIowJIIHVi8QRbhvILRH5Lky56pH1Cf1fBOTjaljSDMd0eFMxyR8IzF6BGgLcN1AGRD7k8880uQ-YsDB6MWhINBAXkmU4bqARCxTnmMHzBFEAa0J_V6ATkwKZGUt8gkB3vuSHhRDzz5Pk-T5LkXgIpkkkEbxLHMY8A) - [经典的 Amen Break](https://maximecb.github.io/groovie/#the_amen_break/BgBA_MEUQOLAXGGsElCXs4a1qAwaDUHg) - [鼓打贝斯节奏](https://maximecb.github.io/groovie/#a_drum_and_bass_roller/CGBA_UEUQOGFYCACdworVFVTqa7b-LPECCQoBEIEkhxrqBB24h1oAghrDTnpAA) 与 MusicToy 一样，Groovie 完全静态，并将模式和项目直接编码到 URL 的片段部分。然而，它要在该空间中打包更多信息，因为项目最多可以有 32 个模式、可选择的采样，以及可跨越数千步的时间线。因此，我认真地在信息编码方式上下了功夫。我希望将链接总长度限制在 2000 个字符以内，以便在社交媒体平台和消息服务上分享，或者为片段部分预留约 1800 个字符的预算。使用 [base64url](https://base64.guru/standards/base64url) 编码后，每个字符能携带 6 位信息，总共 10,800 位。我觉得这很令人鼓舞，因为根据经验，这么多位实际上可以编码大量信息。  Groovie 链接的结构：静态主机、可读歌曲标题、打包在片段中的项目数据 为了方便，歌曲标题采用仍然人类可读的格式编码，空格替换为下划线，并有意排除 markdown 字符，以避免链接被包含在 markdown 文档中时出现格式错误。Groovie 的编码使用 4 位来写版本号，这意味着有空间增加该数字以添加新功能或改进编码，而不会破坏旧的共享链接。 一个模式，每采样一行，假设长度为 16 步，基本上就是一个网格，可以天真地编码为位图。我说天真，是因为如果你有 32 个采样、长度为 64 步，那已经是 2048 位，意味着只用几个模式且不包含其他数据就会超出 10,800 位的预算。我们还需要为每行编码采样的索引，目前我为此使用 9 位，最多允许 512 个采样。然后，每行还可以有立体声声像、音量和效果发送设置，这些也各需要几位来编码。时间线本身基本上也可以表示为位图，每个模式一行，每个模式可能播放或不播放的位置各占一位。Groovie 使用了一些巧妙的技巧，试图用比原始位图少得多的位数来编码这些信息。 ![模式是开/关步骤的网格，可以天真地表示为位图](https://pointersgone