JavaScript - 2 つのタブを開いたときに Web ミュージック プレーヤーが 2 番目のタブを再生しないようにするにはどうすればよいですか?

ブログのフッターにウェブプレーヤーを追加しました。

私のブログはAJAX対応なのでページ切り替え時に音楽が途切れることはありません。

しかし、今日新しい問題を発見しました。つまり、ブログを開いた後（つまり、音楽の再生が開始された後）、新しいタブが開き、ブログをロードした後、音楽プレーヤーがまだ残っているということです。再生されます。つまり、ブログでは両方のタブで音楽が再生されているため、2 番目のタブで音楽を手動で一時停止する必要があります。

NetEase Cloud Musicのように、2番目のタブを開いたときにプレーヤーの音楽を自動的に再生しないようにしたいです。でも、どんな方法を使えばいいのか分からない…ˊ_>ˋ

初心者は qwq に答えを求める方法がわからないと言います

返信内容:

ブログのフッターにウェブプレーヤーを追加しました。

私のブログはAJAX対応なのでページ切り替え時に音楽が途切れることはありません。

しかし、今日新しい問題を発見しました。つまり、ブログを開いた後（つまり、音楽の再生が開始された後）、新しいタブが開き、ブログをロードした後、音楽プレーヤーがまだ残っているということです。再生されます。つまり、ブログでは両方のタブで音楽が再生されているため、2 番目のタブで音楽を手動で一時停止する必要があります。

NetEase Cloud Musicのように、2番目のタブを開いたときにプレーヤーの音楽を自動的に再生しないようにしたいです。でも、どんな方法を使えばいいのか分からない…ˊ_>ˋ

初心者は qwq に答えを求める方法がわからないと言います

原則はローカルストレージを使用することです。
しかし、これだけでは不十分です、最も重要な点があります。 別のページを開いた直後にこのページで音楽が一時停止されることをどうやって確認できますか?
試してみましょう:
通常のプロセスをシミュレートし、最初にページを開きますA.html。これが音楽を再生していると仮定します。 。 。 。

リーリー

それでは、新しいページを開きますB.html

リーリー

この時点で、ページ A.html 立即会打印出来一个对象 がすぐに object を出力することがわかります。そうです、下の写真のような感じです。

こんな感じ。取得した key、value、および新しいページの url に基づきます。 key、value和新页面的url。A.htmlやりたいことがすぐにわかります。

この問題の核心は、新しいページが開かれたタイミングをどのようにして知るかということです。新しいページを開いているときに、このページの音楽を時間内に閉じるにはどうすればよいですか?難しいのはこの「適時性」です。

セッションストレージにマークを付けるだけです

CookieまたはHTML5のlocalStorageを使用してローカルマークを作成します

ユーザーがブログを開いて音楽を再生するたびに、現在のプレーヤーのステータスがブラウザの localStorage または cookie に保存されます。 localStorage或者cookies中存储对当前播放器的状态。
当用户在同一个浏览器中打开你的博客时，可以通过localStorage或者cookies ユーザーが同じブラウザでブログを開いたとき、localStorage または cookie のステータスを通じて、ブログを再度再生する必要があるかどうかを判断できます。

イベントをウィンドウに直接追加するだけです。 $(window).on('blur',function()｛
console.log('stop music);
｝)
$(window).on('focus' , function()｛
console.log('音楽を開始');
｝)