Создание веб-приложения для ударной установки с помощью JavaScript

Все мы, должно быть, видели ударную установку на каком-то концерте или где-то еще, это набор барабанов, тарелок и других ударных инструментов. Но представляли ли вы когда-нибудь создание этой ударной установки самостоятельно виртуально с помощью какого-нибудь скриптового языка? Итак, цель этой статьи - создать приложение для ударных, работающее в браузере. Основные концепции, представленные в статье, - это DOM , ключевые события и CSS-анимация . Итак, к концу этой статьи вы бы не только поняли, как добавлять прослушиватели событий к кнопкам и нажатиям клавиш, чтобы вы знали, когда пользователь нажимает на клавиатуру или нажимает определенную кнопку на вашем веб-сайте, и вы можете ответить к нему, но вы также получаете отличный веб-сайт, которым вы можете произвести впечатление на всех своих друзей.

Предварительный просмотр веб-сайта:

Таким образом, этот веб-сайт будет работать так, что у нас есть несколько клавиш на веб-странице, которые представляют различные барабаны в типичной ударной установке, и когда вы нажимаете на любую из этих кнопок, вы получаете соответствующий звук барабана. Кроме того, вы также можете использовать клавиши на клавиатуре для создания звукового эффекта.

Разработка макета HTML: для веб-сайта у нас есть только семь кнопок для отображения на странице, при нажатии на которые будет воспроизводиться звук. Сначала мы добавим HTML-формат DOCTYPE, а затем дадим веб-странице подходящий заголовок, в нашем случае это Drum Kit . Внутри тега body мы дадим заголовок, скажем, The Drum Kit, используя тег h1, и отобразим эти семь кнопок. Код для того же будет:

Результат будет примерно таким:

Добавление стилей CSS: CSS используется для стилизации различных частей и придания им большей визуальной привлекательности. Но это личное мнение о том, какой стиль нравится разработчику больше всего. Не стесняйтесь использовать любой стиль, но помните об этих основных моментах:

• Задайте любой цвет, цвет фона, семейство шрифтов, поля и размер шрифта, которые вы хотите придать тексту и заголовку.
• Для каждой кнопки мы добавили фоновые изображения барабанов, тарелок и т. Д., Чтобы сделать страницу более привлекательной. Все изображения находятся в каталоге «изображения». Кроме того, мы придали всем кнопкам общий стиль.
• Мы также задали стиль тому, как каждая кнопка будет выглядеть при нажатии в анимации класса. Мы добавили бы этот класс, используя JavaScript, всякий раз, когда нажимаете кнопку.

Чтобы добавить эти классы, мы должны также добавить классы в теги HTML и связать таблицу стилей. Таким образом, измененный HTML и новый код CSS будут такими:

Добавление функциональности с помощью 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