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

Question

我的网站看起来像这样创造的歌曲的播放列表：

不过，我很努力找出实现所有可能的case语句的正确方法，虽然切换，用户可以经历该按钮，如：

• 切换和关闭
• 切换上一个播放按钮，然后点击另一个播放按钮，使以前有关闭同时
• 等一个播放按钮。

现在，我的代码（下图）适用于每种情况，除非用户切换播放按钮的开启和关闭，然后单击不同的播放按钮。此特定情况会导致两个图标切换到暂停按钮，而不是最近单击。我知道为什么会发生这种情况，这是因为在旧的播放按钮上留下了lastPlayed的ID，因此触发了切换if陈述。

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

要么寻找更好的解决方案，要么修复我的一个bug，但总是首选更清晰的代码，谢谢任何帮助！

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属性。所以后来，我们可以继续从它离开的地方回放...

二，找出被点击的元素是否暂停或暂停。如果是 - 恢复，否则从头开始播放。

因此，这里是未经测试的代码示例，它可以设置您在正确的轨道上：

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