切换按钮上的背景颜色（按键/键码）

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

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

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

然后使用数据属性将您的音频源存储在每个按钮中。

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

因此，当您单击按钮时，他的data-audio-src值会附加到您之前创建的音频元素中。

我将按钮放入 div 中，当单击子按钮时设置为活动状态，因此当您按X或Z它会“检测”一个正在播放的按钮，然后切换好按钮。

 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>

Answer 2

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

 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>