私は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
'jsfiddle'またはSOスニペットでのライブの例を提供します。 – Pedram
コンソールでうまく動作するので、 'if(typeof(Storage)!== "undefined"){'の場合、これは何か問題があると思います。 クラスロジックの追加と削除以外の機能からすべてを削除し、機能を追加することをお勧めします。 – Animus
jsFiddle link @ Mr.x –