时间戳

首页 > 解决方案 > 更改组件的样式但在 javascript 中使用不同的元素

javascript - 更改组件的样式但在 javascript 中使用不同的元素

问题描述

我正在构建仅使用 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'},
]

用户界面如下所示：

忽略糟糕的用户界面

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

在此处输入图像描述

我需要改变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>

标签： javascripthtmlcsseventsaddeventlistener

解决方案

推荐阅读