使用 JavaScript 事件间接更改播放按钮样式

Question

我正在构建一个仅使用 HTML-css-javascript 的音乐播放器。我有一个存储在数组中的音乐列表，如下所示。

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'},
]

UI 看起来像这样：

看起来不错，点击特定歌曲时，歌曲名称旁边的播放图标会发生变化，但是当我使用底部的下一首按钮更改歌曲时，歌曲发生变化但图标仍然保持不变。正如您在第二张图片中看到的那样，我已更改为第四首歌曲，但音乐列表仍显示正在播放第三首歌曲。

我需要更改 styling of the icon with the click of the next&previous button at the bottom. I have songindex of the current song playing in the function.

附上 nextButton 代码以供参考：

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

})

完成HTML代码：

    <!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>
        <div class="songitemContainer">
            <div class="songItem">
                <img alt="1">
                <span class="songName">Butter</span>
                <span class="songlistPlay">
                    <span class="timestamp">3:41
                        <i id="0" class="far songItemPlay fa-1.5x fa-play-circle"></i>
                    </span> 
                </span>
            </div>
            <div class="songItem">
                <img alt="1">
                <span class="songName">Butter</span>
                <span class="songlistPlay">
                    <span class="timestamp">3:41
                        <i id="1" class="far songItemPlay fa-1.5x fa-play-circle"></i>
                    </span> 
                </span>
            </div>
            <div class="songItem">
                <img alt="1">
                <span class="songName">Butter</span>
                <span class="songlistPlay">
                    <span class="timestamp">3:41
                        <i id="2" class="far songItemPlay fa-1.5x fa-play-circle"></i>
                    </span> 
                </span>
            </div>
            <div class="songItem">
                <img alt="1">
                <span class="songName">Butter</span>
                <span class="songlistPlay">
                    <span class="timestamp">3:41
                        <i id="3" class="far songItemPlay fa-1.5x fa-play-circle"></i>
                    </span> 
                </span>
            </div>
            <div class="songItem">
                <img alt="1">
                <span class="songName">Butter</span>
                <span class="songlistPlay">
                    <span class="timestamp">3:41
                        <i id="4" class="far songItemPlay fa-1.5x fa-play-circle"></i>
                    </span> 
                </span>
            </div>
            <div class="songItem">
                <img alt="1">
                <span class="songName">Butter</span>
                <span class="songlistPlay">
                    <span class="timestamp">3:41
                        <i id="5" class="far songItemPlay fa-1.5x fa-play-circle"></i>
                    </span> 
                </span>
            </div>
        </div>
    </div>

    <div class="songBanner">
      
    </div>
</div>


<div class="bottom">
    <img src="covers/1.png" alt="side_img" width="60px" id="masterSideImg">
    <div class="bottomprogress">
        <input type="range" name="range" id="myProgressBar" min="0" max="100" value=0>
        <div class="icons">
            <i class="fas fa-2x fa-step-backward" id="previous"></i>
            <i class="far fa-2x fa-play-circle" id="masterPlay"></i>
            <i class="fas fa-2x fa-step-forward" id="next"></i>
        </div>
        <div class="songInfo">
            <img src="playing.gif" width="32px" alt="playing" id="gif"><span id="mastersongName">BTS - Butter</span> 
        </div>
    </div>
</div>
<script src="https://kit.fontawesome.com/06646b7200.js" crossorigin="anonymous"></script>
<script src="script.js"></script>

完整的link项目在这里给出：https://github.com/mohitm15/Redify

Answer 1

在我看来，您好像忘记在 previous/next 按钮单击处理程序的开头调用 makeAllPlay();。此外，您还需要更改新播放的歌曲项目以显示暂停按钮。

在两个点击处理程序的开头附近（对于 previous/next 按钮）添加：

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

Answer 2

我将你的 play/pause 图标设置部分重构为一个函数：

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");
  }
};

并调整了代码中的几个函数，切换图标

//Variable initialisation

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");
//console.log(songTitle.innerText)


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" },
];


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");
  }
};

songItems.forEach((item, i) => {
  //console.log(item, i);
  item.getElementsByTagName("img")[0].src = songs[i].coverPath;
  item.getElementsByClassName("songName")[0].innerText = songs[i].songName;
  //item.getElementsByClassName("timestamp")[0].innerText = parseInt(audioElement.duration*1);
});
//audioElement.play();

//handle play/pause
masterPlay.addEventListener("click", () => {
  // grab all the icon elements on the page
  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;
  }
});

//Listen to event
audioElement.addEventListener("timeupdate", () => {
  //update songbar
  progress = parseInt((audioElement.currentTime / audioElement.duration) * 100);
  myProgressBar.value = progress;
});

myProgressBar.addEventListener("change", () => {
  audioElement.currentTime =
    (myProgressBar.value * audioElement.duration) / 100;
});

//songlist appear on landing page

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

//songList :eventListener for song playing/pausing
let selectedSongIndex;
Array.from(document.getElementsByClassName("songItemPlay")).forEach((item) => {
  item.addEventListener("click", (e) => {
    //console.log(e.target) gives => <i class="far songItemPlay fa-1.5x fa-pause-circle" aria-hidden="true"></i>

    makeAllPlay();
    songIndex = parseInt(e.target.id);
    //songIndex = the song is playing currently (for first time)
    //selectedsongIndex = the song that user clicked when any song is playing (after first time)
    if (audioElement.paused === true) {
      selectedSongIndex = songIndex;
      audioElement.src = `songs/${songIndex}.mp3`;
      audioElement.currentTime = 0;
      audioElement.play();
      //console.log("song is playing" );
      handleSongPlayIcon(e.target, ICON_STOP);
      handleSongPlayIcon(masterPlay, ICON_STOP);
      gif.style.opacity = 1;
    } else if (audioElement.paused === false) {
      if (selectedSongIndex === songIndex) {
        audioElement.pause();
        //console.log("audio is paused now")
        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();
        //console.log("song is playing" );
        handleSongPlayIcon(e.target, ICON_STOP);
        handleSongPlayIcon(masterPlay, ICON_STOP);
        gif.style.opacity = 1;
      }
    }
    //console.log("songIndexx = ",songIndex);
    //console.log("selected  = " +selectedSongIndex);
    mastersongName.innerText = "BTS - " + songs[songIndex].songName;
    masterSideImg.src = songs[songIndex].coverPath;

    audioElement.addEventListener("timeupdate", () => {
      // console.log("songcurrentTime = "+parseInt(audioElement.currentTime))
      // console.log("song duartion = "+ parseInt(audioElement.duration));
      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;

        // grab all the icon elements on the page
        const allSongsPlayItemElements = document.querySelectorAll(".songItemPlay");
        handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_STOP);
        //previous can be accessed with e.target.id
        //how to access the next element (as it is not being clicked by user)
      }
    });
  });
});

//next button
document.getElementById("next").addEventListener("click", (e) => {
  // grab all the icon elements on the page
  const allSongsPlayItemElements = document.querySelectorAll(".songItemPlay");
  // set the currently playing icon to "play"
  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;

  // set the next song icon to "stop"
  handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_STOP);
});

//previous button
document.getElementById("previous").addEventListener("click", (e) => {
  // grab all the icon elements on the page
  const allSongsPlayItemElements = document.querySelectorAll(".songItemPlay");
  // set the currently playing icon to "play"
  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;

  // set the next song icon to "stop"
  handleSongPlayIcon(allSongsPlayItemElements[songIndex], ICON_STOP);
});

使用 JavaScript 事件间接更改播放按钮样式

indirectly changing the play button style using JavaScript event

html

javascript

css

event-handling

addeventlistener