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

Question

I'm pretty new to JS/jQuery, please forgive me if I've made an incredibly obtuse mistake! :)

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

This is my code. I'm loading it in as a file to the current page (via <script src> ).

There's a clickable icon in my navbar:

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

When the page loads, it runs BackgroundTrack(true) . I expect it to look at local storage for the bgMusic key, and if found with a "true" or "false" value, play or not play accordingly and change the clickable icon's icon to match the current state.

When I click the button, nothing happens, however if I manually set the local storage key, the music plays/not plays properly, but the button itself won't set the bgMusic key. The BackgroundTrack(true) will set the key to "true" if the key doesn't previously exist - but that's as much luck as I'm having with it at the moment.

I've manually tested the .play() and .pause() methods on the backgroundTrackObj var, and that works fine in the Chrome console. Using .addClass and .removeClass doesn't seem to work at all however.

Any ideas anyone?

UPDATE: https://jsfiddle.net/7qxrqk8q

Answer 1

There was a few things to change.

1. 1st of all, the click was assigned to icon, but not the button.
2. The other thing is you checked the state of the music parameter, based on local storage, starting from the 1st click. So that is why you wasn't able to change it.
3. And final, is that you checking Storage, but why not localStorage?

I've created button click with jQuery:

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

Button id:

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

As well as variable for music play state:

musicState = false;

Function:

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();
   }
}

Notify me if that was helpful.

Check my solution here.

Answer 2

I updated your BackgroundTrack function as below. The thing is that you need to distinguish between using the local storage and whether the button is being played or not. Both of them can have the same value but not all the time. This is what was making writing the function a bit tricky. The best you can get is to click twice at the pause button at the very beginning when you start the page, even it will not track the storage.

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>