Toggle background color on button (keydown / keycodes)-CodePudding

So, When I press the button1 "1 PLAY / STOP", the button turns green and when I press it again it removes the color. If I press the button2 "2 PLAY / STOP" the same thing happens.

If one of the two buttons plays and I press the other, it removes the color of one and goes to the other.

I want to do the same with the Z button (button 1) and X (button 2). For example, when I press the Z button (keycode 90) or the X button (keycode 88) to do what it does with the mouse.

And if there is better coding in all this it would be very useful because it is more than 20 buttons... Thanks a lot!!!

$(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>

CodePudding user response：

Of course it could be better coded but it shows the idea:

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>

CodePudding user response：

You can use new Audio() to create and manipulate easily your audio element.

The Audio() constructor creates and returns a new HTMLAudioElement which can be either attached to a document for the user to interact with and/or listen to, or can be used offscreen to manage and play audio.

Then use data attributes tu store your audio src in each button.

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.

So when you click on button, his data-audio-src value append to your previously created audio element.

I put button into div wich is set to active when a child button is clicked so when you press X or Z it "detect" wich one is playing then switch the good button.

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>