Эксперименты и прогресс


Контекст

В рамках этой заметки я собираюсь углубиться в некоторые моменты, которые я понял в процессе экспериментов с идеей кодированных музыкальных синтезаторов. Я создал относительно простой аудиосинтезатор, используя Web Audio API, и в последующих постах буду развивать свой синтезатор по мере совершенствования его интерфейса и функций.

Чтобы получить представление о том, что я буду обсуждать,

вот как выглядит синтезатор, который я создал на данный момент!


Цель

Моя основная цель при изучении этого проекта — использовать знания HTML, CSS и JavaScript для создания функционального синтезатора, а также определить, какие параметры и отображения я могу добавить к нему, чтобы создать

эпический инструмент для создания алгоритмического звука.

Этот синтезатор использует осциллятор в качестве источника звука, о чем я кратко расскажу ниже.


Вдохновение

Большую часть вдохновения я черпаю из синтезатора Sonic Pi, созданного замечательным Сэмом Аароном. Эта программа бесплатна для всех желающих!

Sonic Pi — это невероятная программа на основе Ruby, в которой вы можете создавать функции для создания звуков и манипулировать ими перед живой аудиторией, и Сэм создал очень подробное руководство по ее использованию.

На фото ниже — фотография программы и немного кода, который я ввел в нее, чтобы создать базовый техно-бит.


Намерение

По мере того, как я буду продолжать работать над этим проектом, он будет развиваться в плане его работы и функционирования, поскольку моя основная цель — интегрировать контейнер для кода, который будет генерироваться и отображаться по мере настройки некоторых параметров синтезатора.

Я очень ценю то, что Sonic Pi может предложить своим пользователям, и действительно просто хочу привлечь больше внимания к «алгорайтингу».

Этот пост служит для того, чтобы в основном углубиться в некоторые из кодов, которые я создал с моим начинающим пониманием JavaScript, и я надеюсь, что по мере продолжения работы над этим и другими связанными проектами, я смогу показать навыки, которые я использую по мере того, как я (надеюсь) становлюсь лучшим кодером.

Базовая основа для создания модульного синтезатора должна включать в себя главный регулятор громкости, и я создал его с помощью переменной JS:

const masterVolume = context.createGain();
masterVolume.connect(context.destination);
Вход в полноэкранный режим Выйти из полноэкранного режима

Хотя я собираюсь затронуть тему осциллятора только для простоты (поскольку в этом посте я не обсуждаю свое назначение нот), я приведу общее определение того, что такое осциллятор.

Электронный осциллятор — это электронная схема, которая производит периодический, осциллирующий электронный сигнал, часто синусоидальный, квадратный или треугольный.

Чтобы добавить осциллятор к источнику звука, я создал эту переменную, а также связал ее с переменной громкости в коде выше.


const oscillator = context.createOscillator();
oscillator.frequency.setValueAtTime(220, 0);
oscillator.connect(masterVolume);
Вход в полноэкранный режим Выход из полноэкранного режима

ASDR

В звуке и музыке огибающая описывает, как звук изменяется во времени, и по сути является амплитудным эффектом, обычно состоящим из 4 значений: (A)ttack time, (D)ecay time, (S)ustain level и (R)elease time, или ADSR.

Это четыре основных элемента управления огибающей. Именно огибающие делают звук коротким и резким, а также позволяют приглушать и затухать звук.


Вот наглядный пример, который может упростить эту концепцию.

В своем коде я использовал JavaScript для создания этих переменных для вызова синтезатора.

В Web Audio API нет встроенной огибающей, но можно имитировать тот же эффект с помощью узлов усиления. Вот код, который я использовал для установки начальных параметров звуковой огибающей.


// Envelope
let attackTime = 0.3;
let sustainLevel = 0.8;
let releaseTime = 0.3;
let noteLength = 1;

const attackControl = document.querySelector('#attack-control');
const releaseControl = document.querySelector('#release-control');
const noteLengthControl = document.querySelector('#note-length-control'):
Войти в полноэкранный режим Выход из полноэкранного режима

В синтезаторе, который я создал, я включил три интерактивных уровня, которые позволяют пользователю регулировать диапазон параметров Attack, Release и Note Length.

Приведенные ниже слушатели событий позволяют регистрировать выбранные пользователем уровни как значения, которые могут значительно изменить динамику выбранного осциллятора.


attackControl.addEventListener('input', function() {
  attackTime = Number(this.value);
});

releaseControl.addEventListener('input', function() {
  releaseTime = Number(this.value);
});

noteLengthControl.addEventListener('input', function() {
  noteLength = Number(this.value);
});
Вход в полноэкранный режим Выход из полноэкранного режима

Заключение

Возможно, мне имело смысл написать этот пост о том, как были реализованы звуки для воспроизведения синтезатором, но я думаю, что это было бы более уместно для более глубокого поста, слегка касающегося теории музыки и некоторых способов, которыми Sonic Pi также генерирует ноты из чисел.

Хотя я только несколько недель на пути к JavaScript, я с нетерпением жду возможности лучше понять его, создавая и внося свой вклад в проекты в рамках школьной программы кодирования в Flatiron School, а также в личные проекты, над которыми я непрерывно работаю в свободное время.

Если вы заинтересованы в самостоятельном изучении Web Audio API,

вы можете изучить документацию здесь.

ʕっ- ᴥ — ʔっ Спасибо, что читаете!

Оцените статью
devanswers.ru
Добавить комментарий