媒体播放/暂停切换而不使用太多 if 语句？

Question

我正在为一个如下所示的网站创建一个歌曲播放列表：

但是，我正在努力找出正确的方法来实现用户在切换按钮时可能经历的所有可能的案例陈述，例如：

• 打开和关闭一个播放按钮
• 打开一个播放按钮，然后单击另一个播放按钮，这样前一个播放按钮就必须关闭
• 等等。

现在我的代码（如下）适用于所有情况，除了用户打开和关闭播放按钮，然后单击不同的播放按钮。这种特殊情况会导致两个图标都切换到暂停按钮，而不仅仅是最近单击的按钮。我知道为什么会发生这种情况，因为lastPlayed 的ID 留在了旧的播放按钮上，从而触发了切换if 状态。

我的问题是，是否有一种更简单的方法来设置播放按钮切换以涵盖所有这些情况，而不必为每个可能的结果做出特定的if 声明？

找到更好的解决方案或修复我的一个错误都可以，但始终首选更简洁的代码，感谢您的帮助！

var playCounter = 0;

function clickSongPlay(artist, title, url, imageURL, element) {

    //debugger;
    player.playlist.push(
        {
            title: title,
            artist: artist,
            file: url,
            imageURL: imageURL,
            howl: null
        }
    );

    //check to see if we need to resume the song
    if ($(element).hasClass("resumeSong") && $(".music-control").hasClass("ion-ios-play")) {
        console.log("resuming");
        /////////LINE BELOW RESUMES THE TRACK FROM CURRENT POSITION////////
        player.play();
        $(element).toggleClass("ion-ios-play ion-ios-pause");
        $(".resumeSong").removeClass("resumeSong");
        return;
    }

    //if a song is playing and the pause button is clicked, pause the track
    if ($(element).hasClass("ion-ios-pause")) {
        console.log("pausing");
        player.pause();
        $(element).toggleClass("ion-ios-pause ion-ios-play");
        $(element).addClass("resumeSong");
        return;
    }

    //start playing a new song
    if ($(element).hasClass("ion-ios-play") && !$(element).hasClass("resumeSong")) {

        if ($("#lastPlayed") && !playCounter == 0) {
            console.log("here is a new song");
            $("#lastPlayed").toggleClass("ion-ios-pause ion-ios-play")
            $(".music-control").removeAttr("id", "lastPlayed");
        }

        console.log("new song");
        ///////LINE BELOW LOADS THE NEW SONG//////////////
        player.skipTo(player.playlist.length - 1);
        $(element).toggleClass("ion-ios-play ion-ios-pause");
        $(element).attr("id", "lastPlayed");
        playCounter += 1;
        return;
    }

}

这是特定歌曲 div 的 HTML：

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

Answer 1

嗯，正如我所见，这里有两个问题。

一，当点击element 时，您需要暂停当前正在播放的任何歌曲。您的代码中缺少的步骤是到目前为止我们播放歌曲的位置。我会将其记录到元素本身的data-offset 属性中。所以稍后，我们可以从它离开的地方继续播放......

二，判断被点击的元素是否处于暂停状态。如果是 - 继续播放，否则从头开始播放。

这里是 UNTESTED 代码示例，它可能会让您走上正轨：

function clickSongPlay(artist, title, url, imageURL, element) {
    var nowPlaying = $(element).siblings(".ion-ios-pause")
    if (nowPlaying) {
        player.pause();
        nowPlaying.data("offset") = player.seek();
        nowPlaying.toggleClass("ion-ios-pause ion-ios-play");
        nowPlaying.addClass("resumeSong");
    }

    player.src(url);
    player.seek($(element).data("offset"));

    if ($(element).hasClass("resumeSong")) {
        console.log("resuming");

        $(element).removeData("offset");
        $(element).toggleClass("ion-ios-play ion-ios-pause");
        $(element).removeClass("resumeSong");
    }

    player.play();
}