使用背景音频更改页面内容

Question

一位客户刚要求提供具有以下设置的图书阅读网站：

• 必须有一个带有菜单和背景音乐开/关按钮的导航栏。
• 菜单是指向不同内容的链接。
• 内容必须随用户的需要而改变。

这是棘手的部分：

• 如果背景音乐为ON，那么即使内容发生变化，音频也必须播放（我知道更改内容的唯一方法是刷新网址，但这也会削减音频）

有没有办法达到这个效果？使用JavaScript还是Jquery？ 我非常感谢你的帮助。如果你发布一个简单的JSFiddle，我会非常高兴。

Answer 1

您需要制作单页应用程序（SPA）。这意味着您将拥有一个.html文件并使用AJAX将不同页面的内容加载到该文件中，而不是拥有多个.html文件并重新加载浏览器。如果您重新加载，音频将停止。

这是您需要做的事情：

1. 了解HTML5 Audio API。换句话说，了解var audio = new Audio(src)，audio.play()，audio.pause()等。

2. 了解如何进行AJAX调用（一个框架可以帮助您进行AJAX调用。最简单的选择是jQuery）

以下是Plunker上的演示应用：https://plnkr.co/edit/1Z1bdXXLcLn2h4TfkOQA?p=preview

按播放按钮并更改页面。注意当页面改变时音乐如何继续播放。

此外，您的服务器需要配置为通过AJAX向您发送页面内容，这样您就可以避免为不同的页面分别提供.html个文件并进行刷新。

这就是Soundcloud uses for continuous playback。他们使用backbone.js，但任何体面的框架都可以。