В этом кроке мы с вами сделаем такой драмкит. Итак, приступаем. В начале давайте создадим папку drum kit где будут хранится звуковые файлы и html. Переносим файлы звуков в эту папку. И создаем новый html файл который назовем index. Создадим необходимые теги.
Далее в теге боди создадим тег див внутри которого будут 3 тега див. А уже внутри этих тегов будут теги спэн и аудио.
У верхнего тега див id будет drum-kit. У внутренних тегов div будет класс key. А также давайте придумаем свой атрибут и назовем его data-key, и в значении последовательно пропишем a s d. Такие же буквы будут между тегов span. Для атрибута src в значении укажем ссылки на файлы. Также скопируем data-key и в аудио. Не пишем атрибут control для аудио, чтобы не появлялся плеер на странице.
Проверяем, и видим только буквы AS и D.
Теперь зададим стиль нашему приложению. Для начала стилизуем тег body.
Шрифт будет без засечек, дисплей флекс, разместим внутренний тег div по центру как по горизонтали, так и по вертикали. Высота тега будет равна высоте окна браузера, поля будут по 0, в качестве фона укажем градиент, и цвет текста будет белый.
Далее стилизуем верхний тег div:
Дисплей тоже будет флекс, а расстояние между внутренними тегами будет 1.2em. Теперь придадим стиль внутренним тегам div.
Рамка будет такая, скругление углов будет 1em. Дисплей тоже будет флекс, разместим по центру тег span внутри, ширина и высота будут в 8em. Проверяем. Уже смотрится неплохо. Теперь давайте напишем javascript, чтобы наш драмкит заработал.
В начале соберем все элементы с классом key, т.е. вот эти теги.
Далее создадим функцию, которая будет создавать анимацию, назовем функцию animateKey, в параметре будет tagkey, т.е. здесь мы будем ожидать один из трех тегов div. И в теле функции воспользуемся методом animate для тега. В первом параметре пишем ключевые кадры с css свойствами.
Если я укажу один ключевой кадр, то он будет отвечать за середину анимации, а в начале анимации и в конце все css-свойства, которые мы будем использовать в ключевом кадре, будут иметь значения до анимации. Такой расклад нас устраивает.
Если у свойств css есть тире в названиях, как например background -color, то в ключах здесь пишем слитно используя стиль lowerCamelCase.
Во втором параметре зададим настройки анимации, такие как продолжительность и повторение. Функция готова.
Теперь напишем функцию, которая будет принимать имя нажатой клавиши в виде текста, затем запускать звук и анимацию на определенных тегах. Как получить имя клавиши в виде текста мы скоро узнаем, а пока назовем функцию playSoundAndAnimation. В параметре укажем keyName.
Далее в теле функции первым делом создадим константу, в значении которой будет тот аудио тег, атрибут data-key которого совпадает с нажатой клавишей. А как такое написать? Спрева воспользуемся методом querySelector, а в параметре добавляем аргумент так.
Нам нужен тег аудио, атрибут data-key которого равен, открываем кавычки, только теперь двойные, чтобы транслятор не подумал, что это закрывающие кавычки в аргументе, Теперь между этих двух кавычек мы должны написать имя той клавиши, которая нажата. Сделаем это так, поставим между ними одинарные кавычки, теперь это два текстовых значения. Далее ставим знак конкатенации, пишем keyName снова знак конкатенации.
Т.е. если мы нажали на клавишу A, текст с буквой а передается в функцию, и константа получит доступ к тому тегу аудио присвоит тот тег audio, атрибут data-key которого равен А. А что если мы нажмем на клавишу W. Тогда метод querySelector не сможет найти тег со значением W в атрибуте data-key. И в константе метод поместит значение null.
Теперь нам надо написать вторую константу, в значении которой будет тот div тег, атрибут data-key которого также совпадает с нажатой клавишей. Только я теперь хочу показать как избежать знаков конкатенации, а просто написать аргумент для метода querySelector в одну строку. Для этого можно использовать специальный шаблонный текст, внутри которого мы можем поместить любой javascript код. Шаблонный текст, в отличие от обычного имеет косые кавычки, давайте наберем текст пока без параметра keyName. Теперь чтобы поместить сюда любой js-код нам надо сперва набрать знак доллара, затем фигурные скобки и в фигурных скобках набираем имя параметра. Готово, согласитесь, так читается гораздо легче, чем вариант выше.
Теперь нам надо создать условие, чтобы запустить анимацию для keyElement. Условие будет звучать так – если key element не равен Null, то запусти анимацию на этом теге. Давайте напишем.
На самом деле условие можно написать еще короче, так как если выражение возвращает null, undefined, 0, NaN (т.е. not a number) или пустую строку, то это будет равно false. Остальные значения, которые не являются true или flase, будут равны true. Т.е. наше условие можно записать так:
Получается если переменная не содержит null, тогда запускаем для этой переменной, а точнее для этого тега анимацию.
Далее нам надо написать код который завершит выполнение функции если keyElement содержит null. Для этого Мы просто можем использовать ключевое слово return, и ничего не возвращать, таким образом когда функция столкнется с ключевым словом returm она сразу завершит свою работу. Т.е. в функциях, чтобы заранее завершить её работу мы используем return. А вот в циклах и операторе свитч, для завершения работы используется ключевое слово break. Набираем.
Двигаемся дальше. Так как переменная аудио содержит тег аудио, то для него становятся специфичные методы и свойства, например метод play, который запустит звуковую дорожку. Но так как мы очень часто будем нажимать, например, на звук хайхета, то необходимо чтобы при каждом нажатии звук воспроизводился с начала, для этого нам поможет свойство currentTime, которое мы установим в 0.
И вот функция готова. Осталось с помощью функции adEventListener запустить обработку нажатия клавиш. Так как нажатие клавишь у нас не привязанно к какому-то определенному тегу, мы запустим adEventListener просто как метод объекта window. Здесь моно и не указывать window. Как вы знаете объект window можно не указывать
В первом параметре функции мы укажем keydown, т.е. функция должна отслеживать нажатия клавиш. Когда нажатия клавиши произойдет, то функция addEvntListener создаст объект событие, внутри которого будет вся информация о произошедшем событии, и чтобы им воспользоваться мы должны внутри функции указать параметр с любым именем, тогда этот объект автоматически передаться в этот параметр. Набираем function, обычно параметр для объекта события называют event, evt или просто буквой e. Мы напишем event. У объекта событие много свойств и методов, но нас пока интересует только одно – это key в котором будет содержаться имя нажатой клавиши в виде текста.
Итак внутри функции запустим нашу функцию playSoundAndAnimation а в параметре укажем свойство key объекта-событие.
И вот программа готова проверяем.
Домашнее задание – добавьте в программу DrumKit еще звук Тарелки Крэш (Crach Cymbal) на клавишу K, и звук тома на клавишу L
