オーディオ/フォントの素晴らしいアイコンを切り替えることはできません

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()メソッドをテストしてみた、それはクロームコンソールで正常に動作します。 .addClassと.removeClassを使用しても、まったく動作していないようです。

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

Answer 1

変更するには、いくつかのことがありました。

1. 第1に、クリックはアイコンに割り当てられましたが、ボタンには割り当てられませんでした。
2. もう1つは、ローカルストレージに基づいて、1回目のクリックから音楽パラメータの状態を確認します。だからあなたはそれを変更できませんでした。
3. 最後に、Storageをチェックしているのですが、なぜlocalStorageはありませんか？

私はjQueryを使って、ボタンのクリックを作成しました：

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

ボタンID：

musicState = false; 

機能：

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

だけでなく、音楽の再生状態のための変数：

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機能を更新しました。問題は、ローカルストレージの使用と、そのボタンが再生されているかどうかを区別する必要があることです。両方とも同じ値を持つことができますが、すべての時間ではありません。これは、少し厄介な機能を書くことになっていたものです。あなたが得ることができる最良の方法は、ページを開始するときの最初のポーズボタンで2回クリックすることです。たとえそれがストレージを追跡しなくてもです。

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) { 
 
\t if (typeof(Storage) === "undefined") { 
 
\t \t return backgroundTrackObj.play(); 
 
\t } 
 
\t 
 
\t var bgMusic = localStorage.getItem("bgMusic"), update; 
 
\t var isPlay = nochange ? bgMusic === "true" : playpauseButton.hasClass("fa-play"); 
 
\t 
 
\t if(isPlay){ \t //toggle 
 
\t \t playpauseButton.removeClass("fa-play"); 
 
     \t playpauseButton.addClass("fa-pause"); 
 
     \t backgroundTrackObj.play(); 
 
     \t update = "true"; 
 
\t }else{ 
 
     \t playpauseButton.removeClass("fa-pause"); 
 
     \t playpauseButton.addClass("fa-play"); 
 
     \t backgroundTrackObj.pause(); 
 
     \t update = "false"; 
 
\t } 
 
\t 
 
\t if (!nochange) { 
 
\t \t localStorage.setItem("bgMusic", update); 
 
\t } 
 
} 
 

 
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>