Building a Browser-Based Drum Machine: Web Audio API Deep Dive

Будівництво браузерної барабанної машини: глибоке занурення в Web Audio API

https://zovo.one/free-tools/drum-machine/

Web Audio API — один з найпотужніших та найменш зрозумілих браузерних API. Він може синтезувати звуки, обробляти аудіо в реальному часі та підтримувати таймінг з точністю до зразка. Будівництво барабанної машини дає навички, які застосовуються до будь-якого аудіопрограми в браузері.

Навіщо існує Web Audio API

До Web Audio API аудіо у браузері обмежувалося елементом <audio>. Можна було програти файл. Все інше — неможливо. Жодного точного таймінгу, жодного шарування, жодних ефектів, жодного синтезу.

Web Audio API надає модульну маршрутизаційну графіку, де звукові джерела з’єднуються через оброблювальні вузли до призначення (ваші динаміки). Подумайте про це як ланцюг сигналу у звукозаписній студії.

const ctx = new AudioContext();

// Source -> Gain -> Destination
const source = ctx.createBufferSource();
const gain = ctx.createGain();

source.connect(gain);
gain.connect(ctx.destination);

Таймінг — це все

Фундаментальна проблема барабанної машини — точний таймінг. Використання setInterval або setTimeout для синхронізації музичних подій не працює, оскільки цикл подій JavaScript дає приблизну точність від 4 до 16 мс. За 120 BPM пів ноті відповідає 125 мс. Швидке коливання в 16 мс є помітним як «неохайний» ритм.

Web Audio API вирішує це за допомогою власного високоточого годинника (ctx.currentTime), що працює на аудіопотоку й незалежний від основного потоку JavaScript.

Патерн — це «попереджувальний» планувальник:

const LOOKAHEAD = 25; // ms to look ahead
const SCHEDULE_AHEAD = 0.1; // seconds to schedule in advance

let nextNoteTime = 0;
let currentStep = 0;

function scheduler() {
  while (nextNoteTime < ctx.currentTime + SCHEDULE_AHEAD) {
    scheduleNote(currentStep, nextNoteTime);
    advanceStep();
  }
  setTimeout(scheduler, LOOKAHEAD);
}

Планувальник виконується кожні 25 мс (за допомогою нечіткого часу setTimeout) і розкладає ноти, використовуючи точний ctx.currentTime. За умови, що вікно попереднього планування більше за затримку setTimeout, кожна нота планується з таймінгом з точністю до зразку.

Завантаження та відтворення зразків

Барабанні машини використовують записані зразки (kick, snare, hi-hat тощо). Завантажуйте їх як AudioBuffers:

async function loadSample(url) {
  const response = await fetch(url);
  const arrayBuffer = await response.arrayBuffer();
  return ctx.decodeAudioData(arrayBuffer);
}

function playSample(buffer, time) {
  const source = ctx.createBufferSource();
  source.buffer = buffer;
  source.connect(ctx.destination);
  source.start(time);
}

Кожен createBufferSource() використовується лише однеразово. Ви не можете повторно відтворити вузол джерела; створюйте новий кожного разу. Це виглядає неефективно, але це задумано — браузер оптимізує це всередині.

Патерн послідовника кроків

Зазвичай барабанна машина має 16 кроків (одна тактова тактівка з чвертними нотами у 4/4). У кожному інструменті — ряд з 16 кнопок. Якщо кнопка активна, зразок відтворюється на цьому кроці.

const pattern = {
  kick:  [1,0,0,0, 1,0,0,0, 1,0,0,0, 1,0,0,0],
  snare: [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,0],
  hihat: [1,0,1,0, 1,0,1,0, 1,0,1,0, 1,0,1,0],
};

function scheduleNote(step, time) {
  for (const [instrument, steps] of Object.entries(pattern)) {
    if (steps[step]) {
      playSample(samples[instrument], time);
    }
  }
}

Додавання відчуття

Ідеально квантований ритм звучить роботизовано. Реальні барабанщики мають мікро-варіації в таймінгу та динаміці. Додайте людське відчуття, вводячи малі випадкові варіації:

function humanize(time, amount = 0.01) {
  return time + (Math.random() - 0.5) * amount;
}

function playWithVelocity(buffer, time, velocity) {
  const source = ctx.createBufferSource();
  const gain = ctx.createGain();
  gain.gain.value = velocity;
  source.buffer = buffer;
  source.connect(gain);
  gain.connect(ctx.destination);
  source.start(time);
}

Вісаційні варіації динаміки +/- 20% та варіації таймінгу +/- 10 мс створюють помітне покращення відчуття без звучання як «неохайно».

Інструмент

Для готової до використання браузерної барабанної машини з попередньо встановленими патернами, регульованою темпою та кількома видами звуківчаників, я зробив одну на zovo.one/free-tools/drum-machine. Вона реалізує всі описані вище патерни з візуальним інтерфейсом послідовності кроків.

Я — Майкл Ліп. Я створюю безкоштовні інструменти для розробників на zovo.one. 500+ інструментів, все приватне, все безкоштовне.

HI-FI News

через DEV Community: javascript https://ift.tt/9aq0gIZ

25 березня 2026 р. о 03:40 ранку

March 25, 2026 at 03:40AM