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

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” - 但这与我目前拥有的运气一样多。

我已经在 backgroundTrackObj var 上手动测试了 .play() 和 .pause() 方法，这在 Chrome 控制台中运行良好。然而，使用.addClass 和.removeClass 似乎根本不起作用。

有什么想法吗？

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

Answer 1

有几件事要改变。

1. 首先，点击被分配给图标，而不是按钮。
2. 另一件事是您检查了音乐参数的状态，基于本地存储，从第一次单击开始。所以这就是为什么你无法改变它。
3. 最后，您是在检查 Storage，但为什么不检查 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();
   }
}

如果有帮助请通知我。

Check my solution here.

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>