How has SoundCloud done that?

Question

Their UI is pure HTML, CSS and JS, so how they're playing the audio?
Involving a hidden flash player?

Answer 1

The embed code for their demo video looks like this:

<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;amp;server=vimeo.com&amp;amp;show_title=1&amp;amp;show_byline=1&amp;amp;show_portrait=0&amp;amp;color=&amp;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"&gt;SoundCloud: The Tour</a> from <a href="http://vimeo.com/soundcloud"&gt;SoundCloud&lt;/a&gt; on <a href="http://vimeo.com"&gt;Vimeo&lt;/a&gt;.&lt;/p&gt;

Blah blah blah. The .swf extension is the giveaway. It's Adobe Flash.

Answer 2

It's using a sort-of 'lightbox'-like script, checkout the link below for a demo: http://videobox-lb.sourceforge.net/

Answer 3

Not quite guys, their audio player is indeed pure html and is quite clever really. They generate a waveform image server side when the audiofile is uploaded, construct a player with standard html widgets and use AJAX calls to move the play head and also darken the waveform as the audio is buffering.

Here you can see an example, if you look at this in firebug you will see the width attribute is constantly changing to move it forward as it plays..

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

Alex..

Answer 4

Apparently they use Sound Manager 2, a flash player with Javascript controls.

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