国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Table of Contents
Reply content:
Home Backend Development PHP Tutorial javascript - How to prevent the web music player from playing the second tab when opening two tabs?

javascript - How to prevent the web music player from playing the second tab when opening two tabs?

Jul 06, 2016 pm 01:51 PM
css html javascript php

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.
javascript - How to prevent the web music player from playing the second tab when opening two tabs?

This way. Based on the obtained key, value and url of the new page. A.htmlYou 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');
})

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Using std::chrono in C Using std::chrono in C Jul 15, 2025 am 01:30 AM

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)

How does PHP handle Environment Variables? How does PHP handle Environment Variables? Jul 14, 2025 am 03:01 AM

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

Why We Comment: A PHP Guide Why We Comment: A PHP Guide Jul 15, 2025 am 02:48 AM

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

PHP prepared statement with IN clause PHP prepared statement with IN clause Jul 14, 2025 am 02:56 AM

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.

How to Install PHP on Windows How to Install PHP on Windows Jul 15, 2025 am 02:46 AM

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

How to create responsive images using CSS? How to create responsive images using CSS? Jul 15, 2025 am 01:10 AM

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.

Explain property inheritance in CSS Explain property inheritance in CSS Jul 15, 2025 am 01:25 AM

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

PHP Syntax: The Basics PHP Syntax: The Basics Jul 15, 2025 am 02:46 AM

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.

See all articles