Question

我正在尝试开发一个具有播放/暂停切换功能的简单mp3播放器，其中播放按钮变为“ ||”当播放音乐时，将显示为“图标”，而当您使用纯原始Javascript暂停音乐时，则返回到“播放”按钮。我已经查看了有关此问题的其他文章，但没有一个对我目前的代码结构有所帮助。

var playButton = document.querySelector('#play-button');
var firstSong = new Audio('CloudDance.mp3');
var trackList = [firstSong];


function currentSong() {
    for(var i=0; i<trackList.length; i++) {
        var songID = document.querySelector('#stateicon');
        if (trackList[i].paused) {
            songID.id = 'fas fa-pause';
            trackList[i].play();
        } else {
            songID.addEventListener('click', ) = 'fas fa-play';
            trackList[i].pause();
        }
    }
}

<body>
        <div class="screen">
            <div class="song-info-text">
                    <p class="song-artist">Some text</p>
                    <p class="song-name">Some more text</p>
            </div>
        </div>
        <div class="mp3-buttons">
            <button class="button" type="button" name="button"><i class="fas fa-step-backward"></i></button>
            <button id="play-button" onclick="currentSong()" type="button" name="button"><i  id="stateicon" class="fas fa-play"></i></button>
            <button class="button" type="button" name="button"><i class="fas fa-step-forward"></i></button>
        </div>
        <script src="index.js" charset="utf-8"></script>
    </body>

Answer 1

您需要做的就是根据需要设置类名称。这是您的修复示例。

  songID.className = 'fas fa-pause';

这是下面的JSFiddle链接中使用的示例代码

var playButton = document.querySelector('#play-button');
var firstSong = new 
Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3');
var trackList = [firstSong];

function currentSong() {
    for(var i=0; i<trackList.length; i++) {
        var songID = document.querySelector('#stateicon');
        if (trackList[i].paused) {
            songID.className = 'fas fa-pause'; // Notice how we set className
            trackList[i].play();
        } else {
            songID.className = 'fas fa-play'; // Notice how we set className
            trackList[i].pause();
        }
    }
}

我还更新了html中的font-awesome css url，以确保字体可以正常工作。这是修复程序的另一部分

    <header>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"/>
    </header>

JSFiddle Working Example

注意：：您以后可能会遇到问题，因为您最终将以for循环的方式同时播放多个文件。因此，请记住，您需要知道当前正在播放的歌曲，以便可以正确暂停或播放同一首歌曲。并根据按下的按钮在向前或向后打时切换当前歌曲。

Javascript MP3播放器的播放/暂停切换功能

1 个答案: