ページ遷移してもBGMが途切れないようにするには

Question

前提・実現したいこと

wordpressを使用したサイトで「ON」ボタンを押したらBGMが流れ、「OFF」ボタンを押したら曲が停止するようにしたいです。ですが、BGMが流れる時にページが遷移すると曲が途切れてしまいます。
sessionStorageを利用すれば出来そうだということまではわかったのですが、いまいち理解しきれてません。
下記コードをどのようにすれば良いかを教えてください。
よろしくお願いします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<div id="Audio-Control">
    <audio id="bgm" preload="" autoplay="" loop="" muted="">
        <source src="<?php echo get_template_directory_uri();?>/bgm/akaifuusen.mp3" type="audio/mpeg">
    </audio>
<input type="button" onClick="enableMute()" value="OFF">
<input type="button" onClick="disableMute()" value="ON">
</div>

var el = document.getElementById("bgm");
 
function enableMute() {
    el.muted = true;
}
 
function disableMute() {
    el.muted = false;
}
 
//データを保存する処理
disableMute.addEventListener("click", function() {
    var t = document.getElementById("active").value;
    
    //①sessionStorageにデータを保存する
    window.sessionStorage.setItem("test", t);

　　//②sessionStorageからデータを取り出す
    var t = window.sessionStorage.getItem("test");

  $('#Audio-Control button').toggleClass("t");  


}, true);
 
//データを削除する処理
enableMute.addEventListener("click",function(){
    
　　//③保存データを全部削除する場合
    window.sessionStorage.clear();
 
},true);

試したこと

iframeやpjaxを利用する方法も見つけましたら、理解不足のため成功することはできませんでした。
上記コードで作成した場合、トップページで「ON」ボタンで再生後、他ページを表示させるとBGMは停止され、そのページで改めて「ON」ボタンを押すと初めから再生されます。
JavaScript
$('#Audio-Control button').toggleClass("active");
上記の"active"の部分が保持できればいいのかと思ってましたが。

・BGMを流すのに参考にしたサイト
https://blanche-toile.com/web/html5-audio-bgm-switch

・sessionStorageを参考にしたサイト
https://the-zombis.sakura.ne.jp/wp/blog/2012/05/12/post-1347/
http://javatechnology.net/javascript/sessionstorage-localstorage/

補足情報（FW/ツールのバージョンなど）

WordPress 5.2.3

Comments

[m.ts10806]

「任意の秒数から再生」はできますか？

[m.ts10806]

上記もそうですが、pjaxはともかくiframeでも理解不足となるとそれはもう作業依頼に近い内容になると思います。
どのような記事を参考になにを試してどう分からなかったのかを具体的に記載されるとアドバイスも得やすくなると思います。

[den_kusa]

ご指摘ありがとうございます。
試したことに内容と参考サイトを追加しました。
よろしくお願いします。

Answer 1

SPAにしてコンテンツはxhr(もしくはfetch)などでバックグラウンドに
非同期で取得して本文を書き換えれば、ページの遷移は不要です

Comments

[den_kusa]

ご回答ありがとうございます。
教えて頂いSPAについて調べてみます。

Answer 2

'ページ遷移時BGMが途切れて違和感感じる'のが問題であれば、違和感なくBGMが切り替われば良いのでは？

https://developer.mozilla.org/ja/docs/Web/API/WindowEventHandlers/onbeforeunload

onbeforeunloadイベントでBGMをフェードアウトさせ、遷移先はフェードインさせれば違和感和らぐと思います。

遷移先でBGMの続きを秒数指定しても、いろいろな要因でページは一定時間で切り替わらず不連続な再生になると思います。

あと難易度が跳ね上がるので質問者向けではないですが、serviceworkerでBGM制御できるのかな？以下読んでる最中です。
https://stackoverflow.com/questions/42268644/play-a-sound-from-a-service-worker

Comments

[den_kusa]

ご回答ありがとうございます。
フェードアウト、フェードインは考えてなかったので教えていただき、とても参考になりました。