javascript - 切换按钮上的背景颜色(按键/键码)

Question

所以，当我按下按钮 1“1 PLAY/STOP”时，按钮变成绿色，当我再次按下它时它会去除颜色。
如果我按下 button2“2 PLAY/STOP”，同样的事情会发生。
如果两个按钮之一播放而我按下另一个按钮，它会删除一个按钮的颜色并转到另一个。
我想对 Z 按钮(按钮 1)和 X(按钮 2)执行相同的操作。
例如，当我按下 Z 按钮(键码 90)或 X 键(键码 88)来执行鼠标操作时。
如果所有这些都有更好的编码，那将非常有用，因为它有 20 多个按钮......
非常感谢!!!

$(document).ready(function(){
  $('#btn1, #btn2').on('click', function() {
    $('#btn1, #btn2').not(this).removeClass('colors');
    $(this).toggleClass('colors');
  });
});

 
var nowplaying = "";

function playButton1() {
  var audio = document.getElementById("1");
  play(audio);
} 

document.addEventListener("keydown", function(e){
  if (e.keyCode === 90){
    var audio = document.getElementById("1");
    play(audio);
  }
});


function playButton2() {
  var audio = document.getElementById("2");
  play(audio);
} 

document.addEventListener("keydown", function(e){
  if (e.keyCode === 88){
    var audio = document.getElementById("2");
    play(audio);
  }
});


function play(audio) { 
  if (audio != nowplaying){
    if (nowplaying != "") {
      nowplaying.pause();
    }
    audio.loop = true;
    audio.play(audio);
    nowplaying = audio;
  } else {
    audio.pause();
    audio.currentTime = 0;
    nowplaying = "";
  }
}

#btn1, #btn2 {
  padding:20px 30px
}

.colors {
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn1" onclick="playButton1()">1 PLAY / STOP</button>

<button id="btn2" onclick="playButton2()">2 PLAY / STOP</button>

<audio id="1" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>

<audio id="2" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>

Answer 1

当然，它可以更好地编码，但它显示了这个想法:

var nowplaying = "";

function playButton(i) {
  play($(`#${i}`).get(0));
} 

function play(audio) { 
  if (audio != nowplaying){
    if (nowplaying != "") {
      nowplaying.pause();
    }
    audio.loop = true;
    audio.play(audio);
    nowplaying = audio;
  } else {
    audio.pause();
    audio.currentTime = 0;
    nowplaying = "";
  }
}

$(function(){

  $('#btn1, #btn2').on('click', function(e) {
    e.preventDefault();
    $('#btn1, #btn2').not(this).removeClass('colors');
    $(this).toggleClass('colors');
  });
  
  $(document).on("keydown", function(e){
    if (e.keyCode === 90){
      $("#btn2").trigger('click');
    } else if (e.keyCode === 88) {
      $("#btn1").trigger('click');
    }
  });

});

#btn1, #btn2 {
  padding:20px 30px
}

.colors {
  background-color:green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btn1" onclick="playButton(1)">1 PLAY / STOP</button>

<button id="btn2" onclick="playButton(2)">2 PLAY / STOP</button>

<audio id="1" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>

<audio id="2" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"></audio>