modifying the appearance of the play button through a JavaScript event without directly altering it

Question

modifying the appearance of the play button through a JavaScript event without directly altering it

I am currently working on building a music player from scratch using HTML, CSS, and JavaScript only. To store the list of songs, I have created an array named "songs" with details such as song name, file path, and cover image path.

let songs = [
   {songName: "Butter", filePath:"songs/1.mp3",coverPath:'covers/1.png'},
   {songName: "Boy With Luv", filePath:"songs/2.mp3",coverPath:'covers/2.jpeg'},
   {songName: "Dynamite", filePath:"songs/3.mp3",coverPath:'covers/3.jpeg'},
   {songName: "Idol", filePath:"songs/4.mp3",coverPath:'covers/4.png'},
   {songName: "Life Goes On", filePath:"songs/5.mp3",coverPath:'covers/5.jpeg'},
   {songName: "Mic Drop", filePath:"songs/6.mp3",coverPath:'covers/6.jpeg'},
]

Here is how the user interface looks:

https://i.stack.imgur.com/0Uk8l.png

Currently, when changing to the next song using the navigation buttons at the bottom, the song changes but the play icon does not update accordingly. For example, if you switch to the fourth song, the UI still shows the third song playing.

https://i.stack.imgur.com/RFswd.png

I want to modify the styling of the icon when either the next or previous button is clicked. The function has access to the current song's index for reference.

For your convenience, here is the code snippet related to the next button functionality:

//next button
document.getElementById('next').addEventListener('click', (e)=>{
 
 songIndex = (songIndex >=5) ? 0 : songIndex+1;
 audioElement.src = `songs/${songIndex}.mp3`;
 audioElement.currentTime = 0;
 audioElement.play();
 masterPlay.classList.remove('fa-play-circle');
 masterPlay.classList.add('fa-pause-circle');
 mastersongName.innerText = "BTS - "+songs[songIndex].songName;
 masterSideImg.src = songs[songIndex].coverPath;

})

Below is the complete HTML structure of the project:

<!DOCTYPE HTML>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Redify - listen music here</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
 <nav>
     <ul>
         <li class="brand"><img src="logo.png" alt="logo">Spotify</li>
         <li>Home</li>
         <li>About</li>
     </ul>
 </nav>

<div class="container">
    <div class="songList">
        <h1>Best of BTS</h1>
        <!-- Songs List Items Go Here -->
    </div>

    <div class="songBanner">
    <!-- Song Banner Content Goes Here -->  
    </div>
</div>

<div class="bottom">
    <!-- Bottom Controls Section -->
</div>
<script src="https://kit.fontawesome.com/06646b7200.js" crossorigin="anonymous"></script>
<script src="script.js"></script>

You can visit the GitHub repository for the full project implementation: https://github.com/mohitm15/Redify

javascript html css event-handling addeventlistener

Answer 1

Answer №1

I redesigned the play/pause icon configuration into a separate function:

const ICON_PLAY = 1;
const ICON_STOP= 0;

const handleSongPlayIcon = (target, isPlaying) => {
  if (isPlaying == ICON_PLAY) {
    target.classList.remove("fa-pause-circle");
    target.classList.add("fa-play-circle");
  } else if (isPlaying == ICON_STOP) {
    target.classList.remove("fa-play-circle");
    target.classList.add("fa-pause-circle");
  }
};

and made adjustments to several functions in your script for toggling icons

//Initialising Variables

let songIndex = 0;
let audioElement= new Audio("songs/0.mp3");
let masterPlay = document.getElementById("masterPlay");
let myProgressBar = document.getElementById("myProgressBar");
let gif = document.getElementById("gif");
let songItems = Array.from(document.getElementsByClassName("songItem"));
let songTitle = document.getElementsByClassName("songInfo");
let mastersongName = document.getElementById("mastersongName");
let masterSideImg = document.getElementById("masterSideImg");

// Array of Songs
let songs = [
  { songName: "Butter", filePath: "songs/1.mp3", coverPath: "covers/1.png" },
  {
    songName: "Boy With Luv",
    filePath: "songs/2.mp3",
    coverPath: "covers/2.jpeg",
  },
  { songName: "Dynamite", filePath: "songs/3.mp3", coverPath: "covers/3.jpeg" },
  { songName: "Idol", filePath: "songs/4.mp3", coverPath: "covers/4.png" },
  {
    songName: "Life Goes On",
    filePath: "songs/5.mp3",
    coverPath: "covers/5.jpeg",
  },
  { songName: "Mic Drop", filePath: "songs/6.mp3", coverPath: "covers/6.jpeg" },
];

// Reuse ICON_PLAY and ICON_STOP 
const handleSongPlayIcon = (target, isPlaying) => {
  if (isPlaying == ICON_PLAY) {
    target.classList.remove("fa-pause-circle");
    target.classList.add("fa-play-circle");
  } else if (isPlaying ==ICON_STOP ) {
    target.classList.remove("fa-play-circle");
    target.classList.add("fa-pause-circle");
  }
};

// Loop through each song item
songItems.forEach((item, i) => {
  item.getElementsByTagName("img")[0].src = songs[i].coverPath;
  item.getElementsByClassName("songName")[0].innerText = songs[i].songName;
});

// Click event listener for play/pause functionality
masterPlay.addEventListener("click", () => {
  const allSongsPlayItemElements = document.querySelectorAll(".songItemPlay");

  

  if (audioElement.paused || audioElement.currentTime <= 0) {
    audioElement.play();
    handleSongPlayIcon(masterPlay, ICON_STOP);
    handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_STOP);
    gif.style.opacity = 1;
  } else {
    audioElement.pause();
    handleSongPlayIcon(masterPlay, ICON_PLAY);
    handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_PLAY);
    gif.style.opacity = 0;
  }
});

// Event listener for updating song progress bar
audioElement.addEventListener("timeupdate", () => {
  progress = parseInt((audioElement.currentTime / audioElement.duration) * 100);
  myProgressBar.value = progress;
});

// Update song playback time on manual change
myProgressBar.addEventListener("change", () => {
  audioElement.currentTime =(myProgressBar.value * audioElement.duration) / 100;
});

// Function to display play symbol for all songs
const makeAllPlay = () => {
  Array.from(document.getElementsByClassName("songItemPlay")).forEach(
    (item) => {
      handleSongPlayIcon(item, ICON_PLAY);
    }
  );
};

// Event listeners for song playing/pausing
let selectedSongIndex;
Array.from(document.getElementsByClassName("songItemPlay")).forEach((item) => {
  item.addEventListener("click", (e) => {
    makeAllPlay();
    songIndex = parseInt(e.target.id);
    
    if (audioElement.paused === true) {
      selectedSongIndex = songIndex;
      audioElement.src = `songs/${songIndex}.mp3`;
      audioElement.currentTime = 0;
      audioElement.play();
      
      handleSongPlayIcon(e.target, ICON_STOP);
      handleSongPlayIcon(masterPlay, ICON_STOP);
      gif.style.opacity = 1;
    } else if (audioElement.paused === false) {
      if (selectedSongIndex === songIndex) {
        audioElement.pause();
        
        handleSongPlayIcon(e.target, ICON_PLAY);
        handleSongPlayIcon(masterPlay, ICON_PLAY);
        gif.style.opacity = 0;
      } else {
        makeAllPlay();
        songIndex = parseInt(e.target.id);
        selectedSongIndex = songIndex;

        audioElement.src = `songs/${songIndex}.mp3`;
        audioElement.currentTime = 0;
        audioElement.play();
        
        handleSongPlayIcon(e.target, ICON_STOP);
        handleSongPlayIcon(masterPlay, ICON_STOP);
        gif.style.opacity = 1;
      }
    }
    
    mastersongName.innerText = "BTS - " + songs[songIndex].songName;
    masterSideImg.src = songs[songIndex].coverPath;

    // Check if song has ended
    audioElement.addEventListener("timeupdate", () => {
      if (audioElement.currentTime === audioElement.duration) {
        makeAllPlay();
        console.log("song Completed");
        songIndex = songIndex >= 5 ? 0 : songIndex + 1;
        audioElement.src = `songs/${songIndex}.mp3`;
        audioElement.currentTime = 0;
        audioElement.play();
        mastersongName.innerText = "BTS - " + songs[songIndex].songName;
        masterSideImg.src = songs[songIndex].coverPath;
        
        const allSongsPlayItemElements = document.querySelectorAll(".songItemPlay");
        handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_STOP);
      }
    });
  });
});

// Next button functionality
document.getElementById("next").addEventListener("click", () => {
  const allSongsPlayItemElements = document.querySelectorAll(".songItemPlay");
  
  handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_PLAY);

  songIndex = songIndex >= 5 ? 0 : songIndex + 1;
  audioElement.src = `songs/${songIndex}.mp3`;
  audioElement.currentTime = 0;
  audioElement.play();

  handleSongPlayIcon(masterPlay, ICON_STOP);
  mastersongName.innerText = "BTS - " + songs[songIndex].songName;
  masterSideImg.src = songs[songIndex].coverPath;
  
  handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_STOP);
});

// Previous button functionality
document.getElementById("previous").addEventListener("click", () => {
  const allSongsPlayItemElements = document.querySelectorAll(".songItemPlay");
  
  handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_PLAY);

  songIndex = songIndex <= 0 ? 5 : songIndex - 1;
  audioElement.src = `songs/${songIndex}.mp3`;
  audioElement.currentTime = 0;
  audioElement.play();

  handleSongPlayIcon(masterPlay, ICON_STOP);
  mastersongName.innerText = "BTS - " + songs[songIndex].songName;
  masterSideImg.src = songs[songIndex].coverPath;

  handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_STOP);
});

Answer 2

I redesigned the play/pause icon configuration into a separate function:

const ICON_PLAY = 1;
const ICON_STOP= 0;

const handleSongPlayIcon = (target, isPlaying) => {
  if (isPlaying == ICON_PLAY) {
    target.classList.remove("fa-pause-circle");
    target.classList.add("fa-play-circle");
  } else if (isPlaying == ICON_STOP) {
    target.classList.remove("fa-play-circle");
    target.classList.add("fa-pause-circle");
  }
};

and made adjustments to several functions in your script for toggling icons

//Initialising Variables

let songIndex = 0;
let audioElement= new Audio("songs/0.mp3");
let masterPlay = document.getElementById("masterPlay");
let myProgressBar = document.getElementById("myProgressBar");
let gif = document.getElementById("gif");
let songItems = Array.from(document.getElementsByClassName("songItem"));
let songTitle = document.getElementsByClassName("songInfo");
let mastersongName = document.getElementById("mastersongName");
let masterSideImg = document.getElementById("masterSideImg");

// Array of Songs
let songs = [
  { songName: "Butter", filePath: "songs/1.mp3", coverPath: "covers/1.png" },
  {
    songName: "Boy With Luv",
    filePath: "songs/2.mp3",
    coverPath: "covers/2.jpeg",
  },
  { songName: "Dynamite", filePath: "songs/3.mp3", coverPath: "covers/3.jpeg" },
  { songName: "Idol", filePath: "songs/4.mp3", coverPath: "covers/4.png" },
  {
    songName: "Life Goes On",
    filePath: "songs/5.mp3",
    coverPath: "covers/5.jpeg",
  },
  { songName: "Mic Drop", filePath: "songs/6.mp3", coverPath: "covers/6.jpeg" },
];

// Reuse ICON_PLAY and ICON_STOP 
const handleSongPlayIcon = (target, isPlaying) => {
  if (isPlaying == ICON_PLAY) {
    target.classList.remove("fa-pause-circle");
    target.classList.add("fa-play-circle");
  } else if (isPlaying ==ICON_STOP ) {
    target.classList.remove("fa-play-circle");
    target.classList.add("fa-pause-circle");
  }
};

// Loop through each song item
songItems.forEach((item, i) => {
  item.getElementsByTagName("img")[0].src = songs[i].coverPath;
  item.getElementsByClassName("songName")[0].innerText = songs[i].songName;
});

// Click event listener for play/pause functionality
masterPlay.addEventListener("click", () => {
  const allSongsPlayItemElements = document.querySelectorAll(".songItemPlay");

  

  if (audioElement.paused || audioElement.currentTime <= 0) {
    audioElement.play();
    handleSongPlayIcon(masterPlay, ICON_STOP);
    handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_STOP);
    gif.style.opacity = 1;
  } else {
    audioElement.pause();
    handleSongPlayIcon(masterPlay, ICON_PLAY);
    handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_PLAY);
    gif.style.opacity = 0;
  }
});

// Event listener for updating song progress bar
audioElement.addEventListener("timeupdate", () => {
  progress = parseInt((audioElement.currentTime / audioElement.duration) * 100);
  myProgressBar.value = progress;
});

// Update song playback time on manual change
myProgressBar.addEventListener("change", () => {
  audioElement.currentTime =(myProgressBar.value * audioElement.duration) / 100;
});

// Function to display play symbol for all songs
const makeAllPlay = () => {
  Array.from(document.getElementsByClassName("songItemPlay")).forEach(
    (item) => {
      handleSongPlayIcon(item, ICON_PLAY);
    }
  );
};

// Event listeners for song playing/pausing
let selectedSongIndex;
Array.from(document.getElementsByClassName("songItemPlay")).forEach((item) => {
  item.addEventListener("click", (e) => {
    makeAllPlay();
    songIndex = parseInt(e.target.id);
    
    if (audioElement.paused === true) {
      selectedSongIndex = songIndex;
      audioElement.src = `songs/${songIndex}.mp3`;
      audioElement.currentTime = 0;
      audioElement.play();
      
      handleSongPlayIcon(e.target, ICON_STOP);
      handleSongPlayIcon(masterPlay, ICON_STOP);
      gif.style.opacity = 1;
    } else if (audioElement.paused === false) {
      if (selectedSongIndex === songIndex) {
        audioElement.pause();
        
        handleSongPlayIcon(e.target, ICON_PLAY);
        handleSongPlayIcon(masterPlay, ICON_PLAY);
        gif.style.opacity = 0;
      } else {
        makeAllPlay();
        songIndex = parseInt(e.target.id);
        selectedSongIndex = songIndex;

        audioElement.src = `songs/${songIndex}.mp3`;
        audioElement.currentTime = 0;
        audioElement.play();
        
        handleSongPlayIcon(e.target, ICON_STOP);
        handleSongPlayIcon(masterPlay, ICON_STOP);
        gif.style.opacity = 1;
      }
    }
    
    mastersongName.innerText = "BTS - " + songs[songIndex].songName;
    masterSideImg.src = songs[songIndex].coverPath;

    // Check if song has ended
    audioElement.addEventListener("timeupdate", () => {
      if (audioElement.currentTime === audioElement.duration) {
        makeAllPlay();
        console.log("song Completed");
        songIndex = songIndex >= 5 ? 0 : songIndex + 1;
        audioElement.src = `songs/${songIndex}.mp3`;
        audioElement.currentTime = 0;
        audioElement.play();
        mastersongName.innerText = "BTS - " + songs[songIndex].songName;
        masterSideImg.src = songs[songIndex].coverPath;
        
        const allSongsPlayItemElements = document.querySelectorAll(".songItemPlay");
        handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_STOP);
      }
    });
  });
});

// Next button functionality
document.getElementById("next").addEventListener("click", () => {
  const allSongsPlayItemElements = document.querySelectorAll(".songItemPlay");
  
  handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_PLAY);

  songIndex = songIndex >= 5 ? 0 : songIndex + 1;
  audioElement.src = `songs/${songIndex}.mp3`;
  audioElement.currentTime = 0;
  audioElement.play();

  handleSongPlayIcon(masterPlay, ICON_STOP);
  mastersongName.innerText = "BTS - " + songs[songIndex].songName;
  masterSideImg.src = songs[songIndex].coverPath;
  
  handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_STOP);
});

// Previous button functionality
document.getElementById("previous").addEventListener("click", () => {
  const allSongsPlayItemElements = document.querySelectorAll(".songItemPlay");
  
  handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_PLAY);

  songIndex = songIndex <= 0 ? 5 : songIndex - 1;
  audioElement.src = `songs/${songIndex}.mp3`;
  audioElement.currentTime = 0;
  audioElement.play();

  handleSongPlayIcon(masterPlay, ICON_STOP);
  mastersongName.innerText = "BTS - " + songs[songIndex].songName;
  masterSideImg.src = songs[songIndex].coverPath;

  handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_STOP);
});

Answer 3

Answer №2

It appears that you may have overlooked calling makeAllPlay(); at the start of the previous/next button click handlers. Additionally, don't forget to update the currently playing song item to display the pause button.

Be sure to include the following code snippet near the beginning of both click handlers (for previous/next buttons):

makeAllPlay();
const itemElem = document.getElementsByClassName("songItemPlay")[songIndex];
itemElem.classList.remove('fa-play-circle');
itemElem.classList.add('fa-pause-circle');

Answer 4

It appears that you may have overlooked calling makeAllPlay(); at the start of the previous/next button click handlers. Additionally, don't forget to update the currently playing song item to display the pause button.

Be sure to include the following code snippet near the beginning of both click handlers (for previous/next buttons):

makeAllPlay();
const itemElem = document.getElementsByClassName("songItemPlay")[songIndex];
itemElem.classList.remove('fa-play-circle');
itemElem.classList.add('fa-pause-circle');

modifying the appearance of the play button through a JavaScript event without directly altering it

Answer №1

Answer №2

Similar questions

Executing a function while adjusting a range slider

Tips for shuffling the sequence of EJS variables

What is the best way to use jQuery to filter data in a table by clicking on a specific table row?

Potential issue: Firefox causes distortion in animated stroke-linecap="round" properties

Ways to remove an item from firebase database

Making AngularJS work with angular-ui bootstrap and ensuring compatibility with IE8

What is the best method to update the accessor value of my react table depending on certain data conditions?

Is there a way to retrieve the io object within the io.sockets.on callback function?

Is the jQuery form plugin not passing any data to Node.js?

Enhancing the model using Sequelize JS

Issue: parsing error, only 0 bytes out of 4344 have been successfully parsed on Node.js platform

the order of initialization in angularjs directives with templateUrl

Sending an array from one page to another with Vue

The curious case of unusual behavior in jQuery's livequery() method

Having trouble running the script, chrome error with message passing?

How to easily update a URL string in Angular 5 router without altering the state of the application

Adjust the height of a div using jQuery animate based on the amount of text within

Comparison between Mobile Phone's innerWidth and innerHeight Versus Resolution

Enhance the Material UI StepIcon by embedding real icons within the background circle

Implementing sound playback within an AJAX response