使用Howler.js切换多个播放/暂停按钮

Question

我搜索了SE一段时间，我看到了类似的问题，但没有什么比我需要帮助的更多。

我正在使用Howler.js在我的网站上传输音频。我遇到的问题是每页都有很多歌曲，所以当播放一首歌时，点击下一首歌不会切换按钮......音乐确实开始播放但第一首歌没有。我知道这是因为我使用的是诸如Id="bodyPlayBtn"之类的ID，但我需要它来切换当前js的按钮。我想在this.toggleClass(ion-ios-play ion-ios-pause)中使用function clickSongPlay()，但这似乎并不奏效。解决这个问题的最佳方式是什么？

以下是相关代码：

HTML：

<div><i class="icon ion-ios-play" id="bodyPlayBtn" onclick="clickSongPlay('@song.Artist','@song.Title','@song.URL','@song.Album.ImageURL');"></i><i class="icon ion-ios-pause" id="bodyPauseBtn"></i></div>

如果你像我一样视觉，这就是div控制的（蓝色箭头）

player.js

// Show the pause button.
if (sound.state() === 'loaded') {
    bodyPlayBtn.style.display = 'none';
    bodyPauseBtn.style.display = 'inline-block';
} else {
    loading.style.display = 'block';
    bodyPlayBtn.style.display = 'none';
    bodyPauseBtn.style.display = 'none';
}

// Show the play button.
bodyPlayBtn.style.display = 'inline-block';
bodyPauseBtn.style.display = 'none';

// Bind our player controls.
bodyPlayBtn.addEventListener('click', function () {
    player.play();
});
function clickSongPlay(artist, title, url, imageURL) {
    //debugger;
    player.playlist.push(
        {
            title: title,
            artist: artist,
            file: url,
            imageURL: imageURL,
            howl: null
        }
    );
    player.skipTo(player.playlist.length - 1);
    player.play();
}
bodyPauseBtn.addEventListener('click', function () {
    player.pause();
});

这个代码只用一个播放按钮就可以很好地工作，但当两个进入图片时就会出现问题！