Развлекайтесь с vanilla js, css и аудиоэлементом…

Я только что начал выполнять 30-дневный челлендж Уэса Боса по программированию на ванильном js (https://javascript30.com/).

В первом проекте я создал ударную установку с элементами vanilla JavaScirpt, css и audio. Поиграть можно здесь (http://yortuc.com/drums)

Есть несколько моментов, которые я хочу подчеркнуть в этом крошечном проекте.

  1. Элемент Html Audio
    Имеет отличную поддержку браузера и идеально подходит для воспроизведения простых звуков в приложениях и/или играх. Текущее время воспроизведения регулируется. (https://caniuse.com/#search=audio)
  2. Свойство classList HtmlElement
    Вы можете легко добавлять, удалять и переключать классы для html-элемента с помощью ванильного javascript.
  3. transitionend event
    Срабатывает, когда эффект перехода css на элементе html заканчивается. Используется в этом проекте для определения момента окончания «игрового» перехода для клавиши, а затем класс «игровой» удаляется для создания эффекта «поп». Учитывая, что мы

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