切换按钮的背景颜色(keydown / keycodes)

Question

所以，当我按下按钮1 "1播放/停止"时，按钮变成绿色，当我再次按下它时，它删除了颜色。如果我按下按钮2播放/停止同样的事情也会发生。

如果其中一个按钮播放，我按下另一个按钮，它会移除其中一个按钮的颜色，转到另一个按钮。

我想对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>

Answer 2

您可以使用new Audio()来创建和操作您的音频元素。

Audio()构造函数创建并返回一个新的HTMLAudioElement哪些可以附加到文档中供用户交互使用和/或收听，或者可以在屏幕外使用来管理和播放音频。

然后使用data属性在每个按钮中存储音频src。

HTML5在设计时考虑了数据的可扩展性，这些数据应该与特定元素相关联，但不需要具有任何定义的含义。data-*属性允许我们在标准的、语义化的HTML元素上存储额外的信息，而不需要其他hack，比如非标准的属性，或者DOM上的额外属性。

所以当你点击按钮，他的data-audio-src值附加到你之前创建的音频元素。

我把按钮放到div中，当子按钮被点击时，div设置为活动，所以当你按下X或Z时，它会"检测"。哪一个正在播放，然后按下good键。

let nowplaying = "";
$(document).ready(function() {
let btnPlays = $('.btn-play')
btnPlays.on('click', function(e) {
btnPlays.removeClass('colors');
$('.btnHolder.active').removeClass('active');
$(this).toggleClass('colors').parent().addClass('active');
play(new Audio($(this).data('audio-src')));
})
}).on("keydown", function(e) {
if (e.keyCode === 88) {
console.log('X')
$('.btnHolder.active>button.btn-play:eq(0)').click()
} else if (e.keyCode === 90) {
console.log('Z')
$('.btnHolder.active>button.btn-play:eq(1)').click()
}
});
;

function play(audio) {
if (audio != nowplaying) {
if (nowplaying != "") {
nowplaying.pause();
}
audio.loop = true;
audio.play();
nowplaying = audio;
console.log("Now playing : " + nowplaying.src);
} else {
audio.pause();
audio.currentTime = 0;
nowplaying = "";
}
}

.btn-play {
padding: 20px 30px
}
.colors {
background-color: green;
}
.btnHolder.active {
background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btnHolder active">
<button class="btn-play" id="btn1" data-audio-src="https://freesound.org/data/previews/60/60703_781423-lq.mp3">1 PLAY / STOP</button>
<button class="btn-play" id="btn2" data-audio-src="https://freesound.org/data/previews/60/60703_781423-lq.mp3">2 PLAY / STOP</button>
</div>
<hr>
<div class="btnHolder">
<button class="btn-play" id="btn3" data-audio-src="https://freesound.org/data/previews/60/60703_781423-lq.mp3">3 PLAY / STOP</button>
<button class="btn-play" id="btn4" data-audio-src="https://freesound.org/data/previews/60/60703_781423-lq.mp3">4 PLAY / STOP</button>
</div>