Несколько фон
Обучение JavaScript была как удовлетворена, так и расстраивающими в равной мере. Для этого есть непосредственность, что я нашел очень весело: видел мой код в действии и легко манипулировать в браузере! И тогда есть целая куча вещей, которые оставили меня, царапая голову, когда мой код ломается (Async, обещания, обшивки, обратные вызовы, Argh !!)
Начиная, я хотел отметить мой прогресс с забавным маленьким проектом для моей 3-летней дочери ADA (которую я позже продолжал встроить более полнофункциональное веб-приложение Ухо обучение ADA Отказ Мы работали вместе на некоторое время на какой-то основной теории музыки и обучения ушей. Ее главное введение в воспроизведение музыки произошло через эти цветные закодированные колокола, которые она получила как рождественский подарок от ее Великой Бабушки:
Я думал, что было бы полезно ввести концепцию клавиатуры для фортепиано, используя одинаковое цветовое кодирование (картирование каждой ноты в основной масштабе C до определенного цвета). Таким образом, мое вдохновение для фортепиано Ada радуги.
Если вам интересно, ниже это шаг за шагом учебник о том, как я его построил. И если вы хотите увидеть и/или попробовать код самостоятельно, вот a Ссылка на репозиторий на Github
Tone.js.
На звуковом сердечном сердце этого проекта приятно интуитивно понятное Tone.js Интерактивная музыкальная рамка. Это действительно мощный инструмент с различными генераторами тона, осцилляторами, эффектами и встроенным в сэмплере, но для этого проекта я действительно просто поцарапал поверхность его возможностей. Я закончил загрузить исходный код и включив его прямо в моем каталоге проекта, выбирая, чтобы избежать ES6 Импорт заявления, которые были предложены в Readme.
Очень легко настроить базовый экземпляр синтезатора и исправления его аудиовыходом компьютера. Первоначально я играл с основным монофоническим вариантом для моих начальных испытаний, но пошел с 4 голосовой полифонической версией для готового кода, чтобы мы могли играть в полные аккорды и т. Д.
Var Tone. Polysynth (4, тона. Синтез, { Осциллятор: { Тип: “Квадрат” } }).освоить ();
Впоследствии я провел некоторое время экспериментирую со звуками и связывая его до некоторых реальных образцов пианино, но у меня всегда была любовь к хорошей «квадратной волне», так что это похоже на начало.
Макет UI
После того, как мне было удобно играть звуки и запускающие атаки и релизы для конкретных заметок, пришло время построить пользовательский интерфейс. Честно говоря, самым сложным битом об этом маленьком проекте не было JavaScript, а CSS Styling! Я никогда не написал тонну CSS, а элементы позиционирования всегда казались таинственным искусством. Этот проект оказался отличной практикой! (Примечание. Для более поздних проектов с помощью клавиатуры я решил работать с Flexbox и CSS Grid вместо)
Я начал с одного большого Для полной октавы Keybed и создал внутреннюю Для каждого отдельного ключ Отказ Я создал отдельные классы для «белых клавиш» и «черных клавиш» и каждого ключ Получил свой собственный идентификатор, соответствующий его примечанию письма и октаве (C3, C # 3, D3 … B3, C4). Это позволило мне сделать очень специфические выборы CSS для предполагаемой схемы раскраски, и предоставило легкий механизм для отправки соответствующего примечания на имя моего Mousedown События для того, чтобы играть на предполагаемое примечание. Важно указать, что мой ключ были даны ценности стилизации CSS Дисплей: встроенный блок; так что они будут отображаться в Keybed И не прыгать на следующую строку. Требуется класс «Black-Keys», нуждается в дополнительном стиле: Должность: абсолютный; Таким образом, они могут перекрывать «белые клавиши» и быть размещены явно (убедитесь, что указать позиция Значение атрибута для ограждения Keybed Также или черные ключи не будут двигаться с остальной клавиатурой!). Это было немного кропотивление, но я уточнил верх и левый Значение для каждого отдельного черного ключа Отказ
Проводка все это
Теперь, когда я знал достаточно моего пути вокруг Tone.js и повеселился и красочный интерфейс Я был в основном доволен, пришло время написать свои функции JS, чтобы заставить эту вещь работать! Я хотел дать «пользователю» (My 3yo) пару вариантов для выставок триггера: нажав на трекпад и нажав клавиши на клавиатуре. Я хотел, чтобы каждый отслеживал оба Mousedown/keydown. События, а также Насуп/нажмешь События для указания применения атаки и выпуска.
Я начал, добавив слушателей событий для «щелчка» на каждый отдельный ключ :
для (const Note of alnotes) { note.addeventListener (‘Mousedown’, () => { Playnote (Event.target.id) }) note.addeventListener («Насуп», () => { ReleaseOnote (Event.target.id) }) }
Как упомянуто выше, каждое событие отправляет идентификатор щелчковки элемент в качестве параметра строки к функциям воспроизведения/релиза.
Я должен был подойти к KeyUp/keydown События немного по-другому. Я прикрепил слушатель события к Документ DOM Element и отправленные параметры для Play/Release функционирует в соответствии с объектом «ключей», который я создал, чтобы избежать несомненно уродливого Если/else/switch/case утверждение. Ключи Из объекта «Keybindings» являются нажатыми символами клавиш, и значения являются именами записками (соответствующие идентификатору «ключ» ‘s).
Const Keybindings = { «А»: «С3», «S»: «D3», “D”: “E3”, «F»: «F3», “G”: “G3”, “H”: “A3″, ” J “:” B3 “, “К”: “С4″, ” w “:” C # 3 “, “e “:” D # 3 “, «T»: «F # 3», “Y”: “G # 3”, «U»: «А # 3» }
Последние штрихи
Чтобы обеспечить небольшую визуальную интерактивность к рояле радуги, я решил добавить некоторые дополнительные стайлинг CSS, чтобы указать, когда в настоящее время играется заметка. В этом случае было просто вопрос добавления дополнительного («воспроизведения) класса к ключу Когда атака применения срабатывает и удаляет ее, когда выпуск был запущен. Вот обновленные плейноте и ReleaseOnote Функции:
Playnote = (Примечание) = > { Synth.triggerAttack (Примечание) const.queryselector ( # $ {note.replace (“#”, ‘\ #’)} `) reforeiv.classlist.add («игра« игра ») }
ReleaseOnote = (Примечание) = > { Synth.triggerRelease (Примечание); const.queryselector ( # $ {note.replace ("#", '\\ #')} ) Workeiv.ClassList.Remove («игра« игра ») } `.
Дополнительный стиль тонко уменьшает непрозрачность примечания для обеспечения выделения эффекта, когда воспроизводится примечание:
div.playing { непрозрачность: 0,7; }
И это в основном это!
В заключение
Пианино радуги было определенно забавным первым проектом Mini JavaScript! Ада была довольно энтузиазма. На я упомянул ранее, я продолжал построить это в более полнофункциональную теорию музыки и приложению ушей. Я хорошо знаю, что это не единственное «построение фортепиано JS Piano», поэтому я, вероятно, вернусь и прочитаю некоторые другие и посмотрите, как отличаются подходы. Я кто-то, кто любит процесс выяснения вещей для себя и бороться через ошибки по пути, поэтому я нерешился читать любые из них заранее. Во всяком случае, Happy Piano здание!
Приложение для тренировок в полном ухе Видео Demo для приложения для обучения ушей
Оригинал: “https://dev.to/edensongjbs/building-ada-s-rainbow-piano-11bd”