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

问题描述 投票:-1回答:2

我是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() var上手动测试了.pause()backgroundTrackObj方法,这在Chrome控制台中运行良好。然而,使用.addClass.removeClass似乎根本不起作用。

任何人的想法?

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

javascript jquery twitter-bootstrap-3 local-storage font-awesome
2个回答
0
投票

有一些事情需要改变。

  1. 首先,点击分配给图标,但不是按钮。
  2. 另一件事是你从第一次点击开始,根据本地存储检查音乐参数的状态。这就是为什么你无法改变它的原因。
  3. 最后,是你检查存储,但为什么不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.


0
投票

我更新了你的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>
© www.soinside.com 2019 - 2024. All rights reserved.