实现QQ音乐跨页面更新播放列表

Published on with 147 views

实现QQ音乐播放列表跨页面更新

1 原理

QQ音乐网页实现了音乐浏览页面点击播放按钮时,另一个播放页面实现播放音乐歌曲的功能。
如何做到的呢?通过简单的DEBUG,很容易发现原理是通过监听localStorage的变化来实现的。毕竟相同域的不同页面共享相同的localStorage。

2 简单实现

app.js

// 歌曲列表
var songs=[
    {id:1,name:"不能说的秘密"},
    {id:2,name:"晴天"},
    {id:3,name:"发如雪"},
    {id:4,name:"烟花易冷"},


]
// 从localStorage 取出播放列表
function getPlayListFormlocalStorage() {
    var playList=[]
    var tempLisy=  window.localStorage.getItem("playlist");
    if (null===tempLisy){
        window.localStorage.setItem("playlist", JSON.stringify(playList))

    }else {
        playList=JSON.parse(tempLisy)

    }
    return playList

}
// 清空播放列表
function cleanLocalStorage() {
    window.localStorage.setItem("playlist", JSON.stringify([]))
}

index.html 歌曲选择页面

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>选择歌曲</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"></head>
<body ng-controller="index">

<div class="list-group">

    <li class="list-group-item d-flex justify-content-between align-items-center" ng-repeat="song in songs track by song.id">
        {{song.name}}
    <button type="button" class="btn btn-primary" ng-click="play(song)"  style="padding-right: 10px">播放</button>

    </li>

</div>

<script src="js/app.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.min.js"></script>
<script >
    var app =angular.module("app",[]);
    app.controller("index",function ($scope,$log) {
        //获取歌曲列表
        $scope.playList=getPlayListFormlocalStorage()
        $scope.songs=songs
        $scope.play=function (song) {
            //获取歌曲列表
            $scope.playList=getPlayListFormlocalStorage()
            //将目标歌曲添加到播放列表
            $scope.playList.push(song)
            //保存播放列表
            window.localStorage.setItem("playlist", angular.toJson($scope.playList))
            //保存现在播放歌曲ID
            window.localStorage.setItem("nowId",song.id)

        }





    })
</script>


</body>
</html>

palyer.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>播放列表</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

<body ng-controller="player">

<div class="list-group">
    <a  class="list-group-item list-group-item-action"   ng-repeat="song in playList track by $index " ng-bind="getSongName(song)"></a>


</div>
</body>

<script src="js/app.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.min.js"></script>
    <script >
    var app =angular.module("app",[]);
    app.controller("player",function ($scope,$log) {
        //获取歌曲列表
        $scope.playList=getPlayListFormlocalStorage()
        //监听localStorage
        window.addEventListener('storage',function(e){
            //重新获取歌曲列表
            $scope.playList=getPlayListFormlocalStorage()
             //刷新数据,重新渲染歌曲列表UI
            $scope.$apply()
        })
        //离开页面是清空歌曲播放列表
        window.onbeforeunload=function (ev) {
           cleanLocalStorage()

        }
        $scope.getSongName=function (song) {
            //通过nowId判断歌曲是否在播放
           var id = window.localStorage.getItem("nowId")
            if (song.id==id){
             return song.name+" 在播放中..."

            }else {
                return song.name
            }


            
        }






    })
</script>

</html>

##3 效果演示
https://file.i-ng.net/2019-03-17-08.59.08.gif

文章仅在黑客派和本网站刊登,其他为盗载。

Responses