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

Опубликовано: 5 Января, 2022

Все мы, должно быть, видели ударную установку на каком-то концерте или где-то еще, это набор барабанов, тарелок и других ударных инструментов. Но представляли ли вы когда-нибудь создание этой ударной установки самостоятельно виртуально с помощью какого-нибудь скриптового языка? Итак, цель этой статьи - создать приложение для ударных, работающее в браузере. Основные концепции, представленные в статье, - это 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

РЕКОМЕНДУЕМЫЕ СТАТЬИ