【需求】
1、点击音乐后新开页签,进行播放
2、切换歌曲后,页签不变且不刷新,直接切换歌曲
3、切换歌曲时不自动切换到播放页
(效果见酷狗音乐)
- 音乐列表页
let musicList = document.querySelectorAll('.music-item>.play'); // 获取按钮NodeList
const channel = new BroadcastChannel('music') // 创建BroadcastChannel实例
for (const btn of musicList) { // 循环播放按钮添加点击事件
btn.addEventListener('click',function(){
const first = localStorage.getItem('firstPlayTab') // 本地缓存实现判断是否首次打开播放页
const name = btn.dataset.name // 获取播放歌曲名
if(!first){ // 播放tab页是否打开
window.open(`./music.html?name=${name}`,'music') // 首次则新开播放页
}else{
channel.postMessage(name) // 发送BroadcastChannel消息
}
})
}
- 音乐播放页
const name = getQueryString('name') // 首次打开获取歌曲名
const audio = document.querySelector('audio')
audio.src = `./${name}` // 播放相应歌曲
const channel = new BroadcastChannel('music') // 创建同name实例
channel.addEventListener('message',function(e){ // 监听消息
document.querySelector('audio').src = `./${e.data}` // 切换歌曲
})
window.onbeforeunload = function(){
localStorage.removeItem('firstPlayTab') // 网页关闭前删除本地缓存tag
}
window.onload = function(){
localStorage.setItem('firstPlayTab','1') // 网页加载后添加本地缓存tag
}