基于Django如何创建跨页面持久化HTML5音频播放器

1. 页面架构改造（解决导航不中断核心问题） #

要实现音频播放不随页面跳转中断，核心是避免播放器DOM被刷新销毁，有两种成熟方案可选：

• 单页应用(SPA)改造：前端用Vue/React/原生JS实现前端路由，所有页面跳转只替换页面主体内容区域，全局固定的底部播放器DOM始终挂载在页面根节点下，不会被销毁。Django侧仅提供后端API接口，不再处理服务端整页模板渲染跳转。
• 轻量PJAX方案：保留原有服务端渲染逻辑，仅刷新页面指定的主体内容区域，播放器作为全局公共元素放在项目根模板base.html的最外层，跳转时不更新该区域。Django侧可配合django-pjax包，识别PJAX请求时仅返回主体内容片段，不返回整页模板。

2. 全局播放器实现 #

• 在根模板base.html中添加固定定位的播放器容器，默认隐藏，样式设置为position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999，确保始终悬浮在页面底部最上层。
• 全局仅初始化一个VideoJS实例绑定到该容器，避免重复初始化产生多音频同时播放问题。
• 替换原有播放按钮逻辑：把跳转用的<a>标签改为普通按钮，提前把HLS流地址写入按钮的data-*自定义属性，绑定点击事件拦截默认跳转，将流地址传入全局播放器加载播放，同时显示底部播放器容器。

示例代码如下：
Django模板修改：

{% if track.file.hls_stream %}
  <button type="button" class="btn btn-outline-primary audio-play-btn" 
    data-stream-url="{% url 'stream' pk=track.file.pk|safe|cypher_link_stream %}">
    <i class="fad fa-play-circle"></i>
  </button>
{% endif %}

JS逻辑：

// 页面首次加载时仅执行一次，初始化全局播放器
const player = videojs('global-audio-player', {
  controls: true,
  preload: 'auto',
  html5: {
    vhs: {
      overrideNative: true
    },
    nativeAudioTracks: false
  }
});

// 绑定所有播放按钮的点击事件
document.querySelectorAll('.audio-play-btn').forEach(btn => {
  btn.addEventListener('click', (e) => {
    e.preventDefault();
    const streamUrl = btn.dataset.streamUrl;
    player.src({
      src: streamUrl,
      type: 'application/x-mpegURL'
    });
    player.play();
    // 显示底部播放器
    document.querySelector('#global-audio-player-container').classList.remove('d-none');
  })
})

3. 可选优化项 #

如果需要页面刷新后仍保留当前播放状态，可将当前播放音频ID、播放进度等信息存入localStorage，页面首次加载时读取存储内容恢复播放即可。

内容的提问来源于stack exchange，提问作者user16837137