


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

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

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.

HTTP Log Middleware dans GO peut enregistrer les méthodes de demande, les chemins de requête, la propriété intellectuelle du client et le temps qui prend du temps. 1. Utilisez http.handlerfunc pour envelopper le processeur, 2. Enregistrez l'heure de début et l'heure de fin avant et après l'appel Suivant.Servehttp, 3. Obtenez le vrai client IP via R.RemoteAddr et X-Forwared-For Headers, 4. Utilisez le log.printf aux journaux de demande de sortie, 5. L'exemple de code complet a été vérifié pour s'exécuter et convient au démarrage d'un projet petit et moyen. Les suggestions d'extension incluent la capture des codes d'état, la prise en charge des journaux JSON et le suivi des ID de demande.

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.

Pour devenir un ma?tre de YII, vous devez ma?triser les compétences suivantes: 1) Comprendre l'architecture MVC de YII, 2) Compartif dans l'utilisation activerecordorm, 3) utilisez efficacement les outils de génération de code GII, 4) les règles de vérification de Master YII, 5) Optimiser les performances de la base de données, 6) prêtent en continu l'attention aux écosystèmes de la base de données. Grace à l'apprentissage et à la pratique de ces compétences, les capacités de développement dans le cadre YII peuvent être améliorées de manière globale.
