Как построить клавиатуру для фортепиано с помощью ванильного JavaScript

Автор оригинала: Joe Liang.

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

Вот JavaScript Piano клавиатура Я сделал, если вы хотите сначала проверить конечный продукт.

В этом руководстве предполагают, что у вас есть базовое понимание JavaScript, таких как функции и обработка событий, а также знакомства с HTML и CSS. В противном случае он полностью начнет дружелюбный и ориентироваться на тех, кто хочет улучшить свои навыки JavaScript благодаря обучению на основе проекта (или просто хочу сделать прохладный проект!).

Клавиатура Piano, которую мы делаем для этого проекта, основана на Динамически сгенерированная синтетическая клавиатура Сделано Кит Уильям Хорвуд. Мы расширим количество ключей доступных для 4 OCTAVES и установить новые ключевые привязки.

Хотя его клавиатура может играть звуки от других инструментов, мы будем держать вещи простыми и просто придерживаться фортепиано.

Вот шаги, которые мы возьмем, чтобы решить этот проект:

1 Получить рабочие файлы

2 Настройте ключевые привязки

3 Генерировать клавиатуру

4 Обрабатывать ключевые прессы

Давайте начнем!

1 Получить рабочие файлы

Этот учебник будет использовать следующие файлы:

· audiosynth.js.

· PlayKeyboard.js.

Как уже упоминалось, мы будем основывать нашу клавиатуру для фортепиано от одного, сделанного Кит. Естественно, мы также будем одолжить некоторые из его кодекса, которые он любезно дал разрешение на Audiosynth.js.

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

Мы оставляем файл audiosynth.js нетронутыми, как это исключительно несет только для генерации звука.

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

Кит уже предоставляет объяснение того, как работает звуковое поколение на своем веб-сайте, поэтому мы не будем войти в детали здесь.

В двух словах он включает в себя использование Math.sin () Функция в JS для создания синусоидальных сигналов и преобразует их, чтобы они могли больше похожи на реальные инструменты через какую-то модульную математику.

Создайте индекс HTML-файл и давайте свяжите на файлы JS в заголовке:

В теле мы можем создать пустую

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

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

Первые несколько строк PlayKeyboard.js устанавливаются для функциональности мобильного устройства (необязательно) и создает новый Audiosynth () объект. Мы используем этот объект для вызова методов Audiosynth.js, которые мы связаны ранее. Мы используем один из этих методов в начале, чтобы установить громкость для звука.

В строке 11 мы устанавливаем положение среднего C до 4-й октавы.

2 Настройте ключевые привязки

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

Я изначально хотел попытаться сыграть в открываемые заметки «Für Elise», поэтому я выбрал диапазон 4 октав в общей сложности 48 черно-белых ключей. Это требовалось практически каждого ключа на My (ПК) клавиатуре, и вы можете не стесняться, чтобы включить меньше.

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

Чтобы настроить привязки ключей, сначала создайте объект, который будет использовать файл KeyCode в качестве его клавиш, и заметку для воспроизведения в качестве его ключевых значений (стартовая строка 15):

var keyboard = {
	/* ~ */
	192: 'C,-2',
	/* 1 */
	49: 'C#,-2',
	/* 2 */
	50: 'D,-2',
	/* 3 */
	51: 'D#,-2',
    //...and the rest of the keys
}

Комментарии обозначают ключи, которые пользователь может нажать на клавиатуре компьютера. Если пользователь нажимает клавишу Tilde, то соответствующий ключевой код – 192. Вы можете получить ключевой код с помощью инструмента, такого как KeyCode.info.

Ключевое значение – это записка, которую нужно воспроизводить и записать в формате «Примечание, модификатор октавы», где модификатор октавы представляет собой относительное октавную позицию из октавы, содержащего середину C. Например, «C, -2» 2 октавы ниже среднего C.

Обратите внимание, что нет «плоских» клавиш. Каждая записка представлена «Sharp».

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

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

Теперь вот где вещи могут быть сложными: нам на самом деле нужно 2 стола обратного поиска.

Мы используем одну таблицу, чтобы посмотреть на ярлык, которую мы хотим отображать для компьютерной клавиши, мы нажимаем, чтобы воспроизвести ноту (объявленную как Reverseleookuptext в строке 164) и секунду, чтобы посмотреть фактический ключ, который был нажата (объявлено как Reverseleookup на линии 165).

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

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

Например, нажатие левого открытого кронштейна дает ключевой код 219, но когда вы фактически пытаетесь преобразовать ключевой код обратно в строку, используя String.fromCharCode (219) Это возвращает “û”. Чтобы получить «[», вы должны использовать ключ код 91. Мы заменяем неправильные коды, начиная с строки 168.

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

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

3 Генерировать клавиатуру

Мы начинаем процесс генерации клавиатуры, выбрав наш

На следующей строке мы объявляем SelectSound . Объект и установить ценность Собственность до нуля, чтобы Audiosynth.js загрузит звукового профиля для фортепиано. Вы можете войти в другое значение (может быть 0-3), если вы хотите попробовать другие инструменты. См. Линия 233 audiosynth.js с SynthoLoadSoundProfile Больше подробностей.

На линии 216 с var notes Мы извлекаем доступные заметки для одной октавы (C, C #, D … b) от audiosynth.js.

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

Чтобы отличить, нужно ли нам создать черный или белый ключ, мы смотрим на расстояние названия запишений. Добавление резкого знака составляет длину строки, превышающей одну (Ex. ‘ C # ‘), который указывает черный ключ и наоборот на белом.

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

Далее мы отметим ключ к ключу компьютера, нам нужно нажать для воспроизведения его примечания и хранить его в другом

label.innerHTML = '' + s + '' + '

' + n.substr(0,1) + 
'' + (__octave + parseInt(i)) + '' + 
(n.substr(1,1)?n.substr(1,1):'');

Аналогично, мы добавляем слушатель события к ключу для обработки щелчков мыши (строка 244):

thisKey.addEventListener(evtListener[0], (function(_temp) { return function() { fnPlayKeyboard({keyCode:_temp}); } })(reverseLookup[n + ',' + i]));

Первый параметр EVTListener [0] это Mousedown Мероприятие объявлено гораздо раньше на линии 7. Второй параметр – это функция, которая возвращает функцию. Нам нужно Reverseleookup Чтобы получить нам правильный ключевой код И мы проходим это значение как параметр _TEMP к внутренней функции. Нам не понадобится реверсея, чтобы справиться с фактическим КДУЩЬЮ События.

Этот код предварительно ES2015 (AKA ES6) и обновленные, надеюсь, более четкий эквивалент:

const keyCode = reverseLookup[n + ',' + i];
thisKey.addEventListener('mousedown', () => {
  fnPlayKeyboard({ keyCode });
});

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

4 Обрабатывать ключевые прессы

Мы обрабатываем ключ, нажимаем так же, как пользователь нажимает клавишу или нажимает соответствующую компьютерную клавишу через использование функции fnplayKeyboard на линии 260. Единственное отличие – это тип события, которое мы используем в addeventListener обнаружить ключевую прессу.

Мы настроили массив под названием Клавиатура В строке 206 обнаружить, какие ключи нажимаются/щелчны. Для простоты мы предположим, что нажатый ключ может включать его также нажатие.

Мы можем разделить процесс обработки ключа нажимать на 3 этапа: добавление ключевого кода нажатой клавиши на Клавиатура , воспроизведение соответствующей ноты и удаление ключевого кода из Клавиатура Отказ

Первый шаг добавления ключевого кода легко:

keysPressed.push(e.keyCode);

где е Это событие, обнаруженное addeventListener Отказ

Если добавленный ключевой код является одним из ключевых привязки, которые мы присваивали, то мы называем fnplaynote () В строке 304 для воспроизведения записки, связанной с этим ключом.

В fnplaynote () Мы впервые создаем новый Аудио () элемент Контейнер Для нашей записки с использованием генерировать () Метод от audiosynth.js. Когда аудио нагрузки, мы можем играть в записку.

Линии 308-313 являются устаревшим кодом и, кажется, они могут просто заменяться на Container.Play () Хотя я не сделал никакого обширного тестирования, чтобы увидеть, какова разница.

Удаление ключевой печати также довольно прост, так как вы можете просто удалить ключ от Клавиатура массив с сращивание Способ на линии 298. Для получения более подробной информации см. Функция под названием fnremovekeybinding () Отказ

Единственное, что мы должны следить за тем, когда пользователь удерживает ключ или несколько клавиш. Мы должны убедиться, что заметка играет только один раз, когда клавиша удерживается вниз (линии 262-267):

var i = keysPressed.length;
while(i--) {
	if(keysPressed[i]==e.keyCode) {
		return false;	
    }
}

Возвращение ложь Предотвращает остальные fnplayKeyboard () от выполнения.

Резюме

Мы создали полностью функционирующую рояльную клавиатуру с помощью Vanilla JavaScript!

Чтобы повторить, вот шаги, которые мы взяли:

1. Мы устанавливаем наш индекс HTML-файл для загрузки соответствующих файлов JS и выполнить PlayKeyboard () в генерировать и сделать функционал клавиатуры. У нас есть

   элемент с id = "клавиатура" где клавиатура будет отображаться на странице.

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

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

   элемент. Мы используем таблицы обратного поиска для генерации ярлыка клавиш и правильный ключевой код. Затем слушатель событий на Mousedown использует его, чтобы позвонить fnplayKeyboard () играть в записку. КДУЩЬЮ Событие вызывает ту же функцию, но не требует обратной таблицы поиска, чтобы получить ключевой код.

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

Клавиатура теперь полностью функциональна, но она может выглядеть немного скучно. Я оставлю вам часть CSS?

Опять же, вот JavaScript Piano клавиатура Я сделал для справки.

Если вы хотите узнать больше о веб-разработке и проверить некоторые другие аккуратные проекты, посетите мой блог на 1000 миль мила Отказ

Спасибо за чтение и счастливое кодирование!