编程知识 cdmana.com

Simulated drumming

Function description and final effect

By listening to some keys on the keyboard , When pressing the corresponding keyboard , Play the audio 、DIV Make style response .

Final effect :( Every move, every time Every move, every time

 play the drum .gif

General layout style (html+css)

There is a row of buttons on the page , Pictured .

3E33F90D-6100-466a-BC26-A313050DD916.png

dom The structure is like this

<div class="container">
      <div class="box-list">
        <div class="box" data-key="A">A</div>
        ..... Many Box
      </div>
</div>     
 Copy code 

effect (js)

Use an object to represent data-key And audio files

const musicBox = {
        A: "boom.wav",
        B: "clap.wav",
        C: "hihat.wav",
        D: "kick.wav",
        E: "openhat.wav",
        F: "ride.wav",
        G: "snare.wav",
        H: "tink.wav",
        I: "tom.wav",
      };
 Copy code 

Mouse click version

Use the event delegate to listen and click , And pass event Get the clicked target ( And some properties of the target )

boxList.addEventListener("click", (event) => {
    // Determine whether the target element is clicked 
    if (event.target.className !== "box") return;
    // Get target element 
    const target = event.target;
    // obtain key
    const key = target.dataset.key;
    // Here are the clicked dom Do something 
    dealwithDom(target);
    // Here are some operations for audio 
    dealwithAudio(key);
})
 Copy code 

dealwithDom Mainly do : change dom The style of

 function dealwithDom(dom) {
        const target = dom;
        // Change the style of the target element 
        target.className = "box active";
        // Change the style back later 
        setTimeout(() => {
          target.className = "box";
        }, 300);
}
 Copy code 

dealwithAudio Mainly do : according to key Determine the path of the audio file , And play audio

function dealwithAudio(key) {
        // obtain audio Elements 
        const myaudio = document.getElementById("myaudio");
        // according to key Put together audio Of src
        myaudio.src = "./sounds/" + musicBox[key];
        // Play audio
        myaudio.play();
}
 Copy code 

Key version

Need to add a key array

const keybox = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];
 Copy code 

You need to set the of listening events click Change to keydown, Change the subject of monitoring to window

 window.addEventListener("keydown", (event) => {...})
 Copy code 

Replace the code that previously judged the target element with the judgment key , Remember to capitalize

if(!keybox.includes(event.key.toUpperCase())) return
 Copy code 

according to key, Find the corresponding dom target

const target = document.querySelector(`div[data-key=${key}]`);
 Copy code 

Last call dealwithDom and dealwithAudio That's it

Code

Specific pictures 、 Audio material can be in github Search on javascript30 download .

here Will pass the code to remove the pictures and materials , For reference only .

版权声明
本文为[Just a little white]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210909131415419T.html

Scroll to Top