javascript - 如何做到網(wǎng)頁音樂播放器在打開兩個標(biāo)簽頁時第二個標(biāo)簽頁不播放？
Jul 06, 2016 pm 01:51 PM
自己在自己的博客footer上添加了一個網(wǎng)頁播放器。
由于自己的博客已經(jīng)AJAX，所以在切換頁面的時候不會導(dǎo)致音樂中斷。
不過今天發(fā)現(xiàn)了一個新問題，就是說在已經(jīng)打開了我博客（也就是說音樂已經(jīng)開始播放了）的情況下，再打開一個新的標(biāo)簽頁，加載完我的博客以后，音樂播放器還是會播放，也就是說，兩個標(biāo)簽頁都在播放我博客上的音樂，聽起來會很亂，需要手動去暫停第二個標(biāo)簽頁的音樂才行。
我想做到能夠在打開第二個標(biāo)簽頁時不自動播放播放器的音樂，就像網(wǎng)易云音樂那樣實現(xiàn)。可是想不到該用什么樣的方法…ˊ_>ˋ
初學(xué)者表示并不會qwq求大觸解答
回復(fù)內(nèi)容：
自己在自己的博客footer上添加了一個網(wǎng)頁播放器。
由于自己的博客已經(jīng)AJAX，所以在切換頁面的時候不會導(dǎo)致音樂中斷。
不過今天發(fā)現(xiàn)了一個新問題，就是說在已經(jīng)打開了我博客（也就是說音樂已經(jīng)開始播放了）的情況下，再打開一個新的標(biāo)簽頁，加載完我的博客以后，音樂播放器還是會播放，也就是說，兩個標(biāo)簽頁都在播放我博客上的音樂，聽起來會很亂，需要手動去暫停第二個標(biāo)簽頁的音樂才行。
我想做到能夠在打開第二個標(biāo)簽頁時不自動播放播放器的音樂，就像網(wǎng)易云音樂那樣實現(xiàn)?？墒窍氩坏皆撚檬裁礃拥姆椒ā@_>ˋ
初學(xué)者表示并不會qwq求大觸解答
原理是用的localstorage。
但這僅僅不夠，還有最重要的一點。我如何知道另外一個頁面打開之后，這個頁面立即暫停音樂哪？
我們來試驗下：
模擬正常流程，先打開頁面A.html。假定這在播放音樂。。。。
<code>
<meta charset="UTF-8">
<title>page A</title>
<script>
window.onload=function () {
window.addEventListener('storage',function () {
console.log(arguments);
},false);
}
</script>
正在播放音樂。。。
</code>
然后，我們在打開一個新的頁面，B.html
<code>
<meta charset="UTF-8">
<title>page B</title>
<script>
window.onload=function () {
localStorage.setItem('open','b.html');
}
</script>
現(xiàn)在是我這個頁面在播放音樂。。。
</code>
這個時候你就會發(fā)現(xiàn)，頁面A.html 立即會打印出來一個對象。沒錯就像下圖這樣。
這樣。根據(jù)得到的key、value和新頁面的url。A.html就可以立馬知道自己要干什么了。
這個問題的核心在于如何及時的知道打開新頁面了？在新頁面的打開的同時如何及時的關(guān)閉本頁面的音樂？難點就在這個“及時性”上。
在sessionStorage里作個標(biāo)記就行
利用cookie或者Html5的 localStorage做個本地標(biāo)記
在用戶每次打開你的博客時，播放音樂時，瀏覽器的localStorage或者cookies中存儲對當(dāng)前播放器的狀態(tài)。
當(dāng)用戶在同一個瀏覽器中打開你的博客時，可以通過localStorage或者cookies中的狀態(tài)進行判斷是否需要再次播放。
直接給window加個事件就好了，$（window）.on（'blur',function（）｛
console.log（'停止音樂）；
｝）
$（window）.on（'focus',function（）｛
console.log（'開始音樂'）；
｝）
熱AI工具
Undress AI Tool
免費脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機
Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
您的第一個PHP腳本：實用介紹
Jul 16, 2025 am 03:42 AM
如何開始編寫第一個PHP腳本？首先設(shè)置本地開發(fā)環(huán)境，安裝XAMPP/MAMP/LAMP，使用文本編輯器，了解服務(wù)器運行原理。其次，創(chuàng)建一個名為hello.php的文件，輸入基本代碼并運行測試。第三，學(xué)習(xí)混合使用PHP與HTML以實現(xiàn)動態(tài)內(nèi)容輸出。最后，注意常見錯誤如缺少分號、引用問題及文件擴展名錯誤，并開啟錯誤報告以便調(diào)試。
什么是PHP，它是用什么？
Jul 16, 2025 am 03:45 AM
PHPisaserver-sidescriptinglanguageusedforwebdevelopment,especiallyfordynamicwebsitesandCMSplatformslikeWordPress.Itrunsontheserver,processesdata,interactswithdatabases,andsendsHTMLtobrowsers.Commonusesincludeuserauthentication,e-commerceplatforms,for
PHP 8安裝指南
Jul 16, 2025 am 03:41 AM
在Ubuntu上安裝PHP8的步驟為：1.更新軟件包列表；2.安裝PHP8及基礎(chǔ)組件；3.檢查版本確認安裝成功；4.按需安裝額外模塊。Windows用戶可下載ZIP包并解壓，隨后修改配置文件、啟用擴展并將路徑加入環(huán)境變量。macOS用戶推薦使用Homebrew安裝，依次執(zhí)行添加tap、安裝PHP8、設(shè)置默認版本及驗證版本等步驟。不同系統(tǒng)下安裝方式雖有差異，但流程清晰，根據(jù)用途選對方法即可。
您如何處理PHP中的文件操作（閱讀/寫作）？
Jul 16, 2025 am 03:48 AM
tohandlefileoperationsinphp，useApprepreprunctions andModes.1.toreadafile，usefile_get_contents（）forsmallfilesorfgets（）inaloopforline by line-line-processing.2.towriteToafile，usefile_put_cte_contents（usefile_contents）（
高級PHP多行論技術(shù)
Jul 17, 2025 am 04:14 AM
UsemultilinecommentsinPHPforfunction/classdocumentation,codedebugging,andfileheaderswhileavoidingcommonpitfalls.First,documentfunctionsandclasseswith/*...*/toexplainpurpose,parameters,andreturnvalues,aidingreadabilityandenablingIDEintegration.Second,
PHP變量范圍解釋了
Jul 17, 2025 am 04:16 AM
PHP變量作用域常見問題及解決方法包括：1.函數(shù)內(nèi)部無法訪問全局變量，需使用global關(guān)鍵字或參數(shù)傳入；2.靜態(tài)變量用static聲明，只初始化一次并在多次調(diào)用間保持值；3.超全局變量如$_GET、$_POST可在任何作用域直接使用，但需注意安全過濾；4.匿名函數(shù)需通過use關(guān)鍵字引入父作用域變量，修改外部變量則需傳遞引用。掌握這些規(guī)則有助于避免錯誤并提升代碼穩(wěn)定性。
初學(xué)者的PHP運營商
Jul 17, 2025 am 04:17 AM
掌握PHP常用運算符能應(yīng)對多數(shù)開發(fā)場景，主要包括：1.算術(shù)運算符（ 、-、、/、%）用于數(shù)學(xué)計算，支持變量動態(tài)運算，但需注意自動類型轉(zhuǎn)換可能引發(fā)的問題；2.比較運算符（==、===、!=、>、
清潔代碼和PHP中的評論
Jul 17, 2025 am 04:08 AM
注釋是CleanCode的重要組成部分，因為它能解釋代碼背后的意圖而非重復(fù)代碼。好的注釋應(yīng)出現(xiàn)在復(fù)雜邏輯、非直觀條件判斷、公共API定義以及待辦事項中；要避免無意義的描述，專注于說明“為什么”并保持更新，同時使用完整句子表達。PHP支持單行、多行及docblock三種注釋格式，其中docblock不僅美觀，還能被IDE識別以提升團隊協(xié)作效率。遵循框架規(guī)范也有助于項目統(tǒng)一性。寫注釋不是為了湊字數(shù)，而是為了提高代碼的可讀性與維護性，節(jié)省未來理解成本。
