Home > Article > Backend Development > 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?
- WBOYOriginal
- 2016-07-06 13:51:421245browse
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>
现在是我这个页面在播放音乐。。。
</body>
</html></code>
At this time you will find that the page A.html will print out a 对象 immediately. That's right, just like the picture below.
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');
｝)