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密钥的本地存储，如果找到了＆＃34; true＆＃34;或＆＃34;假＆＃34;值，播放或不相应播放，并更改可点击图标的图标以匹配当前状态。

当我点击按钮时，没有任何反应，但是如果我手动设置本地存储键，音乐播放/不能正常播放，但按钮本身不会设置bgMusic键。 BackgroundTrack(true)会将密钥设置为＆＃34; true＆＃34;如果密钥以前不存在 - 但这就像我现在使用密钥一样好运。

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

任何想法？

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

Answer 1

有一些事情需要改变。

首先，点击分配给图标，但不是按钮。
另一件事是你从第一次点击开始，根据本地存储检查音乐参数的状态。这就是为什么你无法改变它的原因。
最后，是你检查存储，但为什么不是localStorage？

我已经使用jQuery创建了按钮点击：

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

按钮ID：

<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>

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

2 个答案: