时间戳

首页 > 解决方案 > 我已经使用 if 和 else 来使用 click 播放音乐，但是如何在 Javascript 中使用键盘播放音乐？

javascript - 我已经使用 if 和 else 来使用 click 播放音乐，但是如何在 Javascript 中使用键盘播放音乐？

问题描述

我已经使用if并else在drumsAudio functioneventListener 中调用它以获取“click”。我怎样才能为 eventListener 'keydown' 做同样的事情？我是 Javascript 新手。可以使用switch case代替if elsein drumsAudio()。基本上我想同时使用click和键盘来访问按钮。我怎么能tell认为 event.key 等于 w、a、s、d、j、k、l 类？使用switchcase 它具有关键因素，因此它可以访问密钥，但是当我们使用类访问并使用 contains 关键字检查时，如何等同于 event.key = contains('')？

const drums = document.querySelectorAll('.drum');

drums.forEach(function(drum){
    drum.addEventListener('click',function(e){
        let alphabet = e.currentTarget.classList;
        drumsAudio(alphabet);

    });  
});
drums.forEach(function(drum){
    drum.addEventListener('keydown',function(e){
        let alphabet = e.key
        d(alphabet);
    });

    });  

function drumsAudio(alphabet){
    if (alphabet.contains('w')){
        var tom1 = new Audio('sounds/tom-1.mp3');
        tom1.play();
    }
    if (alphabet.contains('a')){
        var tom2 = new Audio('sounds/tom-2.mp3');
        tom2.play();
    }
    if (alphabet.contains('s')){
        var tom3 = new Audio('sounds/tom-3.mp3');
        tom3.play();
    }
    if (alphabet.contains('d')){
        var tom4 = new Audio('sounds/tom-4.mp3');
        tom4.play();
    }
    if (alphabet.contains('j')){
        var snare = new Audio('sounds/snare.mp3');
        snare.play();
    }
    if (alphabet.contains('k')){
        var crash = new Audio('sounds/crash.mp3');
        crash.play();
    }
    if (alphabet.contains('l')){
        var kick = new Audio('sounds/kick-bass.mp3');
        kick.play();
    }
}
body {
  text-align: center;
  background-color: #283149;
}

h1 {
  font-size: 5rem;
  color: #DBEDF3;
  font-family: "Arvo", cursive;
  text-shadow: 3px 0 #DA0463;

}

footer {
  color: #DBEDF3;
  font-family: sans-serif;
}

.w {
  background: url(images/tom1.png);
}

.a {
  background: url(images/tom2.png);
}

.s {
  background: url(images/tom3.png);
}

.d {
  background: url(images/tom4.png);
}

.j {
  background: url(images/snare.png);
}

.k {
  background: url(images/crash.png);
}

.l {
  background: url(images/kick.png);
}

.set {
  margin: 10% auto;
}

.game-over {
  background-color: red;
  opacity: 0.8;
}

.pressed {
  box-shadow: 0 3px 4px 0 #DBEDF3;
  opacity: 0.5;
}

.red {
  color: red;
}

.drum {
  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;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Drum Kit</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>

<body>

  <h1 id="title">Drum  Kit</h1>
  <div class="set">
    <button class="w drum">w</button>
    <button class="a drum">a</button>
    <button class="s drum">s</button>
    <button class="d drum">d</button>
    <button class="j drum">j</button>
    <button class="k drum">k</button>
    <button class="l drum">l</button>
  </div>


  <footer>
    Made with ❤️ in India.
  </footer>
<script src="app.js"></script>
</body>

</html>

标签： javascript

解决方案

定义一个键值对对象，其中键是键，值是文件路径：

var sounds = {
    w: 'sounds/tom-1.mp3',
    a: 'sounds/tom-2.mp3',
    s: 'sounds/tom-3.mp3',
    d: 'sounds/tom-4.mp3',
    j: 'sounds/snare.mp3',
    k: 'sounds/crash.mp3',
    l: 'sounds/kick-bass.mp3'
}

好的，让我们确保您允许drumsAudio将其作为参数获取并默认为我们已经知道的值：

function drumsAudio(alphabet, sounds = {
    w: 'sounds/tom-1.mp3',
    a: 'sounds/tom-2.mp3',
    s: 'sounds/tom-3.mp3',
    d: 'sounds/tom-4.mp3',
    j: 'sounds/snare.mp3',
    k: 'sounds/crash.mp3',
    l: 'sounds/kick-bass.mp3'
}){
    if (sounds[alphabet]) (new Audio(sounds[alphabet])).play();
}

如您所见，我们已经成功地将function主体简化为单线，因为我们将相同的模式应用于所有支持的键，只有旋律不同。

推荐阅读