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';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>