Как сделать синтезатор из клавиатуры

Обновлено: 21.11.2024

В этой статье представлен код и рабочая демонстрация видеоклавиатуры, на которой можно играть с помощью мыши. Клавиатура позволяет переключаться между стандартными волновыми формами, а также одной пользовательской волновой формой, и вы можете управлять основным усилением с помощью ползунка громкости под клавиатурой. В этом примере используются следующие интерфейсы веб-API: AudioContext , OscillatorNode , PeriodicWave и GainNode .

Поскольку OscillatorNode основан на AudioScheduledSourceNode , это также в некоторой степени пример для этого.

Видеоклавиатура

Дисплей виртуальной клавиатуры состоит из трех основных компонентов. Во-первых, это сама музыкальная клавиатура. Мы рисуем это в паре вложенных

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

Клавиатура

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

с именем «контейнер» — это прокручиваемый блок, который позволяет прокручивать клавиатуру по горизонтали, если он слишком широк для доступного пространства. Сами клавиши будут вставлены в блок класса "клавиатура".

Панель настроек

Под клавиатурой мы поместим некоторые элементы управления для настройки слоя. На данный момент у нас будет два элемента управления: один для установки основной громкости, а другой для выбора периодической формы волны, которую следует использовать при создании нот.

Регулятор громкости

Сначала мы создаем

чтобы содержать панель настроек, чтобы ее можно было стилизовать по мере необходимости. Затем мы устанавливаем поле, которое будет представлено в левой части панели, и размещаем метку и элемент типа «диапазон». Элемент диапазона обычно представлен в виде ползунка; мы настраиваем его, чтобы разрешить любое значение от 0,0 до 1,0 с шагом 0,01 в каждой позиции.

Мы указываем значение по умолчанию 0,5 и предоставляем элемент, который связан с диапазоном, используя атрибут имени, чтобы найти список опций, идентификатор которого соответствует; в этом случае набор данных называется «volume». Это позволяет нам предоставлять набор общих значений и специальных строк, которые браузер может отображать тем или иным образом; мы предоставляем имена для значений 0,0 ("Без звука") и 1,0 ("100%").

Выбор формы сигнала

В правой части панели настроек мы размещаем метку и элемент с именем "форма волны", параметры которого соответствуют доступным формам волны.

JavaScript

Код JavaScript начинается с инициализации ряда переменных.

audioContext указывает на глобальный объект AudioContext (или webkitAudioContext, если необходимо).
oscList готов содержать список всех воспроизводимых в данный момент осцилляторов. Он начинается пустым, так как пока никто не играет.
mainGainNode имеет значение null; во время процесса настройки он будет настроен так, чтобы содержать GainNode, к которому будут подключаться и воспроизводиться все воспроизводящие осцилляторы, чтобы можно было контролировать общую громкость с помощью одного ползунка.

Ссылки на элементы, к которым нам понадобится доступ, получены:

keyboard — это элемент-контейнер, в который будут помещены клавиши.
wavePicker — это элемент, используемый для выбора формы волны для заметок.
volumeControl – это элемент (типа "range"), используемый для управления громкостью основного звука.

Наконец, создаются глобальные переменные, которые будут использоваться при построении сигналов:

noteFreq будет массивом массивов; каждый массив представляет одну октаву, каждая из которых содержит одну запись для каждой ноты в этой октаве. Значением каждого из них является частота в герцах тона ноты.
customWaveform будет настроен как PeriodicWave, описывающий форму волны, которая будет использоваться, когда пользователь выбирает "Пользовательский" в средстве выбора формы волны.
sineTerms и cosineTerms будут использоваться для хранения данных для генерации сигнала; каждый будет содержать массив, созданный, когда пользователь выбирает "Пользовательский".

Создание таблицы заметок

<р>. несколько октав не показаны для краткости.

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

Создание клавиатуры

Функция setup() отвечает за создание клавиатуры и подготовку приложения к воспроизведению музыки.

Таблица, которая сопоставляет названия нот и октавы с их частотами, создается вызовом createNoteTable() .
Установлен обработчик событий (путем вызова нашего старого знакомого addEventListener() для обработки событий изменения основного регулятора усиления.Это обновит громкость основного узла усиления до нового значения элемента управления.
Затем мы перебираем каждую октаву в таблице частот нот. Для каждой октавы мы используем Object.entries(), чтобы получить список нот в этой октаве.
Создайте

Создание ключа

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

После создания элементов, которые будут представлять ключ и его метку, мы настраиваем элемент ключа, задавая для его класса значение "key" (что определяет его внешний вид). Затем мы добавляем атрибуты data-*, которые содержат октаву клавиши (атрибут data-octave), строку, представляющую ноту для воспроизведения (атрибут data-note) и частоту (атрибут data-frequency) в герцах. Это позволит нам легко получать эту информацию по мере необходимости при обработке событий.

Создание музыки

Воспроизведение мелодии

Задачей функции playTone() является воспроизведение тона на заданной частоте. Это будет использоваться обработчиком событий, запускающих клавиши на клавиатуре, чтобы начать воспроизведение соответствующих нот.

playTone() начинает с создания нового OscillatorNode путем вызова метода BaseAudioContext.createOscillator(). Затем мы подключаем его к основному узлу усиления, вызывая метод OscillatorNode.connect() нового осциллятора, который сообщает осциллятору, куда направить его выходной сигнал. При этом изменение усиления основного узла усиления повлияет на громкость всех генерируемых тонов.

Затем мы получаем тип используемой формы волны, проверяя значение элемента управления выбора формы волны на панели настроек. Если пользователь установил для него значение «custom», мы вызываем OscillatorNode.setPeriodicWave(), чтобы настроить осциллятор на использование нашей пользовательской формы волны. Это автоматически установит тип осциллятора на пользовательский. Если в средстве выбора волны выбран любой другой тип формы волны, мы устанавливаем тип осциллятора на значение средства выбора; это значение будет синусоидальным, квадратным, треугольным или пилообразным.

Частота генератора устанавливается на значение, указанное в параметре freq, путем установки значения объекта Oscillator.frequency AudioParam. Затем, наконец, запускается осциллятор, который начинает воспроизводить звук, вызывая унаследованный от осциллятора метод AudioScheduledSourceNode.start().

Воспроизведение мелодии

Когда на клавише происходит событие mousedown или mouseover, мы хотим начать воспроизведение соответствующей ноты. В качестве обработчика этих событий используется функция notePressed().

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

Если кнопка мыши на самом деле нажата, мы получаем атрибут набора данных нажатой клавиши; это упрощает доступ к пользовательским атрибутам данных элемента. Ищем атрибут data-pressed; если его нет (что указывает на то, что нота еще не воспроизводится), мы вызываем playTone(), чтобы начать воспроизведение ноты, передавая значение атрибута data-frequency элемента. Возвращенный осциллятор сохраняется в oscList для дальнейшего использования, а для параметра data-press установлено значение yes, чтобы указать, что нота воспроизводится, поэтому мы не запускаем его снова при следующем вызове.

Остановка звукового сигнала

Функция noteReleased() — это обработчик событий, вызываемый, когда пользователь отпускает кнопку мыши или перемещает мышь за пределы воспроизводимой в данный момент клавиши.

noteReleased() использует настраиваемые атрибуты data-octave и data-note для поиска генератора клавиши, а затем вызывает унаследованный метод stop() генератора, чтобы остановить воспроизведение ноты. Наконец, запись oscList для заметки очищается, а атрибут data-pressed удаляется из элемента key (как указано в event.target ), чтобы указать, что заметка в данный момент не воспроизводится.

Изменение основной громкости

Ползунок громкости на панели настроек обеспечивает простой интерфейс для изменения значения усиления на основном узле усиления, тем самым изменяя громкость всех воспроизводимых нот. Метод changeVolume() является обработчиком события изменения ползунка.

Это устанавливает значение усиления AudioParam основного узла усиления в новое значение ползунка.

Результат

В результате получается простая, но работающая музыкальная клавиатура типа «укажи и щелкни»:

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

Все, что требуется, — это Arduino, пьезоизлучатель, семь кнопок и соединительные кабели. Для достижения наилучших результатов смонтируйте кнопки и кабели на макетной плате. Вам также понадобится библиотека Tone с GitHub и код, который находится на странице проекта.

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

Верно: в октаве 12 нот, а в этом проекте их всего семь! Не волнуйтесь, так как в библиотеке Tone есть диезы и бемоли. Все дело в адаптации существующего кода проекта для учета этих заметок. Да, и места для дополнительных пяти кнопок хватит!

После того, как вы закончите, вы сможете найти несколько простых мелодий для воспроизведения. Но зачем останавливаться на достигнутом? Возможно, вы помните, что недавно мы представили несколько проектов синтезаторов на основе Raspberry Pi, и, конечно же, есть несколько способов получить потрясающие звуки от Arduino. Вот особенно яркий пример:

Вы заметите отсутствие клавиатуры; этот проект (также доступный на Instructables) предназначен для управления звуком, генерируемым через Arduino, с использованием фильтров и элементов управления (пять потенциометров). Это полностью отличается от клавиатуры, показанной в верхней части страницы, но это просто показывает объем опций, доступных для музыкальных проектов на базе Arduino.

У вас есть собственный проект? Сообщите нам об этом!

Кристиан Коули проводит много времени с Raspberry Pis и просматривает Интернет в поисках интересных проектов электроники своими руками и новостей для ElectroMaker. В настоящее время он пытается показать своему 7-летнему сыну, как освоить Scratch, но пока безуспешно.

F0 — это минималистичный аналоговый синтезатор прямоугольной формы с клавишами пианино, напечатанными на 3D-принтере.

Вот краткая демонстрация самодельного синтезатора в действии:

Основой F0 является управляемый напряжением генератор (VCO) на микросхеме CD4046. Батарея 9 В питает стабилизатор 5 В для создания постоянного опорного напряжения, которое затем распределяется между кнопками, диодами и подстроечными потенциометрами (по 13 каждых), образуя делители напряжения.

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

Подробнее о сборке см. на сайте проекта.

8 мыслей о «Самостоятельный синтезатор с клавиатурой, напечатанной на 3D-принтере»

Размеры клавиатуры неправильные, она некрасивая, и все это меня очень злит.

3D-печать означает, что вы можете делать все, что захотите. Ради бога, по крайней мере, найдите время, чтобы все исправить с этой свободой.

Нет никакого возможного оправдания мерзости глаз, которую нам навязали выше.

"Размеры клавиатуры неправильные, она некрасивая, и все это меня очень злит".

Что, во имя богов синтезаторов, может быть целью 3D-печати стандартной клавиатуры? Разве весь смысл 3D-печати и синтезатора своими руками не в том, чтобы позволить вам сделать что-то нестандартное?

Боже, что с тобой? Ради бога, будь милым.

С уважением, человек, который сделал то, что вас оскорбило

Единственный положительный результат, который может дать это новое движение "Сделай сам", может заключаться в том, что оно будет развиваться в ближайшие годы. Надеюсь, через несколько лет мы оглянемся назад и скажем, что «эти ребята были первооткрывателями».
Хотя у меня есть сомнения. Еще в молодости Букла, Перлмам, Муг, Линн и др. создавали более сложные инструменты, чем перечисленные выше.

Столько работы, времени и компонентов только для того, чтобы получить один тон на октаву? Надеюсь, это просто тщеславный проект, потому что я не думаю, что он найдет место в моей студии. При этом я был бы очень доволен собой, если бы сделал это.

«…потратьте время, чтобы все исправить с этой свободой».

Вы можете делать то, что мы вам говорим!

Мне кажется, что ключи вырезаны из плексигласа лазером, а не напечатаны на 3D-принтере.
Возможно, в этой истории что-то потерялось в переводе.

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

rhino Supporting Member!
Сообщений: 2611 Присоединился: Сб, 02 августа 2008 г., 17:00 Настоящее имя: Bill Снаряжение: хранители:
Kurzweil K2500x
Ensoniq TS-12
Yamaha SY-99
Alesis QS-8
Roland JD-800
Roland JX-10
Akai AX-80
Ensoniq SQ-80
Korg DSS-1
Moog Mini
Fizmo Местоположение: Кентукки-Хиллз

Ensoniq Mirage и ESQ-1,
и Yamaha DX-7, mark II и SY,
все имеют прочные, простые клавиатуры с контактами типа «размыкай-замыкай».
ИМХО, это лучше, чем синтезаторы с резиновыми контактами

Tryptamine Newbie
Сообщений: 18 Присоединился: Пн, 14 июня 2010 г., 23:45 Gear: Rhodes Chroma, Alesis Andromeda, Dot Com module, X0XB0X, MC-505, Korg Poly-800, Casio CT-1000P , Arp Axxe, Sequentix P3

cornutt Moderator
Сообщений: 2119 Присоединился: 02 декабря 2007 г., 6:03 Передача: 6-е Место: Rocket City USA Контактное лицо:

Какой результат вы хотите получить от клавиатуры? Вы хотите CV и ворота или вам нужен прямой доступ к строкам сканирования? Скорость или послекасание?

Выключатели, ручки, кнопки, светодиоды, ЖК-экраны, мониторы, ключи, мыши, разъемы, розетки. Теперь два джойстика!

Altitude Expert Member
Сообщений: 1220 Присоединился: вс, 24 сентября 2006 г., 19:25 Местоположение: Мичиган

там хорошее дерьмо..

Nogasloth Newbie
Сообщений: 10 Присоединился: 06 мая 2010 г., 1:00

Спасибо, ребята, я склоняюсь к тому, чтобы расстаться. У меня валяется Casiotone, который не хочет работать, но я бы не возражал против этих фатарных клавиш, хотя я читал, что компанию трудно достать.
Я рассматривал возможность использования дешевого MIDI-контроллера в качестве отдельного синтезатора, но он все равно кажется более дорогим, чем клавиатура.

RD9 Active Member
Сообщений: 536 Присоединился: Вт, 02 марта 2010 г., 4:24 утра Местоположение: Нью-Йорк/Нью-Джерси

Есть также страницы MKE и A100CGK на Doepfer, если вы рассматриваете возможность дополнительных элементов управления, таких как midi, октавное транспонирование и т. д. Я уверен, что делать это самостоятельно — головная боль. Если вы хотите тратить меньше времени на изобретение велосипеда и больше времени на создание музыки, возможно, стоит подумать об этом. (Я тоже хотел собрать свою клавиатуру, но потом понял, насколько это сложно.)

Nogasloth Newbie
Сообщений: 10 Присоединился: 06 мая 2010 г., 1:00

Как насчет клавиатуры, где каждая клавиша имеет собственный путь к цепи? Итак, если бы у вас была трехоктавная клавиатура, у вас было бы 37 дорожек, каждая из которых представляет собой собственную ноту. Есть идеи, где я могу найти что-то подобное?

th0mas Expert Member
Сообщений: 1349 Присоединился: Чт, 14 июля 2005 г., 17:27 Механизм: Oakley tm3030/mopho keys/midibox sid/tr-707/tama techstars/monotron Группа: GRAVITRONIC Местоположение: Ontario Contact :

Читайте также: