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

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

1 个答案: