Як створити секвенсор на JavaScript для синтезу звуку
Створення звукового двигуна з нуля – це ритуал посвяти. Ви бажаєте зрозуміти тактовий генератор. Таймінг. Сиру логіку, яка перетворює тишу на ритм. Секвенсор це і є ця логіка. Це сітка. Ви розміщуєте ноти. Ви рухаєтеся вперед.
Більшість посібників пропускають складну частину. Вони показують бібліотеку. Вони показують графічний інтерфейс. Вони не показують, як обробляти дрейф. Помилки таймінгу, що накопичуються, коли ви вручну відстежуєте час.
Давайте виправимо це.
Ми створюємо базовий покроковий секвенсор. Він працюватиме у простому циклі. Він запускатиме звуки. Він триматиме ритм, не заглядаючи вперед. Цей підхід запобігає «смиканню» відчуття, яке виникає при використанні setTimeout для довгих циклів.
Основна концепція: Покроковий таймінг
Секвенсор працює на кроках. Чи не на секундах. На кроках.
Якщо темп становить 120 ударів на хвилину (BPM), кожна частка триває 0,5 секунди. Якщо ви маєте 16 кроків, кожен крок триває 0,125 секунди. Магія відбувається, коли ви синхронізуєтесь з цими інтервалами.
«Час у секвенсорі не є безперервним потоком. Це серія дискретних подій. Синхронізація із цими подіями — це все».
Нам потрібний спосіб обчислювати, коли відбувається кожен крок. Чи не шляхом вгадування. Шляхом математики.
Налаштування тактового генератора
Вам потрібна точка відліку. Час початку.
У JavaScript Date.now() або performance.now() повертають мілісекунди. Ви використовуєте це для розрахунку дрейфу.
- Визначте темп.
- Розрахуйте тривалість кроку.
- Запустіть цикл.
Ось скелет коду. Він не дуже вродливий. Але він працює.
`
Цей базовий код. Він використовує setTimeout. Він не є ідеальним. Але це початок.
Чому це важливо
Навіщо створювати її самостійно?
Бібліотеки, такі як Tone.js або обгортки для Web Audio API, чудові. Вони обробляють складне планування. Вони компенсують затримку.
Але ви не дізнаєтесь, як вони працюють, просто використовуючи їх. Ви навчаєтесь, бачачи, де вони дають збій.
Коли setTimeout дрейфує, ваш біт вагається. Це звучить по-людськи. Це неправильно звучить.
Обробка дрейфу
Перевірка if (nextStepTime < Date.now()) має критичне значення.
Вона
