


javascript - 如何做到網(wǎng)頁(yè)音樂(lè)播放器在打開(kāi)兩個(gè)標(biāo)簽頁(yè)時(shí)第二個(gè)標(biāo)簽頁(yè)不播放?
Jul 06, 2016 pm 01:51 PM
自己在自己的博客footer上添加了一個(gè)網(wǎng)頁(yè)播放器。
由于自己的博客已經(jīng)AJAX,所以在切換頁(yè)面的時(shí)候不會(huì)導(dǎo)致音樂(lè)中斷。
不過(guò)今天發(fā)現(xiàn)了一個(gè)新問(wèn)題,就是說(shuō)在已經(jīng)打開(kāi)了我博客(也就是說(shuō)音樂(lè)已經(jīng)開(kāi)始播放了)的情況下,再打開(kāi)一個(gè)新的標(biāo)簽頁(yè),加載完我的博客以后,音樂(lè)播放器還是會(huì)播放,也就是說(shuō),兩個(gè)標(biāo)簽頁(yè)都在播放我博客上的音樂(lè),聽(tīng)起來(lái)會(huì)很亂,需要手動(dòng)去暫停第二個(gè)標(biāo)簽頁(yè)的音樂(lè)才行。
我想做到能夠在打開(kāi)第二個(gè)標(biāo)簽頁(yè)時(shí)不自動(dòng)播放播放器的音樂(lè),就像網(wǎng)易云音樂(lè)那樣實(shí)現(xiàn)。可是想不到該用什么樣的方法…ˊ_>ˋ
初學(xué)者表示并不會(huì)qwq求大觸解答
回復(fù)內(nèi)容:
自己在自己的博客footer上添加了一個(gè)網(wǎng)頁(yè)播放器。
由于自己的博客已經(jīng)AJAX,所以在切換頁(yè)面的時(shí)候不會(huì)導(dǎo)致音樂(lè)中斷。
不過(guò)今天發(fā)現(xiàn)了一個(gè)新問(wèn)題,就是說(shuō)在已經(jīng)打開(kāi)了我博客(也就是說(shuō)音樂(lè)已經(jīng)開(kāi)始播放了)的情況下,再打開(kāi)一個(gè)新的標(biāo)簽頁(yè),加載完我的博客以后,音樂(lè)播放器還是會(huì)播放,也就是說(shuō),兩個(gè)標(biāo)簽頁(yè)都在播放我博客上的音樂(lè),聽(tīng)起來(lái)會(huì)很亂,需要手動(dòng)去暫停第二個(gè)標(biāo)簽頁(yè)的音樂(lè)才行。
我想做到能夠在打開(kāi)第二個(gè)標(biāo)簽頁(yè)時(shí)不自動(dòng)播放播放器的音樂(lè),就像網(wǎng)易云音樂(lè)那樣實(shí)現(xiàn)??墒窍氩坏皆撚檬裁礃拥姆椒ā@_>ˋ
初學(xué)者表示并不會(huì)qwq求大觸解答
原理是用的localstorage。
但這僅僅不夠,還有最重要的一點(diǎn)。我如何知道另外一個(gè)頁(yè)面打開(kāi)之后,這個(gè)頁(yè)面立即暫停音樂(lè)哪?
我們來(lái)試驗(yàn)下:
模擬正常流程,先打開(kāi)頁(yè)面A.html
。假定這在播放音樂(lè)。。。。
<code> <meta charset="UTF-8"> <title>page A</title> <script> window.onload=function () { window.addEventListener('storage',function () { console.log(arguments); },false); } </script> 正在播放音樂(lè)。。。 </code>
然后,我們?cè)诖蜷_(kāi)一個(gè)新的頁(yè)面,B.html
<code> <meta charset="UTF-8"> <title>page B</title> <script> window.onload=function () { localStorage.setItem('open','b.html'); } </script> 現(xiàn)在是我這個(gè)頁(yè)面在播放音樂(lè)。。。 </code>
這個(gè)時(shí)候你就會(huì)發(fā)現(xiàn),頁(yè)面A.html
立即會(huì)打印出來(lái)一個(gè)對(duì)象
。沒(méi)錯(cuò)就像下圖這樣。
這樣。根據(jù)得到的key
、value
和新頁(yè)面的url
。A.html
就可以立馬知道自己要干什么了。
這個(gè)問(wèn)題的核心在于如何及時(shí)的知道打開(kāi)新頁(yè)面了?在新頁(yè)面的打開(kāi)的同時(shí)如何及時(shí)的關(guān)閉本頁(yè)面的音樂(lè)?難點(diǎn)就在這個(gè)“及時(shí)性”上。
在sessionStorage里作個(gè)標(biāo)記就行
利用cookie或者Html5的 localStorage做個(gè)本地標(biāo)記
在用戶每次打開(kāi)你的博客時(shí),播放音樂(lè)時(shí),瀏覽器的localStorage
或者cookies
中存儲(chǔ)對(duì)當(dāng)前播放器的狀態(tài)。
當(dāng)用戶在同一個(gè)瀏覽器中打開(kāi)你的博客時(shí),可以通過(guò)localStorage
或者cookies
中的狀態(tài)進(jìn)行判斷是否需要再次播放。
直接給window加個(gè)事件就好了,$(window).on('blur',function(){
console.log('停止音樂(lè));
})
$(window).on('focus',function(){
console.log('開(kāi)始音樂(lè)');
})

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Le filtre de fond est utilisé pour appliquer des effets visuels au contenu derrière les éléments. 1. Utilisez le filtre en toile de fond: flou (10px) et autre syntaxe pour obtenir l'effet de verre givré; 2. Prend en charge plusieurs fonctions de filtre telles que le flou, la luminosité, le contraste, etc. et peut être superposé; 3. Il est souvent utilisé dans la conception des cartes en verre, et il est nécessaire de s'assurer que les éléments chevauchent l'arrière-plan; 4. Les navigateurs modernes ont un bon support et @Supports peut être utilisé pour fournir des solutions de rétrogradation; 5. évitez les valeurs de flou excessive et redémarrez fréquents pour optimiser les performances. Cet attribut ne prend effet que lorsqu'il y a du contenu derrière les éléments.

UsetheelementwithinatagtocreatEasanticsearchField.2. y comprisaForAccesssibility, settheform'sactionandMethod = "get" attributestosenddatatoesearchndpointwithAsharableArl.3.Addname = "Q" todefinetheQueryParameter, usePlaceHolderToguiseUd

Utilisez le buzzerforrobusthttprequestswithhehers et les temps.

Définissez @ KeyframesBounce avec 0%, 100% attranslatey (0) et 50% d'attranslatey (-20px) toCreateAbasicBounce.2.ApplyTheAnimationToanElementsinganimation: Bounce0.6SEASE-OU-OUTINFINITEFORSMOTH, ContinuousMotion.3.

rel = "Stylesheet" linkSsssFilesForSTylingThepage; 2.rel = "Preload" HintstopreloadCriticalResourcesForPerformance; 3.rel = "icon" setthewebsite’sfaviCon; 4.rel = "alternate" fournit la réversion desstiètes; 5.rel = & Qu

ThetargetAttributeinanhtmlanchortagspecifieswheretoopenthelinkedDocument.1._setropensthelinkinthesametab (par défaut) .2._blankopensthelinkinanewtaborwindow.3._parentopensthelinkintheparentframe.

Utilisez des éléments et définissez les attributs d'action et de méthode pour spécifier l'adresse et la méthode de soumission des données; 2. Ajouter des champs d'entrée avec l'attribut de nom pour vous assurer que les données peuvent être reconnues par le serveur; 3. Utiliser ou créer un bouton de soumission, et après avoir cliqué, le navigateur enverra les données de formulaire à l'URL spécifiée, qui sera traitée par le backend pour terminer la soumission des données.

Le choix du bon type HTMLinput peut améliorer la précision des données, améliorer l'expérience utilisateur et améliorer la convivialité. 1. Sélectionnez les types d'entrée correspondants en fonction du type de données, tels que le texte, le courrier électronique, le tel, le numéro et la date, qui peuvent vérifier automatiquement la somme de la somme et l'adaptation au clavier; 2. Utilisez HTML5 pour ajouter de nouveaux types tels que l'URL, la couleur, la plage et la recherche, qui peuvent fournir une méthode d'interaction plus intuitive; 3. Utilisez l'espace réservé et les attributs requis pour améliorer l'efficacité et la précision du remplissage des formulaires, mais il convient de noter que l'espace réservé ne peut pas remplacer l'étiquette.
