优雅实现“跨页面通讯”，轻松播放音乐，如此简单！

前端

2023-01-17 18:19:43

让音乐跨越页面：揭秘跨页面通讯

作为音乐爱好者，我们都曾遇到过这样的窘境：当切换页面时，音乐播放突然中断，令人扫兴不已。但现在，你可以向这种尴尬说拜拜了！本文将带你深入了解“跨页面通讯 ”技术，教你如何让音乐播放摆脱页面限制，尽情畅享无缝音乐体验。

跨页面通讯的奥秘

传统音乐播放器通常仅限于单个页面，一旦切换页面，音乐播放就会戛然而止。为了解决这一痛点，我们引入跨页面通讯技术，让不同页面之间的音乐播放器能够相互通信。

跨页面通讯就像一种桥梁，它连接着不同页面的音乐播放器，允许它们交换信息并控制播放状态。无论你在哪个页面上，都能继续聆听音乐，而无需重新加载或打开新页面。

跨页面通讯的实现

实现跨页面通讯的方法有很多，但最常用的方法之一是使用BroadcastChannel API 。它是一个简单的 JavaScript API，允许不同页面或窗口之间传递消息。

以下是如何使用 BroadcastChannel API 实现跨页面音乐播放控制：

在要通信的每个页面上创建一个 BroadcastChannel 对象。

const channel = new BroadcastChannel('music-player');

在一个页面上发送消息。

channel.postMessage({
  action: 'play',
  song: 'song-name'
});

在另一个页面上接收并处理消息。

channel.addEventListener('message', (event) => {
  const data = event.data;
  if (data.action === 'play') {
    // 播放音乐
    playSong(data.song);
  } else if (data.action === 'pause') {
    // 暂停音乐
    pauseSong();
  }
});

实战示例：打造跨页面音乐播放器

现在，让我们动手创建一个跨页面音乐播放器，让你体验无缝音乐播放的魅力。

步骤 1：创建播放器页面

创建一个 HTML 文件并添加以下代码：

<audio id="audio-player" controls>
  <source src="song.mp3">
</audio>

步骤 2：创建控制页面

创建另一个 HTML 文件并添加以下代码：

<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>
<button onclick="stop()">停止</button>

步骤 3：实现跨页面通讯

在每个页面中添加 JavaScript 代码：

// 播放器页面
const channel = new BroadcastChannel('music-player');

// 控制页面
const channel = new BroadcastChannel('music-player');
channel.postMessage({
  action: 'play'
});

// 接收消息并控制播放器
channel.addEventListener('message', (event) => {
  const data = event.data;
  if (data.action === 'play') {
    document.getElementById('audio-player').play();
  } else if (data.action === 'pause') {
    document.getElementById('audio-player').pause();
  } else if (data.action === 'stop') {
    document.getElementById('audio-player').pause();
    document.getElementById('audio-player').currentTime = 0;
  }
});