个人头像

柠檬酸

2月前来过

控制台
欢迎来到我的博客!
默认封面

00:00/

播放列表

用localStorage实现多个标签只有一个音乐播放

发布于2018-01-03 / 1126次浏览

前几天发现如果打开两个标签页,而且都在播放博客上的音乐,听起来会很乱,需要手动去暂停第二个标签页的音乐才行。

然而网易云音乐实现了两个标签页只有一个页面播放,一个播放时另一个会自动暂停。具体效果如下。

原理其实非常简单,我们来理下思路:

  1. 首次进入页面时,生成一个时间戳,或者一个随机数,保存下变量并且放入到localstorage里。
  2. 每次音乐在播放的时候,运用html5里audio中的play事件,把我们生成的这个时间戳或者随机数存入到localstorage中
  3. 给浏览器设置一个全局的监听事件,监听storage是否改变。如果localstorage里面我们设置的字段和我们刚开始设置的时间戳不一致,就暂停播放。

直接上代码吧:

<!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应该不需要~

哈哈哈~先记下来以后肯定会用到~

喜欢 1
TAGS:  暂无标签
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。 转载请注明出处链接 : 用localStorage实现多个标签只有一个音乐播放

13 条评论

  1. 广树 说道: 来自 Google Chrome 63.0.3239.132 in Windows 7
    2018-01-13 14:08

    学习到了,我这就试试!

  2. 野兔 说道: 来自 Google Chrome 63.0.3239.132 in Windows 10
    2018-01-06 18:16

    localStorage……又学到了些知识~

  3. qq_avatar 蝉時雨 说道: 来自 Google Chrome 63.0.3239.108 in Windows 7
    2018-01-03 10:08

    我主题现在没有播放器了~ 又没找到好用的轮子~

    • qq_avatar 柠檬酸 说道: 来自 Google Chrome 63.0.3239.84 in Windows 8.1
      2018-01-03 10:16

      @蝉時雨 用QQ的吧,网易云总是改API,失效的歌又越来越多~
      网易云逼我们这些粉转路~

      • qq_avatar 蝉時雨 说道: 来自 Google Chrome 63.0.3239.108 in Windows 7
        2018-01-03 10:17

        @柠檬酸 主要是没找到小巧又好看的播放器,现在想自己写一个,但又没时间没动力~ 计划无限制延期中~

        • qq_avatar 柠檬酸 说道: 来自 Google Chrome 63.0.3239.84 in Windows 8.1
          2018-01-03 10:18

          @蝉時雨 嘤嘤嘤,你看我的播放器合不合你口味呀。
          仿前QQ音乐的UI~

          • qq_avatar 蝉時雨 说道: 来自 Google Chrome 63.0.3239.108 in Windows 7
            2018-01-03 10:20

            @柠檬酸 你播放器都加载不出来了~~~

          • qq_avatar 蝉時雨 说道: 来自 Google Chrome 63.0.3239.108 in Windows 7
            2018-01-03 10:20

            @柠檬酸 还有发现在我那评论的居然是你~ 换了个账号都没认出来~ :razz:

    • qq_avatar 柠檬酸 说道: 来自 Google Chrome 63.0.3239.84 in Windows 8.1
      2018-01-03 10:31

      @蝉時雨 23333你终于认出我了,我看你回复的还那么客气哈哈哈哈~
      API失效所以把播放器关了。现在你应该能看到了。

      • qq_avatar 蝉時雨 说道: 来自 Google Chrome 63.0.3239.108 in Windows 7
        2018-01-03 10:34

        @柠檬酸 感觉还不错~ 还需要魔改一番~

      • qq_avatar 蝉時雨 说道: 来自 Google Chrome 63.0.3239.108 in Windows 7
        2018-01-03 10:36

        @柠檬酸 主要是我页面空间不多~ 能省则省~ 不然太乱~

        • qq_avatar admin 博主 说道: 来自 Google Chrome 63.0.3239.84 in Windows 8.1
          2018-01-03 10:39

          @蝉時雨 那就简单的做一个播放暂停下一首,两个按钮就够了。
          或者我有一个好主意,把播放器放在最顶部,类似我的顶部进度条,可以用来展示歌曲进度。
          然后把播放下一首操作放到做顶部最左。

  4. 后宫学长 说道: 来自 Firefox 57.0 in Windows 10
    2018-01-03 6:41

    多少是点干货!不错!