Web Audio API — це повноцінний рушій синтезу: осцилятори, фільтри,
обвідні, згорткова реверберація та точна синхронізація. Цей урок будує
генератор алгоритмічної музики: тактовий генератор темпу, секвенсор з
урахуванням ладу, простий синтезаторний патч з ADSR та рушій акордових
послідовностей.
1Утиліти для висоти тону та ладів
// MIDI-нота → частота в Гц const mtof = note => 440 * Math.pow(2,
(note - 69) / 12); // Поширені лади як інтервали в півтонах від тоніки
const SCALES = { major: [0, 2, 4, 5, 7, 9, 11], minor: [0, 2, 3, 5, 7,
8, 10], pentatonic: [0, 2, 4, 7, 9], blues: [0, 3, 5, 6, 7, 10],
dorian: [0, 2, 3, 5, 7, 9, 10], }; // Будуємо всі ноти ладу
в N октавах function buildScale(root = 60, scaleName = 'minor',
octaves = 3) { const intervals = SCALES[scaleName]; const notes = [];
for (let oct = 0; oct < octaves; oct++) { for (const interval of
intervals) { notes.push(root + oct * 12 + interval); } } return notes;
} const palette = buildScale(48, 'pentatonic', 3); // → [48, 50, 52,
55, 57, 60, 62, 64, 67, 69, 72, 74, 76, 79, 81]
Web Audio API має точну до семпла синхронізацію, але
setInterval «смикається». Розв'яжіть це за допомогою
планувальника з випередженням: викликайте JS-колбек
кожні 25 мс, але плануйте ноти на 100 мс уперед:
const BPM = 120; const BEAT = 60 / BPM; // секунд на долю const LOOK
= 0.1; // вікно випередження (с) const TICK = 25; // інтервал планувальника
(мс) let nextNoteTime = 0; let currentBeat = 0; let timerID = null;
let playing = false; let onBeat = null; // колбек: (beat, time) =>
void function scheduler() { while (nextNoteTime < audio.currentTime
+ LOOK) { if (onBeat) onBeat(currentBeat, nextNoteTime); nextNoteTime
+= BEAT; currentBeat = (currentBeat + 1) % 32; } timerID =
setTimeout(scheduler, TICK); } function startClock() { if (playing)
return; audio.resume(); nextNoteTime = audio.currentTime + 0.05;
currentBeat = 0; playing = true; scheduler(); } function stopClock() {
clearTimeout(timerID); playing = false; }
Цей шаблон узято з канонічної статті Кріса Вілсона про синхронізацію
Web Audio. Планувальник ніколи не дрейфує, бо ви завжди плануєте
відносноaudio.currentTime, а не реального часу.
4Секвенсор мелодії з урахуванням ладу
const notes = buildScale(48, 'pentatonic', 2); // Випадкове блукання: рух
на ±1-2 кроки в ладу з переходом через край let pos = Math.floor(notes.length / 2);
function nextMelodyNote() { const step = Math.random() < 0.7 ?
(Math.random() < 0.5 ? 1 : -1) // найчастіше малий крок :
(Math.random() < 0.5 ? 2 : -2); // зрідка стрибок pos =
Math.max(0, Math.min(notes.length - 1, pos + step)); return
notes[pos]; } // Ймовірність пауз на долю const REST_PROB = 0.15;
onBeat = (beat, time) => { if (Math.random() < REST_PROB) return;
const midi = nextMelodyNote(); const freq = mtof(midi); const dur =
BEAT * (Math.random() < 0.3 ? 2 : 1); // деякі ноти витримуються
playNote(freq, time, dur * 0.9, { attack: 0.01, decay: 0.08, sustain:
0.5, release: 0.15 }); };
5Акордові послідовності
// I-VI-IV-V у до мінорі (MIDI-тоніка 60) const PROGRESSIONS = {
'i-VI-III-VII': [[0,3,7], [8,11,3], [3,7,10], [10,1,5]], 'i-iv-v-i':
[[0,3,7], [5,8,0], [7,11,2], [0,3,7]], }; const PROG =
PROGRESSIONS['i-VI-III-VII']; let chordIndex = 0; function
playChord(root, intervals, time) { for (const interval of intervals) {
const freq = mtof(root + interval); playNote(freq, time, BEAT * 4, {
attack: 0.08, decay: 0.2, sustain: 0.4, release: 0.8 }); } } // Змінюємо
акорд кожні 4 долі onBeat = (beat, time) => { if (beat % 4 === 0) {
playChord(48, PROG[chordIndex % PROG.length], time); chordIndex++; }
// Мелодія звучить зверху if (Math.random() > 0.15) {
playNote(mtof(nextMelodyNote()), time, BEAT * 0.85); } };
Реверберація на основі імпульсної характеристики (convolverNode),
створена зі синтетичного шуму, звучить напрочуд природно. Для реальних
приміщень завантажте записаний файл IR за допомогою
fetch + decodeAudioData.
Часті запитання
Чого я навчуся в цьому уроці?
Генеруйте алгоритмічну музику в браузері за допомогою осциляторів Web Audio API, секвенсорів, акордових послідовностей та базових синтезаторних патчів.
Які теми розглядаються в цьому уроці?
Цей урок охоплює такі теми: Утиліти для висоти тону та ладів, Синтезаторний патч ADSR, Точний генератор з плануванням з випередженням, Секвенсор мелодії з урахуванням ладу, Акордові послідовності, Реверберація та ефекти.
Які інструменти й технології використовуються?
Цей урок використовує: Web Audio API, Синтез, Алгоритмічна композиція.