传统音乐网站实现点击跳转内页不中断音乐播放的方法

当然在最新的技术栈里，都是建议使用 单页应用架构：现代音乐网站多采用SPA框架(React/Vue/Angular)实现无缝体验，但这种H5技术有一个缺陷，那就是搜索引擎不会爬取任何异步内容，导致网站是收录了一个首页或者直接不收录。

那有没有两全其美的办法呢？答案是肯定的。

要在传统音乐网站上实现点击跳转内页而不中断音乐播放，可以采用以下几种技术方案：

1. 使用iframe框架

<!-- 主页面结构 -->
<iframe id="musicPlayer" src="player.html"></iframe>
<div id="contentArea">
  <!-- 主要内容区域 -->
</div>

• 将音乐播放器放在一个固定的iframe中
• 主内容区域通过链接更新而不刷新整个页面
• 播放器iframe始终保持不变

2. AJAX无刷新加载内容

// 使用jQuery示例
$(document).on('click', 'a:not(.external)', function(e) {
  e.preventDefault();
  var url = $(this).attr('href');
  $.ajax({
    url: url,
    success: function(data) {
      $('#contentArea').html(data);
      history.pushState(null, null, url); // 更新URL
    }
  });
});

• 拦截链接点击事件
• 通过AJAX加载新内容
• 更新URL而不刷新页面

3. HTML5 History API + 单页应用(SPA)

// 使用现代前端框架如Vue/React/Angular
// 或原生JS实现路由
window.addEventListener('popstate', function() {
  loadContent(location.pathname);
});

function loadContent(url) {
  // 获取并显示新内容
  // 保持播放器状态
}

4. 分离播放器与内容

<!-- 播放器固定在页面底部 -->
<div class="player">
  <audio id="audioPlayer" controls></audio>
</div>

<!-- 内容区域 -->
<div class="content">
  <!-- 动态加载的内容 -->
</div>

5. 使用Web Storage保存播放状态

// 切换页面时保存状态
localStorage.setItem('currentTrack', currentTrackId);
localStorage.setItem('playbackTime', audioElement.currentTime);
localStorage.setItem('isPlaying', !audioElement.paused);

// 新页面加载时恢复状态
window.addEventListener('load', function() {
  if(localStorage.getItem('isPlaying') === 'true') {
    audioElement.currentTime = localStorage.getItem('playbackTime');
    audioElement.play();
  }
});

最佳实践建议

1. 单页应用架构：现代音乐网站多采用SPA框架(React/Vue/Angular)实现无缝体验
2. 服务端渲染+客户端路由：首屏服务端渲染，后续交互客户端路由
3. 播放器组件化：将播放器作为独立组件，不受路由切换影响
4. 状态管理：使用Redux/Vuex等管理播放状态

这些方法都能实现在浏览网站不同页面时保持音乐连续播放的效果。