实现 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 效果演示
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于