媒體播放/暫停切換，而不使用太多的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(); 
}