Познакомьтесь с вашим новым любимым барабанщиком, BeatBot! Простая драм-машина, которая приносит бум!
Пошаговое руководство
BeatBot был спроектирован и разработан West McMillen в рамках проекта Digital Craft React. Он написан на TypseScript с использованием React/Redux/Tailwindcss.
Каждый набор ударных BeatBot содержит 16 отдельных сэмплов. В верхней части приложения вы увидите выбранный в данный момент набор ударных.
Ниже секция пэдов содержит 16 помеченных пэдов, показывающих сэмпл, который они представляют. У пользователя есть возможность щелкнуть / коснуться барабанной площадки, чтобы воспроизвести семпл. Пользователи с клавиатурой также могут вводить клавиши без щелчка.
Секция секвенсора содержит 16 переключателей, соответствующих 16-й ноте. Каждый раз при выборе пэда секвенция отображает паттерн для конкретного семпла.
Секция контроллера позволяет пользователю запускать/останавливать цикл последовательности. Пользователь также найдет возможность отключить звук / переключить метроном / удалить все паттерны из секвенсора / увеличить или уменьшить темп / а также ввести в секвенсор ощущение времени триоли или свинга. Пользователь может получить доступ к большему количеству наборов ударных с помощью кнопки настроек или выйти из своей учетной записи (будущая функция).
Репозиторий GitHub
https://github.com/westmcmillen/beatbot
Извлеченные уроки
Машинопись:
Я многое узнал о том, как я структурирую свой код, по сообщениям об ошибках TypeScript, и поверьте мне, ошибки были! Хотя на первый взгляд это кажется громоздким, преимущества правильно типизированного файла TypeScript действительно окупаются при доступе к переменным в вашем проекте. В частности, интеллект кажется — ну — разумным! Одной этой функции достаточно, чтобы заставить меня использовать TypeScript для большего количества будущих проектов.
Состояние и циклы:
Безусловно, самый большой блокировщик этого проекта произошел, когда я зацикливал свой паттерн секвенсора. Цикл запускается через хук useEffect при изменении определенного состояния в моем магазине Redux. Однако после срабатывания этого цикла ни на одну обновленную версию этого состояния цикл не ссылался. С помощью моего инструктора Джо — огромное спасибо! — мы пришли к решению присвоить рассматриваемое состояние хуку useRef, который цикл может оценивать вместо хранилища Redux напрямую. Это позволяло изменять состояние внутри цикла во время цикла цикла. Больше никакой бесконечной барабанной дроби в ушах! 🥳
Как и в случае со всеми моими проектами здесь, в Digital Craft, извлеченные уроки стоят той пары лысин, которые у меня есть из-за того, что я рвал на себе волосы всю неделю. Не могу дождаться, что будет дальше!
