How to pop up Play/Pause button after clicking on image for playing songs

Question

I am creating a music application like 'YouTube music' and getting issues with the Play/Pause button. when I click on any image for playing the song, the play/pause button only shows one specific image again and again, and hard to know which song is running on the application. I did display 'none/block/' in the javascript function, but still facing an issue.

I am a beginner and passionate to know more. Any help would be appreciated

Here is the code of that application:

let isplaying = false;
let btnplay = document.getElementById('play_btn');
btnplay.addEventListener('click', () => {
  if (isplaying) {
    pausesongs(audioId);
  } else {
    playsongs(audioId)
  };
});

function playsongs(audioId) {
  isplaying = true;
  let audio = document.getElementById(audioId);
  // clickPage();
  audio.play();
  btnplay.style.display = 'block';
  btnplay.classList.replace('fa-play', 'fa-pause')

}

function pausesongs(audioId) {
  isplaying = false;
  let audio = document.getElementById(audioId);
  audio.pause();
  btnplay.style.display = 'none';

Answer 1

enter code here

            <!-- <audio  src="../music/song3.mp3"><img src="https://fooltop.com/wp-content/uploads/2020/05/karan-Aujla-best-songs.jpg" alt="" class="song_img"></audio> -->
            <img onclick="playsongs('punjabi')" ondblclick="pausesongs('punjabi')"
                src="https://fooltop.com/wp-content/uploads/2020/05/karan-Aujla-best-songs.jpg" alt=""
                class="song_img">
            <!-- <i id="play_btn" class="fa fa-play"></i> -->
            <audio id="punjabi" src="../music/song3.mp3"></audio>

            <div class="song_details_with_views">
                <h2 class="song_name">Itz a Hustle</h2>
                <p class="channel_name">Karan Aujla</p>
            </div>
        </a>


    </div>