無法切換音頻/字體真棒圖標

Question

我對 JS/jQuery 還很陌生，如果我犯了一個非常愚蠢的錯誤，請原諒我！ :)

var backgroundTrackObj        = document.createElement("audio");
    backgroundTrackObj.src    = "//tjone270.org/quakelive/2-24%20The%20Fiery%20Stronghold.mp3";
    backgroundTrackObj.volume = 0.1;
var playpauseButton           = $("#playpause_background");

function BackgroundTrack(nochange) {
  if (typeof(Storage) !== "undefined") {
    var bgMusic = localStorage.getItem("bgMusic");
    if (bgMusic === "false") {
      backgroundTrackObj.pause();

      playpauseButton.removeClass("fa-pause");
      playpauseButton.addClass("fa-play");
      if (!nochange) {
        localStorage.setItem("bgMusic", "false");
      }
    } else if (bgMusic === "true" || bgMusic === null) {
      backgroundTrackObj.play();
      playpauseButton.removeClass("fa-play");
      playpauseButton.addClass("fa-pause");
      if (!nochange || bgMusic === null) {
        localStorage.setItem("bgMusic", "true");
      }
    }
  } else {
    backgroundTrackObj.play();
  }
}

BackgroundTrack(true);

這是我的代碼。 我將它作為文件加載到當前頁面（通過<script src> ）。

我的導航欄中有一個可點擊的圖標：

<li><a class="navbar-brand" style="color: white; text-decoration: none;" onclick="BackgroundTrack(false)"><i id="playpause_background" class="fa"></i></a></li>

當頁面加載時，它運行BackgroundTrack(true) 。 我希望它查看bgMusic鍵的本地存儲，如果發現值為“true”或“false”，則相應地播放或不播放並更改可點擊圖標的圖標以匹配當前狀態。

當我單擊按鈕時，沒有任何反應，但是如果我手動設置本地存儲鍵，音樂播放/無法正常播放，但按鈕本身不會設置bgMusic鍵。 如果該鍵以前不存在， BackgroundTrack(true)會將鍵設置為“true” - 但這與我目前擁有的運氣一樣多。

我手動測試.play()和.pause()的方法backgroundTrackObj VAR，而且適用於Chrome控制台罰款。 .addClass ，使用.addClass和.removeClass似乎根本不起作用。

任何人的想法？

更新： https : //jsfiddle.net/7qxrqk8q

Answer 1

有幾件事情需要改變。

1. 首先，點擊被分配給圖標，而不是按鈕。
2. 另一件事是您檢查了音樂參數的狀態，基於本地存儲，從第一次點擊開始。 所以這就是你無法改變它的原因。
3. 最后，是您檢查存儲，但為什么不檢查 localStorage？

我已經用 jQuery 創建了按鈕點擊：

$("#btn").click(function(){
  musicState = !musicState;
    backgroundTrack(musicState);
});

按鈕標識：

<button id="btn"><i id="playpause_background" class="fa"></i></button>

以及音樂播放狀態的變量：

musicState = false;

功能：

function backgroundTrack(el) {
 var bgMusic = localStorage.getItem("bgMusic");
  if(localStorage){
    if (el === false) {
      playpauseButton.removeClass("fa-pause");
      playpauseButton.addClass("fa-play");
      backgroundTrackObj.pause();
      if (!el) {
        localStorage.setItem("bgMusic", "false");
      }
    } else if ( (el === true) || (bgMusic === null) ){
      playpauseButton.removeClass("fa-play");
      playpauseButton.addClass("fa-pause");
      backgroundTrackObj.play();
      if (!el || bgMusic === null) {
        localStorage.setItem("bgMusic", "true");
      }
    }
   } else {
      backgroundTrackObj.play();
   }
}

如果這有幫助，請通知我。

在此處查看我的解決方案。

Answer 2

我更新了您的 BackgroundTrack 功能，如下所示。 問題是您需要區分使用本地存儲和按鈕是否正在播放。 它們都可以具有相同的值，但並非始終如此。 這就是編寫函數有點棘手的原因。 最好的辦法是在啟動頁面時在最開始的暫停按鈕處單擊兩次，即使它不會跟蹤存儲。

function BackgroundTrack(nochange) {
    if (typeof(Storage) === "undefined") {
        return backgroundTrackObj.play();
    }

    var bgMusic = localStorage.getItem("bgMusic"), update;
    var isPlay = nochange ? bgMusic === "true" : playpauseButton.hasClass("fa-play");

    if(isPlay){ //toggle
        playpauseButton.removeClass("fa-play");
        playpauseButton.addClass("fa-pause");
        backgroundTrackObj.play();
        update = "true";
    }else{
        playpauseButton.removeClass("fa-pause");
        playpauseButton.addClass("fa-play");
        backgroundTrackObj.pause();
        update = "false";
    }

    if (!nochange) {
        localStorage.setItem("bgMusic", update);
    }
}

 var backgroundTrackObj = document.createElement("audio"); backgroundTrackObj.src = "//tjone270.org/quakelive/2-24%20The%20Fiery%20Stronghold.mp3"; backgroundTrackObj.volume = 0.1; var playpauseButton = $("#playpause_background"); function BackgroundTrack(nochange) { if (typeof(Storage) === "undefined") { return backgroundTrackObj.play(); } var bgMusic = localStorage.getItem("bgMusic"), update; var isPlay = nochange ? bgMusic === "true" : playpauseButton.hasClass("fa-play"); if(isPlay){ //toggle playpauseButton.removeClass("fa-play"); playpauseButton.addClass("fa-pause"); backgroundTrackObj.play(); update = "true"; }else{ playpauseButton.removeClass("fa-pause"); playpauseButton.addClass("fa-play"); backgroundTrackObj.pause(); update = "false"; } if (!nochange) { localStorage.setItem("bgMusic", update); } } BackgroundTrack(true);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html lang="en"> <head> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://use.fontawesome.com/a0b5affde9.js"></script> </head> <body> <button onclick="BackgroundTrack(false)"><i id="playpause_background" class="fa"></i></button> </body> </html>