如何跨页面在后台播放音乐答案

【问题标题】：how to play music in the background across pages如何跨页面在后台播放音乐
【发布时间】：2011-04-21 02:19:36
【问题描述】：

我已经阅读了这个问题，并且我知道它只能使用框架来完成（我真的不想要全站点 AJAX）： How to play a background audio across multiple HTML pages.?

我的问题是，有没有办法在主框架的某个地方有一个小的，或者可能是不可见的框架来播放音乐和一些精心设计的控件？实际上我想使用 SoundCloud 来解决它，但如果它不可能，那么我可以使用一些自定义播放器，比如 FlowPlayer 或 SoundManager 2。

我想做的是为一个小乐队建立一个网站（我是自愿做的），它有几个页面，比如photos.php、biography.php、music.php，我想在 music.php 页面上选择音乐曲目，但即使访问者导航出音乐页面，我也希望继续播放音乐。例如，当有人开始播放音乐然后转到 photos.php 并查看照片时，这肯定是最明显的任务，而音乐仍在播放。

最好的方法是什么？

更新：当然，我不希望音乐自动开始。

【问题讨论】：

标签： php javascript jquery html ajax

【解决方案1】：

我强烈建议不要这样做，但如果你真的想要它，有一些选择：

框架
全站点 AJAX（实际上与框架没有什么不同，但更好的选择）
AJAX 播放器同步
URL 参数 + 重写链接
弹出窗口

框架/AJAX 站点

框架可能是“最好的”情况（它会在您的查看者面前显示为一个站点）。全站AJAX原理基本相同。但是你说你反对这些选择（但不是为什么）。

AJAX 播放器同步

AJAX 播放器同步将涉及存储 cookie 以识别用户并让 AJAX 播放器调用后端，该后端存储当前用户歌曲的当前播放时间。

然后，在页面加载时，您可以查找这一次，并从那里开始播放歌曲。

但是，您仍然会在页面之间略微跳过（类似于在嵌入帧中播放 YouTube 时，然后在歌曲播放到一半时跳到“真正的 YouTube”而不是嵌入的视频，并且它会继续，除了他们通过 URL 参数传递来做到这一点）。

网址参数+重写链接

实现“同步”选项的另一种方法是使用定义当前歌曲时刻的 URL 参数。然后在每个“滴答声”（比如一秒/半秒）上，您可以使用 JavaScript 重写页面上的所有链接以包含更新的 URL 参数。但是，这意味着如果有人在新选项卡/窗口中打开您的网站/没有点击您页面上的链接，播放器将重新启动。无论如何，这些选项中的大多数都会发生这种情况，但这可能并不是真正的缺点。

这样做的方法是：

确保您的播放器 onload 检查 URL GET 参数以确定开始播放时间。
拥有一个每 n 毫秒执行一次的 jQuery/JS“tick”函数（您必须进行测试才能找到理想的，我想至少需要 500/1000 毫秒）。
在“tick”函数中，让所有链接（带有href 的a 标记）更改您添加到它们的?paramname=0 位以使用新的开始时间。

如果您可以通过 javascript 设置 cookie（我认为您不能这样做，但现在可能有变通方法），这可以通过让您的播放器在加载时检查 cookie，然后让您的 tick 功能变得更加容易更新 cookie 而不是重写所有 URL。

弹出窗口

您可以在弹出窗口中加载播放器（当然要检查以确保您不会在每次页面加载时启动新的弹出窗口）。这可能是实现您想要的最简单的选择。

我的建议

我的建议是不要在未经许可的情况下播放音乐 - 有一个播放器（可以在框架上/在完整 AJAX 站点的未更改组件中/在弹出窗口中），需要用户单击才能播放。或者，确保音乐足够好，让他们希望 YouTube/他们的媒体播放器在后台播放。

【讨论】：

感谢您的详细解答！您能否评论您提到的哪些选项适用于移动设备？我倾向于使用 Popup 播放器，因为这是 BBC 选择的，我觉得它是我可以轻松实现的。我对 AJAX 没有任何技术问题，但我不太了解用 javascript 在 AJAX 中编写完整页面。
@zsero - 在移动设备上（至少是 iphone）我看不到这些选项有效（没有我知道的互联网音乐功能）。假设 Android 或类似设备上的 flash 功能表示 javascript 音乐功能，URL 参数 + 重写链接将是我对移动设备的推荐。在笔记本电脑上，所有这些都可以像在 PC 上一样工作。
@zsero - 为 URL 参数方法添加了一些 mroe 技术细节。如果没有具体细节/为您编写解决方案，很难进入更多细节。该弹出窗口可能只涉及使用您的嵌入式播放器创建一个页面，然后使用一些 javascript 来制作此弹出窗口（尽管我认为大多数弹出窗口阻止程序会阻止这个？）。
您可以通过 JavaScript 设置 cookie，这样您就不需要在页面上的链接中添加垃圾或需要后端服务器来存储播放位置。只需将其存储在 cookie 中即可。

【解决方案2】：

时光倒流到 1990 年代，那时框架还没有被弃用，网页上的背景音乐还没有被淘汰。如果您确实必须这样做，请制作一个弹出式播放器窗口，就像 BBC 的 iPlayer 为广播节目所做的那样。

【讨论】：

+1 来自我，但我敢打赌，如果你展示一些用于弹出播放器的 jQuery，你会获得更多选票：)
“如果你真的必须这样做”：在一个音乐乐队的页面上，通常有一个非常特别的功能，你可以听他们的音乐。这就是存在诸如 SoundCloud 之类的服务的原因。当然它不会自动启动。
@zsero：我反对“非常特别”，但没关系

【解决方案3】：

我使用了名为 JPlayer 的跨浏览器和 iOS 兼容（html5 和 flash 回退）jQuery 插件，并制作了一个脚本，以便在调用窗口卸载事件时将当前播放时间保存在 cookie 中。

获取 jQuery、jquery.JPlayer、jquery.Cookie。并注册 $(window).unload() 以保存 cookie。当窗口加载时检查 cookie 播放位置并执行 jPlayer("play", savedcookieheadposition)

【讨论】：