


javascript - How to prevent the web music player from playing the second tab when opening two tabs?
Jul 06, 2016 pm 01:51 PM
I added a web player to the footer of my blog.
Since my blog has AJAX, the music will not be interrupted when switching pages.
But I discovered a new problem today, that is, when my blog is already open (that is to say, the music has started playing), and then a new tab is opened, and after loading my blog, the music will not play. The browser will still play, that is to say, both tabs are playing the music on my blog, and it will sound messy. I need to manually pause the music on the second tab.
I want to be able to not automatically play music in the player when opening the second tab, just like NetEase Cloud Music does. But I can’t think of what method to use...ˊ_>ˋ
Beginners say they don’t know how to use qwq to ask for answers
Reply content:
I added a web player to the footer of my blog.
Since my blog has AJAX, the music will not be interrupted when switching pages.
But I discovered a new problem today, that is, when my blog is already open (that is to say, the music has started playing), and then a new tab is opened, and after loading my blog, the music will not play. The browser will still play, that is to say, both tabs are playing the music on my blog, and it will sound messy. I need to manually pause the music on the second tab.
I want to be able to not automatically play music in the player when opening the second tab, just like NetEase Cloud Music does. But I can’t think of what method to use...ˊ_>ˋ
Beginners say they don’t know how to use qwq to ask for answers
The principle is to use localstorage.
But this is not enough, there is the most important point. How do I know that this page will pause the music immediately after opening another page?
Let’s try it out:
Simulate the normal process, first open the page A.html
. Assume this is playing music. . . .
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>page A</title> <script> window.onload=function () { window.addEventListener('storage',function () { console.log(arguments); },false); } </script> </head> <body> 正在播放音樂。。。 </body> </html></code>
Then, we are opening a new page, B.html
<code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>page B</title> <script> window.onload=function () { localStorage.setItem('open','b.html'); } </script> </head> <body> 現(xiàn)在是我這個(gè)頁(yè)面在播放音樂。。。 </body> </html></code>
At this time you will find that the page A.html
will print out a 對(duì)象
immediately. That's right, just like the picture below.
This way. Based on the obtained key
, value
and url
of the new page. A.html
You will know immediately what you want to do.
The core of this problem is how to know when a new page is opened? How to close the music on this page in time while opening a new page? The difficulty lies in this "timeliness".
Just make a mark in sessionStorage
Use cookies or Html5’s localStorage to make a local mark
Every time a user opens your blog and plays music, the status of the current player is stored in the browser's localStorage
or cookies
.
When a user opens your blog in the same browser, they can use the status in localStorage
or cookies
to determine whether they need to play it again.
Just add an event to the window directly, $(window).on('blur',function(){
console.log('Stop music);
})
$( window).on('focus',function(){
console.log('Start music');
})

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

exit() is a function in PHP that is used to terminate script execution immediately. Common uses include: 1. Terminate the script in advance when an exception is detected, such as the file does not exist or verification fails; 2. Output intermediate results during debugging and stop execution; 3. Call exit() after redirecting in conjunction with header() to prevent subsequent code execution; In addition, exit() can accept string parameters as output content or integers as status code, and its alias is die().

To merge two PHP arrays and keep unique values, there are two main methods. 1. For index arrays or only deduplication, use array_merge and array_unique combinations: first merge array_merge($array1,$array2) and then use array_unique() to deduplicate them to finally get a new array containing all unique values; 2. For associative arrays and want to retain key-value pairs in the first array, use the operator: $result=$array1 $array2, which will ensure that the keys in the first array will not be overwritten by the second array. These two methods are applicable to different scenarios, depending on whether the key name is retained or only the focus is on

The rational use of semantic tags in HTML can improve page structure clarity, accessibility and SEO effects. 1. Used for independent content blocks, such as blog posts or comments, it must be self-contained; 2. Used for classification related content, usually including titles, and is suitable for different modules of the page; 3. Used for auxiliary information related to the main content but not core, such as sidebar recommendations or author profiles. In actual development, labels should be combined and other, avoid excessive nesting, keep the structure simple, and verify the rationality of the structure through developer tools.

The way to process raw POST data in PHP is to use $rawData=file_get_contents('php://input'), which is suitable for receiving JSON, XML, or other custom format data. 1.php://input is a read-only stream, which is only valid in POST requests; 2. Common problems include server configuration or middleware reading input streams, which makes it impossible to obtain data; 3. Application scenarios include receiving front-end fetch requests, third-party service callbacks, and building RESTfulAPIs; 4. The difference from $_POST is that $_POST automatically parses standard form data, while the original data is suitable for non-standard formats and allows manual parsing; 5. Ordinary HTM

There are two ways to create an array in PHP: use the array() function or use brackets []. 1. Using the array() function is a traditional way, with good compatibility. Define index arrays such as $fruits=array("apple","banana","orange"), and associative arrays such as $user=array("name"=>"John","age"=>25); 2. Using [] is a simpler way to support since PHP5.4, such as $color

The web page structure needs to be supported by core HTML elements. 1. The overall structure of the page is composed of , , which is the root element, which stores meta information and displays the content; 2. The content organization relies on title (-), paragraph () and block tags (such as ,) to improve organizational structure and SEO; 3. Navigation is implemented through and implemented, commonly used organizations are linked and supplemented with aria-current attribute to enhance accessibility; 4. Form interaction involves , , and , to ensure the complete user input and submission functions. Proper use of these elements can improve page clarity, maintenance and search engine optimization.

array_filter is used to filter elements in an array that meet the criteria. It is useful when you need to filter null values, specific values, or filter by rules, such as string length, such as removing false values, retaining even numbers, or long strings. When using it, you can choose whether to pass the callback function: if you do not pass, false values ??such as false, null will be automatically filtered; if you pass, it will decide whether to keep it based on the callback return true or false. In addition, the filtering can be done by combining the key name with the ARRAY_FILTER_USE_BOTH parameter and the index can be reset using array_values.

When you encounter the prompt "This operation requires escalation of permissions", it means that you need administrator permissions to continue. Solutions include: 1. Right-click the "Run as Administrator" program or set the shortcut to always run as an administrator; 2. Check whether the current account is an administrator account, if not, switch or request administrator assistance; 3. Use administrator permissions to open a command prompt or PowerShell to execute relevant commands; 4. Bypass the restrictions by obtaining file ownership or modifying the registry when necessary, but such operations need to be cautious and fully understand the risks. Confirm permission identity and try the above methods usually solve the problem.
