音乐播放网站应用

Question

这个问题非常具体，关于如何制作像http://www.beatport.com上的音乐播放应用程序 - 效果：

1. 点击音乐链接时播放器会下降
2. 播放器不会在页面更改时重新加载。

我无法相信他们正在使用iframe？因为每个人似乎认为这是不好的做法。

及其def。不闪光

你认为他们在这里使用了什么？

关于如何制作这样的东西的任何想法？

谢谢！

Answer 1

对于音乐播放器，他们使用HTML5音频（可选择切换到Flash）。它包含在position: fixed; div中，可让您在滚动时将其保留在页面上。单击播放时播放器所在的div几乎肯定会加载AJAX，然后在加载时显示，解释单击音乐链接时的下拉。

主页面可能加载了更多的AJAX，有<div id="page-wrap">可能会在点击链接时重新加载。 jQuery Mobile这样做可以让多页面应用在一个页面中运行，所以这并不是闻所未闻。

奇怪的是，页面上有一个似乎报告用户指标的iframe。

Answer 2

除了@thedaian所说的。他们使用HTML5播放音频。页面是ajaxed，但是使用history.pushState操纵网址和历史记录，这是HTML5的新功能。这允许您在不执行新请求的情况下更新URL。更多关于它here。当然，并非所有浏览器都支持此功能，并且他们会在页面上检查此支持。

音频当然可以是Flash，HTML5或任何允许音乐控制器的音频。

动画看起来是简单的jquery slide效果。