音频在所有页面上持续播放？答案

【问题标题】：Audio continuously playing across all pages?音频在所有页面上持续播放？
【发布时间】：2017-06-19 11:43:51
【问题描述】：

这甚至可能吗？当您导航到同一网站上的不同页面时，要在停止的地方播放 mp3？我真的不知道从哪里开始。对 HTML、CSS 等有点陌生。有任何想法吗？谢谢。

【问题讨论】：

Angular 所以它是一个单页应用程序，是的，这是可能的，但你需要做一些工作：D
不太可能我认为没有正常的结构。也许通过 ajax 加载页面内容，因此页面不会更改，您可以保持音频实例继续而不会中断。否则，您可以将音频播放点保存到休假会话中，然后在下一页加载时从该点继续播放，但音频显然会在加载期间停止。
您可以使用框架（不要，它们已被弃用），您可以使用单独的选项卡/弹出窗口/窗口（不要，弹出窗口可能会被阻止，额外的选项卡/窗口是不好的用户体验），或者您可以创建一个动态加载内容的页面，即一旦加载页面，用户导航后就不必重新加载音乐；而是通过 AJAX 或 iframe 或诸如此类的方式引入所需的内容。
How do I make an <audio> file play continuously on all pages?的可能重复

【解决方案1】：

不跨多个页面加载。但是您可以拥有一个播放音频并为用户提供导航的页面。几个总体结构选项包括：

创建单页应用程序 (SPA)。在这里，您的一个“页面”将播放音频，并且站点导航将使用 JavaScript/AJAX 在这个单页实例中进行。浏览器只会加载一个“页面”，但整个应用程序会根据您认为合适的方式动态加载/卸载该页面的元素。
（一种非常古老的方法，但仍然有效）创建带有导航框架的父页面。父（框架）页面将包含音频，应用程序的其余导航将在该页面内的框架中完成。

我推荐第一种方法，但任何一种都可以。

【讨论】：

【解决方案2】：

如果您重新加载整个页面（并因此重新加载音频源），则无法提供无缝播放。由于页面加载时间，总会有一个非常明显的差距，即使您尝试跟踪音轨中的位置。缓慢的互联网连接会使情况变得更糟。

相反，您可以采用以下四个选项之一：

单页应用：
作为also pointed out by David，我的建议是创建一个单页应用程序，即一个加载一次的页面，然后动态加载/替换所有附加内容。用户单击导航链接，而不是加载新页面（或重新加载当前页面），您只需使用 AJAX 替换主要内容。提供音频的部分保持不变。
其他选项卡/弹出/窗口
您可以创建一个额外的选项卡、弹出窗口或只是为了播放音频的窗口。这方面的一个例子是德国广播电台“radioeins”。在撰写本文时，their website 在右上角提供了一个橙色按钮，该按钮将为他们的直播打开一个弹出窗口，允许用户继续浏览他们的网站，同时音乐继续从弹出窗口中不间断地播放。如果单页应用程序不是一个选项，我只会走这条路，因为弹出窗口或附加选项卡是糟糕的用户体验，并且弹出窗口可能会被浏览器阻止。
iframe
您可以在 iframe 中提供页面的主要内容，或者反过来，在 iframe 中提供音频。我建议不要这样做，因为这种方法有 several disadvantages。
框架
Frames 会提供与 iframe 类似的方法，但 they are deprecated，所以我也强烈建议不要这样做。

tl;dr

如果可以的话，让它成为一个单页应用程序，否则求助于弹出解决方案。

【讨论】：