Создание веб-приложения для ударной установки с помощью JavaScript
Все мы, должно быть, видели ударную установку на каком-то концерте или где-то еще, это набор барабанов, тарелок и других ударных инструментов. Но представляли ли вы когда-нибудь создание этой ударной установки самостоятельно виртуально с помощью какого-нибудь скриптового языка? Итак, цель этой статьи - создать приложение для ударных, работающее в браузере. Основные концепции, представленные в статье, - это DOM , ключевые события и CSS-анимация . Итак, к концу этой статьи вы бы не только поняли, как добавлять прослушиватели событий к кнопкам и нажатиям клавиш, чтобы вы знали, когда пользователь нажимает на клавиатуру или нажимает определенную кнопку на вашем веб-сайте, и вы можете ответить к нему, но вы также получаете отличный веб-сайт, которым вы можете произвести впечатление на всех своих друзей.
Предварительный просмотр веб-сайта:
Таким образом, этот веб-сайт будет работать так, что у нас есть несколько клавиш на веб-странице, которые представляют различные барабаны в типичной ударной установке, и когда вы нажимаете на любую из этих кнопок, вы получаете соответствующий звук барабана. Кроме того, вы также можете использовать клавиши на клавиатуре для создания звукового эффекта.
Разработка макета HTML: для веб-сайта у нас есть только семь кнопок для отображения на странице, при нажатии на которые будет воспроизводиться звук. Сначала мы добавим HTML-формат DOCTYPE, а затем дадим веб-странице подходящий заголовок, в нашем случае это Drum Kit . Внутри тега body мы дадим заголовок, скажем, The Drum Kit, используя тег h1, и отобразим эти семь кнопок. Код для того же будет:
HTML
<!DOCTYPE html> < html > < head > < title >The Drum Kit</ title > </ head > < body > < h1 >The Drum Kit</ h1 > < div class = "all" > < button >w</ button > < button >a</ button > < button >s</ button > < button >d</ button > < button >j</ button > < button >k</ button > < button >l</ button > </ div > </ body > </ html > |
Результат будет примерно таким:
Добавление стилей CSS: CSS используется для стилизации различных частей и придания им большей визуальной привлекательности. Но это личное мнение о том, какой стиль нравится разработчику больше всего. Не стесняйтесь использовать любой стиль, но помните об этих основных моментах:
- Задайте любой цвет, цвет фона, семейство шрифтов, поля и размер шрифта, которые вы хотите придать тексту и заголовку.
- Для каждой кнопки мы добавили фоновые изображения барабанов, тарелок и т. Д., Чтобы сделать страницу более привлекательной. Все изображения находятся в каталоге «изображения». Кроме того, мы придали всем кнопкам общий стиль.
- Мы также задали стиль тому, как каждая кнопка будет выглядеть при нажатии в анимации класса. Мы добавили бы этот класс, используя JavaScript, всякий раз, когда нажимаете кнопку.
Чтобы добавить эти классы, мы должны также добавить классы в теги HTML и связать таблицу стилей. Таким образом, измененный HTML и новый код CSS будут такими:
HTML
<!DOCTYPE html> < html > < head > < title >The Drum Kit</ title > < link rel = "stylesheet" href = "index.css" > </ head > < body > < h1 >The Drum Kit</ h1 > < div class = "all" > < button class = "w button" >w</ button > < button class = "a button" >a</ button > < button class = "s button" >s</ button > < button class = "d button" >d</ button > < button class = "j button" >j</ button > < button class = "k button" >k</ button > < button class = "l button" >l</ button > </ div > </ body > </ html > |
CSS
body { text-align : center ; background-color : #a06060 ; } h 1 { font-size : 5 rem; color : #DBEDF3 ; font-family : cursive ; text-shadow : 3px 0 #DA0463 ; } .w { background-image : url ( "images/w.png" ); } .a { background-image : url ( "images/a.png" ); } .s { background-image : url ( "images/s.png" ); } .d { background-image : url ( "images/d.png" ); } .j { background-image : url ( "images/j.png" ); } .k { background-image : url ( "images/k.png" ); } .l { background-image : url ( "images/l.png" ); } . all { margin : 10% auto ; } .animation { box-shadow: 0 3px 4px 0 #DBEDF3 ; opacity: 0.5 ; } .button { outline : none ; border : 10px solid #404B69 ; font-size : 5 rem; font-family : 'Arvo' , cursive ; line-height : 2 ; font-weight : 900 ; color : #DA0463 ; text-shadow : 3px 0 #DBEDF3 ; border-radius: 15px ; display : inline- block ; width : 150px ; height : 150px ; text-align : center ; margin : 10px ; background-color : white ; } |
Добавление функциональности с помощью JavaScript:
- Важно: добавьте тег скрипта в HTML-документ, связав его с файлом JavaScript (перед закрытием тега body ).
HTML
<
script
src
=
"drumKit.js"
></
script
>
- Добавьте слушателей событий ко всем кнопкам следующим образом:
JavaScript
var
numberOfButtons = document.querySelectorAll(
".button"
).length;
for
(
var
j = 0; j < numberOfButtons; j++) {
document.querySelectorAll(
".button"
)[j]
.addEventListener(
"click"
,
function
() {
var
buttonStyle =
this
.innerHTML;
sound(buttonStyle);
animation(buttonStyle);
});
}
- Добавьте функцию нажатия клавиш, которая будет описывать, что произойдет, когда будет произведена конкретная клавиша. Здесь мы произведем звуковой эффект и эффект анимации. Код для того же:
JavaScript
document.addEventListener(
"keypress"
,
function
(event) {
sound(event.key);
animation(event.key);
});
- Теперь закодируем функцию sound (). Он сообщит, какой звук должен воспроизводиться, когда мы нажимаем или / и нажимаем определенную клавишу. Здесь мы уже сохранили некоторые основные звуковые эффекты ударных, тарелок и других ударных инструментов, и мы будем воспроизводить эти звуки (используя новый звук ) при нажатии или нажатии соответствующей клавиши. Все звуки находятся в каталоге «музыка». Код же должен быть:
JavaScript
function
sound(key) {
switch
(key) {
case
"w"
:
var
sound1 =
new
Audio(
"music/w.mp3"
);
sound1.play();
break
;
case
"a"
:
var
sound2 =
new
Audio(
"music/a.mp3"
);
sound2.play();
break
;
case
"s"
:
var
sound3 =
new
Audio(
'music/s.mp3'
);
sound3.play();
break
;
case
"d"
:
var
sound4 =
new
Audio(
'music/d.mp3'
);
sound4.play();
break
;
case
"j"
:
var
sound5 =
new
Audio(
'music/j.mp3'
);
sound5.play();
break
;
case
"k"
:
var
sound6 =
new
Audio(
'music/k.mp3'
);
sound6.play();
break
;
case
"l"
:
var
sound7 =
new
Audio(
'music/l.mp3'
);
sound7.play();
break
;
default
: console.log(key);
}
}
- Теперь закодируем функцию animation (). Это будет по-разному анимировать кнопку при нажатии. Для этого мы добавим класс нажатой (который мы уже определили в файле CSS) к соответствующей кнопке при ее нажатии. Код для того же будет:
JavaScript
function
animation(currentKey) {
var
activeButton = document.querySelector(
"."
+ currentKey);
activeButton.classList.add(
"animation"
);
setTimeout(
function
() {
activeButton.classList.remove(
"animation"
);
}, 100);
}
Полный файл HTML и JavaScript будет выглядеть так:
index.html
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>The Drum Kit</
title
>
<
link
rel
=
"stylesheet"
href
=
"index.css"
>
</
head
>
<
body
>
<
h1
>The Drum Kit</
h1
>
<
div
class
=
"all"
>
<
button
class
=
"w button"
>w</
button
>
<
button
class
=
"a button"
>a</
button
>
<
button
class
=
"s button"
>s</
button
>
<
button
class
=
"d button"
>d</
button
>
<
button
class
=
"j button"
>j</
button
>
<
button
class
=
"k button"
>k</
button
>
<
button
class
=
"l button"
>l</
button
>
</
div
>
<
script
src
=
"drumKit.js"
></
script
>
</
body
>
</
html
>
drumKit.js
var
numberOfButtons =
document.querySelectorAll(
".button"
).length;
for
(
var
j = 0; j < numberOfButtons; j++) {
document.querySelectorAll(
".button"
)[j]
.addEventListener(
"click"
,
function
() {
var
buttonStyle =
this
.innerHTML;
sound(buttonStyle);
animation(buttonStyle);
});
}
document.addEventListener(
"keypress"
,
function
(event) {
sound(event.key);
animation(event.key);
});
function
sound(key) {
switch
(key) {
case
"w"
:
var
sound1 =
new
Audio(
"music/w.mp3"
);
sound1.play();
break
;
case
"a"
:
var
sound2 =
new
Audio(
"music/a.mp3"
);
sound2.play();
break
;
case
"s"
:
var
sound3 =
new
Audio(
'music/s.mp3'
);
sound3.play();
break
;
case
"d"
:
var
sound4 =
new
Audio(
'music/d.mp3'
);
sound4.play();
break
;
case
"j"
:
var
sound5 =
new
Audio(
'music/j.mp3'
);
sound5.play();
break
;
case
"k"
:
var
sound6 =
new
Audio(
'music/k.mp3'
);
sound6.play();
break
;
case
"l"
:
var
sound7 =
new
Audio(
'music/l.mp3'
);
sound7.play();
break
;
default
: console.log(key);
}
}
function
animation(currentKey) {
var
activeButton = document.querySelector(
"."
+ currentKey);
activeButton.classList.add(
"animation"
);
setTimeout(
function
() {
activeButton.classList.remove(
"animation"
);
}, 100);
}
Окончательный результат:
Как видно при нажатии кнопки «l» анимация меняется.
Вы можете найти весь код со звуком и изображениями на моем GitHub
- Теперь закодируем функцию animation (). Это будет по-разному анимировать кнопку при нажатии. Для этого мы добавим класс нажатой (который мы уже определили в файле CSS) к соответствующей кнопке при ее нажатии. Код для того же будет: