如何创建持久的 html5 音频播放器？答案

【问题标题】：How to create a persistent html5 audio player?如何创建持久的 html5 音频播放器？
【发布时间】：2021-11-16 17:42:35
【问题描述】：

我有以下代码可以在我的网站上打开一个播放器进行音频播放使用 Django：

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

目前这会打开一个新选项卡并使用 VideoJS 播放 HLS 流。但实际上这不是我想要的。我想点击播放按钮，然后在页面底部弹出一个音频播放器，并在网站上导航时停留在那里。我已经在寻找这样的解决方案，但没有那么幸运。有人能告诉我在哪里看吗？

提前致谢。

【问题讨论】：

标签： javascript django html5-audio http-live-streaming

【解决方案1】：

在不了解您的技术堆栈的情况下很难说。然而，在我的脑海中，我觉得解决这类问题最常见的方法是使用 React、Vue 或 Angular 等流行的前端框架之一将网站构建为 SPA（单页应用程序）。

通过构建 SPA，您可以“虚拟地”在页面路由之间导航，其中可以检索新数据并将其装载到 DOM，同时在更改之间保留其他未更改的元素（例如您的音乐播放器）。

要使用 Vue 完成此操作，您可以在不刷新的情况下在页面之间移动。详情见here

【讨论】：

首先感谢您对我的问题感兴趣。实际上，应用程序的大部分已经完成并实现了一些 JS 框架，甚至没有对 JS 有很大的了解，这似乎有点矫枉过正。此外，我们只需要它来完成一件事情。是否有其他解决方案？如果我可以用 html 做某种层的事情，那就太棒了，保留一层并重新加载另一层左右......只是为了实现这样的导航概念。
我的荣幸。您面临的挑战是，当用户在页面之间导航时，页面上将发生“刷新”，除非您“伪造”页面路由更改（如 SPA 的情况）。不幸的是，为了您的目的，这将需要进行相当大的结构更改。想到的唯一其他解决方法是使用弹出窗口；但是，您可以通过修改弹出窗口大小和位置来“伪造”这种横幅效果，尽管可能存在一些很大的缺点：window.open('yourpage.htm','pagename','resizable,height={H},width={W}, top={TOP_RELATIVE_TO_WINDOW}, left={LEFT_RELATIVE_TO_WINDOW}')
好吧，假设我想从 VideoJS 中使用它。我该如何实施？ docs.videojs.com/tutorial-audio-tracks.html 目前我正在尝试将曲目添加到播放列表而不是播放播放列表，但不确定这是如何工作的
我不确定能否指导您大致了解如何使用 VideoJS；但是，您的用例的一个怪癖是在您的父窗口和弹出窗口之间传递数据（在这种情况下包含音频数据或 src/元数据）.. 在这里，您可能必须使用：@987654326 @ 详情请看这里。 developer.mozilla.org/en-US/docs/Web/API/Window/postMessage 我希望我已经回答了你的问题——也就是说，给你一个关于在哪里看的提示。祝你好运
我已经对此提出了另一个问题，另请参阅：stackoverflow.com/questions/69299706/… 并再次感谢 ;)