


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

std::chrono is used in C to process time, including obtaining the current time, measuring execution time, operation time point and duration, and formatting analysis time. 1. Use std::chrono::system_clock::now() to obtain the current time, which can be converted into a readable string, but the system clock may not be monotonous; 2. Use std::chrono::steady_clock to measure the execution time to ensure monotony, and convert it into milliseconds, seconds and other units through duration_cast; 3. Time point (time_point) and duration (duration) can be interoperable, but attention should be paid to unit compatibility and clock epoch (epoch)

ToaccessenvironmentvariablesinPHP,usegetenv()orthe$_ENVsuperglobal.1.getenv('VAR_NAME')retrievesaspecificvariable.2.$_ENV['VAR_NAME']accessesvariablesifvariables_orderinphp.iniincludes"E".SetvariablesviaCLIwithVAR=valuephpscript.php,inApach

PHPhasthreecommentstyles://,#forsingle-lineand/.../formulti-line.Usecommentstoexplainwhycodeexists,notwhatitdoes.MarkTODO/FIXMEitemsanddisablecodetemporarilyduringdebugging.Avoidover-commentingsimplelogic.Writeconcise,grammaticallycorrectcommentsandu

When using PHP preprocessing statements to execute queries with IN clauses, 1. Dynamically generate placeholders according to the length of the array; 2. When using PDO, you can directly pass in the array, and use array_values to ensure continuous indexes; 3. When using mysqli, you need to construct type strings and bind parameters, pay attention to the way of expanding the array and version compatibility; 4. Avoid splicing SQL, processing empty arrays, and ensuring data types match. The specific method is: first use implode and array_fill to generate placeholders, and then bind parameters according to the extended characteristics to safely execute IN queries.

The key steps to install PHP on Windows include: 1. Download the appropriate PHP version and decompress it. It is recommended to use ThreadSafe version with Apache or NonThreadSafe version with Nginx; 2. Configure the php.ini file and rename php.ini-development or php.ini-production to php.ini; 3. Add the PHP path to the system environment variable Path for command line use; 4. Test whether PHP is installed successfully, execute php-v through the command line and run the built-in server to test the parsing capabilities; 5. If you use Apache, you need to configure P in httpd.conf

To create responsive images using CSS, it can be mainly achieved through the following methods: 1. Use max-width:100% and height:auto to allow the image to adapt to the container width while maintaining the proportion; 2. Use HTML's srcset and sizes attributes to intelligently load the image sources adapted to different screens; 3. Use object-fit and object-position to control image cropping and focus display. Together, these methods ensure that the images are presented clearly and beautifully on different devices.

InCSS,propertyinheritanceaffectshowstylesarepassedfromparentelementstochildren.Somepropertieslikecolorandfont-familyinheritbydefault,applyingtoallnestedelementsunlessoverridden.Non-inheritedpropertiessuchasborder,margin,andpaddingmustbesetexplicitly.

The basic syntax of PHP includes four key points: 1. The PHP tag must be ended, and the use of complete tags is recommended; 2. Echo and print are commonly used for output content, among which echo supports multiple parameters and is more efficient; 3. The annotation methods include //, # and //, to improve code readability; 4. Each statement must end with a semicolon, and spaces and line breaks do not affect execution but affect readability. Mastering these basic rules can help write clear and stable PHP code.
