柠檬酸
2年前来过
00:00/
发布于2018-01-03 / 2912次浏览
前几天发现如果打开两个标签页，而且都在播放博客上的音乐，听起来会很乱，需要手动去暂停第二个标签页的音乐才行。
然而网易云音乐实现了两个标签页只有一个页面播放，一个播放时另一个会自动暂停。具体效果如下。
原理其实非常简单,我们来理下思路：
直接上代码吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>page A</title>
<script>
window.onload=function () {
var timestamp = Date.parse(new Date());
var music=document.getElementById('music');
localStorage.setItem('player_timeStramp',timestamp);
window.addEventListener('storage',function () {
var thisTimeStamp=localStorage.getItem("player_timeStramp");
if(thisTimeStamp!=timestamp){
music.pause();
}
//console.log(arguments);
},false); //true:捕获 false:冒泡
music.addEventListener('play',function () {
localStorage.setItem('player_timeStramp',timestamp);
},false);
}
</script>
</head>
<body>
<audio src="2.mp3" id="music" controls="controls" autoplay="autoplay"></audio>
</body>
</html>
这个对那些开了播放器又不支持ajax(pjax)的主题可能有点帮助。pomelo应该不需要~
哈哈哈~先记下来以后肯定会用到~
学习到了，我这就试试！
localStorage……又学到了些知识~
我主题现在没有播放器了~ 又没找到好用的轮子～
@蝉時雨 用QQ的吧，网易云总是改API，失效的歌又越来越多~
网易云逼我们这些粉转路~
@柠檬酸 主要是没找到小巧又好看的播放器，现在想自己写一个，但又没时间没动力~ 计划无限制延期中~
@蝉時雨 嘤嘤嘤，你看我的播放器合不合你口味呀。
仿前QQ音乐的UI~
@柠檬酸 你播放器都加载不出来了~~~
@柠檬酸 还有发现在我那评论的居然是你~ 换了个账号都没认出来~
@蝉時雨 23333你终于认出我了，我看你回复的还那么客气哈哈哈哈~
API失效所以把播放器关了。现在你应该能看到了。
@柠檬酸 感觉还不错~ 还需要魔改一番~
@柠檬酸 主要是我页面空间不多~ 能省则省~ 不然太乱~
@蝉時雨 那就简单的做一个播放暂停下一首，两个按钮就够了。
或者我有一个好主意，把播放器放在最顶部，类似我的顶部进度条，可以用来展示歌曲进度。
然后把播放下一首操作放到做顶部最左。
多少是点干货！不错！