无法切换音频/字体真棒图标

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>