首页 > 编程语言 >Design a Drum-kit web app using JavaScript Javascript设计drum-kit项目

Design a Drum-kit web app using JavaScript Javascript设计drum-kit项目

时间:2023-06-27 14:44:50浏览次数:47  
标签:case web button Javascript kit animation music var new

We all must have seen a drum kit in some concert or elsewhere, it is a collection of drums, cymbals and other percussion instruments. But have you ever imagined making that drum kit on your own virtually with the help of some scripting language? Well, so here we are with the goal for this article to build a drum kit app that runs in the browser. The main concepts presented in the article are DOMkey events and CSS animations. So by the end of this article, you would have not only understood how to add event listeners to buttons and keystrokes so that you’ll know when the user is tapping on the keyboard or clicking on a particular button on your Website and you can respond to it, but you also end up with an awesome Website that you can impress all of your friends with.

Preview of the Website:

 

So the way this website would work that we’ve got a number of keys on the webpage that represents different drums in a typical drum set and when you click on any of those buttons then you’ll get the corresponding sound of the drum. And in addition you can also use the keys on the keyboard to have a sound effect.

   

Designing the HTML Layout: For the website, we only have seven buttons to display on the page, clicking upon which sound would be played. First we would add the DOCTYPE HTML format, then give a suitable title to the web page, in our case it is The Drum Kit . Inside the body tag, we would give a heading, say, The Drum Kit using h1 tag and display those seven buttons. The code for the same would be:

  • 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>

Output would be something like that:

 

Adding CSS Styling: CSS is used to style the different portions and make it more visually appealing. But, this is a personal opinion as to which style does the developer like the most. Feel free to use any styling but keep these main points in your mind:

  • Give whatever color, background color, font-family, margin and font size you want to give to the body and the heading.
  • We have given background images of drums, cymbals, etc. to every button to make the page more attractive. All the images are in “images” directory. Additionally, we have given some common styling to all the buttons.
  • We have also given styling as to how each button will look when pressed in the class animation. We would append this class using JavaScript whenever a button is pressed.

To append these classes we have to add the classes in HTML tags also and link the stylesheet. So the modified HTML and new CSS code would be:

  • 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; }    h1 {     font-size: 5rem;     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: 5rem;     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; }

Adding Functionality with JavaScript:

  • Important: Add script tag to the HTML document linking it with the JavaScript file (before closing the body tag).
    • HTML
     
    <script src="drumKit.js"></script
  • Add event listeners to all the buttons as follows:
    • 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);   }); }
  • Add keypress function which will describe what will happen when a particular key is produced. Here we will produce the sound effect and animation effect. Code for the same is:
    • JavaScript
     
    document.addEventListener("keypress", function(event) {   sound(event.key);   animation(event.key); });
  • Now we will code sound() function. It will tell which sound should be played when we press or/and click a specific key. Here we have already stored some basic sound effects of drums, cymbals and other percussion instruments, and we will play those sounds (using new Audio) when their respective key is clicked or pressed.  All the sounds are in “music” directory. Code for the same should be:
    • 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);   } }
    • Now we will code animation() function. This will animate the button differently when it is being clicked. To do this, we will add pressed (which we have already defined in CSS file) class to the respective button when it is being clicked. Code for the same would be:
      • JavaScript
       
      function animation(currentKey) {   var activeButton = document.querySelector("." + currentKey);      activeButton.classList.add("animation");      setTimeout(function() {     activeButton.classList.remove("animation");   }, 100); }

      Complete HTML and JavaScript File will look like that:

      • index.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); }

      Final Output:

      As can be seen when “l” button is pressed, it’s animation changes

      You can look up for the whole code with sound and images on my GitHub

标签:case,web,button,Javascript,kit,animation,music,var,new
From: https://www.cnblogs.com/weifeng1463/p/17508835.html

相关文章

  • mockito5.4.0单元测试(14) --捕获mock对象调用某方法时的参数ArgumentCaptor,断言其参
    mockito官方文档地址:https://www.javadoc.io/doc/org.mockito/mockito-core/latest/org/mockito/Mockito.html#resetting_mocks@Testpublicvoidtest_resetting(){//youcanenablepartialmockcapabilitiesselectivelyonmocks:LinkedListmock=mock(Linked......
  • .NET Core WEB API中参数的模型绑定方式
    .NETCoreWEBAPI中参数的模型绑定方式有以下几种:参考文献:.NETCoreWEBAPI中接口参数的模型绑定的理解-枫叶456-博客园(cnblogs.com)微软官方说明文档 FromForm:当请求属于表单提交,也就是content-type为application/x-www-form-urlencoded,则必须给参数加上From......
  • 初识Quantum Mini Linux Development Kit
    本人近期看到稚晖君的Linux-card的相关视频介绍,看到它极大的方便,整体只需Type-C即可供电并且算力满足目前所需要求功能也不少。于是火速下单,从SpeedStudio购入。到货后先认识这个开发套件的外观,可以说是非常小巧,功能接口也不少,可以满足大部分需求。      ......
  • C# WebApi+Swagger
    1、新建一个webapi项目 2、添加swagger的NuGet包 3、右键项目--》属性--》生成 输出勾选:XML文档文件,如果没有自动填充好路径,需要自己填写一下,文件名可以自己取 4、打开App_Start文件夹下的SwaggerConfig.cs文件,新增一个如下方法:privatestaticstringGetXmlComm......
  • 微信小程序连接websocket随记
    微信小程序需要上报经纬度到服务器,采用workman作为Websocket服务,记录一下步骤:1、修改start_gateway.php文件//$gateway=newGateway("tcp://0.0.0.0:8282");$gateway=newGateway("websocket://0.0.0.0:8282");2、在小程序后台配置socket域名(开发-> 开发管理-> 开发设......
  • LangKit:大语言模型界的“安全管家”
    ChatGPT等大语言模型一直有生成虚假信息、数据隐私、生成歧视信息等难题,阻碍了业务场景化落地。为了解决这些痛点并增强大语言模型的安全性,AI和数据监控平台WhyLabs推出了LangKit。(开源地址:https://github.com/whylabs/langkit)LangKit提供文本输入/输出监控、安全和隐私、情绪分......
  • jmeter测试websocket接口
    Jmeter测试websocket接口一.Websocket接口原理1.打开网页:从http协议,升级到websocket协议,请求简历websocket连接2.服务器返回建立成功成功3.客户端向服务端发送匹配请求4.服务端选择一个客服上线5.服务器返回客服id6.客户端向服务器发送消息7.服务器推送消息给指定的客服8.服务器向......
  • go:(三)web编程:socket
    引用:08.1.Socket编程|第八章.Web服务|《GoWeb编程》|Go技术论坛(learnku.com)1.什么是socket: 2.socket如何通信: 3.Socket基础知识:类型:TCPSocket和UDPSocket......
  • javascript连接MySQL
    varmysql =require('mysql');varconnection=mysql.createConnection({  host  :'localhost',  user  :'root',  password:'password',  port:'3306',  database:'nufix'});connecti......
  • webpack 工程化
    前端工程化webpackhtml自动快速生成语法ul>li{这是第$个li}*91.新建项目目录,运行npminit-y初始化package.json2.npminstalljquery-s安装jquery项目中安装webpack-D代表[email protected]@4.7.2-Dwebpack的基本使用......