Js multiple buttons player audio-CodePudding

I am looking for a way to play a different sound on each player and have the ability to pause play and have two players not play at the same time. I would like to play as many as I want if possible. My js currently only works for one player.

All the code on js fiddle: http://jsfiddle.net/st2b9rfn/1/

Only js :

 var audio = new Audio("https://assets.mixkit.co/sfx/download/mixkit-retro-game-notification-212.wav");

$('#ppb1').on("click",function(){
  if($(this).hasClass('fa-play'))
   {
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     audio.play();
   }
  else
   {
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     audio.pause();
   }
});

audio.onended = function() {
     $("#ppb1").removeClass('fa-pause');
     $("#ppb1").addClass('fa-play');
};

CodePudding user response：

var is not work inside of function use let
same name variable not work use name like audio and audio1

let audio = new Audio("https://assets.mixkit.co/sfx/download/mixkit-arcade-video-game-bonus-2044.wav");

$('#ppb1').on("click",function(){
  if($(this).hasClass('fa-play'))
   {
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     audio.play();
   }
  else
   {
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     audio.pause();
   }
});

audio.onended = function() {
     $("#ppb1").removeClass('fa-pause');
     $("#ppb1").addClass('fa-play');
};

let audio1 = new Audio("https://assets.mixkit.co/sfx/download/mixkit-retro-game-notification-212.wav");

$('#ppb2').on("click",function(){
  if($(this).hasClass('fa-play'))
   {
     $(this).removeClass('fa-play');
     $(this).addClass('fa-pause');
     audio1.play();
   }
  else
   {
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     audio1.pause();
   }
});

audio.onended = function() {
     $("#ppb2").removeClass('fa-pause');
     $("#ppb2").addClass('fa-play');
};

/*version 2.7.b*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');

*{

background: color #f7f7f7; ;

}

html, body {
  height: 100%;
  margin: 0px;
}

.square1{
  width: 90vw;
  height: 63vw;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  background: #F7F7F7;

}

.content{
  font-size: 5vw; 
  font-weight: bold;
  margin-top: 5%;
  margin-left: 5%;
  position: absolute;
  color: #252525;
  font-family: 'Inter', sans-serif;
  
}

.text {
  font-size: 4vw;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Inter', sans-serif;
  color: #AEAEAE;
  padding-top: 15%;
  padding-left: 5%;
   
}
#ppb1{
  font-size: 4vw;
  cursor: pointer;
  color: white;
  
}

.audioB {
  
  width: 90%;
  height: 15%;
  margin-top: 5%;
  margin-left: auto;
  margin-right: auto;
  background: #252122;
  border-radius: 3vw;
  text-align: center;
  padding-top: 5%;
  font-size: 4vw;
  font-weight: bold;
  font-family: 'Inter', sans-serif;
  color: white;
  

}

.square2{
  width: 90vw;
  height: 63vw;
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  background: #F7F7F7;
  
}

<!--version 2.7.b-->
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0" />
    <link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
    </head>
    <body>
    <div >
          <div >
        Lorem
          </div>
            <div >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor purus sit amet imperdiet volutpat. Aenean sapien urna, volutpat a dapibus viverra, suscipit in tellus. 
            </div>
            
            <div  >
              <a id="ppb1" ></a>
                
              </div>
      <div >
          <div >
        Lorem 2
          </div>
          <div >
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor purus sit amet imperdiet volutpat. Aenean sapien urna, volutpat a dapibus viverra, suscipit in tellus. 
              </div>
              <div  >
              <a id="ppb2" ></a>
                
              </div>

      
      <script  src="index.js"></script>
  </body>
  <footer>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>

  </footer>

CodePudding user response：

You can use an array of objects to iterate over the audio data and trigger each one.

let data =[
{
    audio:new Audio("https://github.com/Alaixs/ChantSupporter/raw/beta/Audio2.mp3"), 
    id:'#ppb1',
    playOnlyId:'#ppb1_only'
},
{
    audio:new Audio("https://github.com/Alaixs/ChantSupporter/raw/beta/Audio2.mp3"), 
    id:'#ppb2',
    playOnlyId:'#ppb2_only'
}
];

Then iterate over data to respond to the events and play the correct audio. It is much easier when the information is ordered and the code is not repeated.

data.forEach((d)=>{
    // Get the element
    $(d.id).on("click",function(){
    // Play and change the DOM
    if($(this).hasClass('fa-play'))
     {
       $(this).removeClass('fa-play');
       $(this).addClass('fa-pause');
       d.audio.play();
     }
    else
     {
       $(this).removeClass('fa-pause');
       $(this).addClass('fa-play');
       d.audio.pause();
     }
  });
  
  // you can use another button to stop all and play this
    // data.forEach((e)=>e.audio.stop()); // Iterate over audios and stop them
    // then play d.audio.play(); // Play selected audio
});