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

Question

我已经阅读了这个问题，我明白它只能用帧来实现（我真的不想要全站点AJAX）： How to play a background audio across multiple HTML pages.?

我的问题是，是否有任何方法可以让一个小的或可能不可见的框架在主框架的某个地方播放音乐和一些设计精美的控件？实际上我想用SoundCloud来解决它，但是如果它不可能那么我就开放了一些自定义播放器，比如FlowPlayer或SoundManager 2.

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

最好的方法是什么？

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

Answer 1

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

1. 帧
2. 全站点AJAX（与框架不同，但更好的选择）
3. AJAX播放器同步
4. 网址参数+重写链接
5. 弹出

框架/ AJAX网站

框架可能是“最佳”情况（它会显示为观众的一个网站）。全站点AJAX基本上是相同的原则。但是你说你反对这些选择（但不是为什么）。

AJAX播放器同步

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

然后，在页面加载时你可以查找这个时间，并在那里开始播放歌曲。

然而，您仍然会在页面之间略微跳过（与您在嵌入式框架中播放YouTube时相比，然后在歌曲的一半时间内跳过“真实的YouTube”而不是嵌入式视频，并且它会继续，除了他们通过URL参数传递来做到这一点。

网址参数+重写链接

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

这样做的方法是：

1. 确保您的播放器onload检查网址GET参数以确定开始播放时间。
2. 有一个jQuery / JS“tick”函数，它每n毫秒执行一次（你必须测试才能找到理想值，我想至少会想象500/1000 ms）。
3. 在“勾选”功能中，让所有链接（a标记带href）更改您添加到其中的?paramname=0位以使用新的开始时间

如果你可以设置javascript中的cookie（我认为你不能这样做，但现在可能有解决方法），让你的玩家在加载时检查cookie，然后使用你的tick函数可以更容易更新cookie而不是重写所有URL。

<强>弹出

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

我的推荐

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

Answer 2

回到20世纪90年代，当时框架没有被弃用，网页上的背景音乐还没有被淘汰。如果您必须这样做，请制作一个弹出式播放器窗口，如BBC的iPlayer，用于广播节目​​。

Answer 3

我使用了名为JPlayer的crossbrowser和iOS兼容（html5和flash fallback）jQuery插件，并制作了一个脚本，以便在调用window unload事件时将当前播放时间保存在cookie中。

获取jQuery，jquery.JPlayer，jquery.Cookie。并注册$（window）.unload（）以保存cookie。当窗口加载检查cookie播放位置并执行jPlayer（“play”，savedcookieheadposition）