jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<!--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 class="square1">
          <div class="content">
        Lorem
          </div>
            <div class="text">
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 class="audioB" >
              <a id="ppb1" class="fa fa-play"></a>
                
              </div>
      <div class="square2">
          <div class="content">
        Lorem 2
          </div>
          <div class="text">
       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 class="audioB" >
              <a id="ppb2" class="fa fa-play"></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>

CSS

/*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;
  
}

JavaScript

var 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');
};

var audio = 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');
     audio.play();
   }
  else
   {
     $(this).removeClass('fa-pause');
     $(this).addClass('fa-play');
     audio.pause();
   }
});

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