Question

他们的用户界面是纯HTML，CSS和JS，所以他们如何播放音频？涉及隐藏的Flash播放器？

Answer 1

显然他们使用Sound Manager 2，一个带有Javascript控件的flash播放器。

http://www.schillmania.com/projects/soundmanager2/

Answer 2

变暗实际上是自动的并由soundmanager2处理

Answer 3

他们的演示视频的嵌入代码如下所示：

<object width="400" height="250"><param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?
    clip_id=1857085&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;
    show_portrait=0&amp;color=&amp;fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=1857085&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="250"></embed></object><p><a href="http://vimeo.com/1857085">SoundCloud: The Tour</a> from <a href="http://vimeo.com/soundcloud">SoundCloud</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

Blah等等等等。 .swf扩展名是赠品。它是Adobe Flash。

Answer 4

它使用了一种类似“灯箱”的脚本，请查看下面的链接进行演示： http://videobox-lb.sourceforge.net/

Answer 5

不是大家伙，他们的音频播放器确实是纯粹的HTML，真的非常聪明。上传音频文件时，它们会生成波形图像服务器端，使用标准html小部件构建播放器，并使用AJAX调用移动播放头，并在音频缓冲时使波形变暗。

在这里你可以看到一个例子，如果你在firebug中看到这个，你会看到width属性不断变化，以便在播放时向前移动..

<div class="playhead" style="width: 32.75630235388422%;"></div>

亚历..

SoundCloud是如何做到的？

5 个答案: