В этом кроке мы с вами сделаем такой драмкит. Итак, приступаем. В начале давайте создадим папку 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, тогда запускаем для этой переменной, а точнее для этого тега анимацию.
Далее нам надо проверить содержит ли константа тег аудио или значение null. Но здесь условие будет такое, если тег аудио равен null то выходим из функции и ничего не делаем. Но это реализовать. Нам нужно выполнить действие если переменная будет равна null. Значит условие надо написать так:
Но даже это условие можно сократить. Если напишу так:
То условие вернет false, но если я использую логический оператор Не, то не cо значением false вернет true:
А как нам завершить функцию, если аудио будет равно null, мы просто можем поставить ключевое слово return, и ничего не возвращать, таким образом когда функция столкнется с ключевым словом returm она сразу завершит свою работу. Т.е. в функциях, чтобы заранее завершить её работу мы используем return. А вот в циклах и операторе свитч, для завершения работы используется ключевое слово break. Набираем.
На самом деле если переменная аудио будет равна null, то и KeyElement тоже будет равен null, поэтому здесь две проверки не нужны. Т.е. можно написать так:
А так как переменная аудио содержит тег аудио, то для него становятся специфичные методы и свойства, например метод play, который запустит звуковую дорожку. Но так как мы очень часто будем нажимать, например, на звук хайхета, то необходимо чтобы при каждом нажатии звук воспроизводился с начала, для этого нам поможет свойство currentTime, которое мы установим в 0. И вот функция готова. Осталось с помощью функции adEventListener запустить обработку нажатия клавиш. Так как нажатие клавишь у нас не привязанно к какому-то определенному тегу, мы запустим adEventListener просто как метод объекта window.
В первом параметре функции мы укажем keydown, т.е. функция должна отслеживать нажатия клавиш. Когда функция addEvntListener выполнится она создаст объект событие, внутри которого будет вся информация о произошедшем событии, и чтобы им воспользоваться мы должны внутри функции указать параметр с любым именем, тогда этот объект автоматически передасться в этот параметр. Набираем function, обычно параметр для объекта события называют event, evt или просто буквой e. Мы напишем event. У объекта событие много свойств и методов, но нас пока интересует только одно – это key в котором будет содержаться имя нажатой клавиши в виде текста.
Итак внутри функции запустим нашу функцию playSoundAndAnimation а в параметре укажем свойство key объекта-событие.
И вот программа готова проверяем.
Домашнее задание – добавьте в программу DrumKit еще звук Тарелки Крэш (Crach Cymbal) на клавишу K, и звук тома на клавишу L