0

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

Adir
  • 1,423
  • 3
  • 19
  • 32
  • Please see [this great answer](http://stackoverflow.com/a/12271972/1004889) fellow SC engineer @nickf gave to [a very similar question](http://stackoverflow.com/questions/12263672/how-is-soundcloud-player-programmed). – pje Sep 14 '12 at 12:43

5 Answers5

5

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

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

colinjwebb
  • 4,362
  • 7
  • 31
  • 35
1

The darkening is actually automatic and handled by soundmanager2

Qwix
  • 11
  • 1
0

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;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 blah blah. The .swf extension is the giveaway. It's Adobe Flash.

Robert Harvey
  • 178,213
  • 47
  • 333
  • 501
  • But how they done the connection between the HTML buttons(like play, pause, seek...) and the swf file? – Adir Feb 10 '10 at 11:06
  • The buttons are most likely part of the programming in the .swf file itself. – Robert Harvey Feb 10 '10 at 14:37
  • @melee: There could be a number of reasons for that. The most likely one is that you are being served up a custom mobile page instead of the usual one. – Robert Harvey Jan 05 '11 at 17:17
  • Guess I need to spoof my browser and see their HTML5 ways, haha – Nic Jan 05 '11 at 17:23
  • Its possible to interact with flash objects via javascript. The flash object effectively presents an API that the JS can interact with to do things like start and stop. – Chris Jan 05 '11 at 17:27
  • 1
    @Chris: I think melee's point is that Flash won't run on the IPad. – Robert Harvey Jan 05 '11 at 17:47
  • @robert Harvey: I was actually replying to really old comments before I realised that this was a resurrection of an old thread. My comments were meant to be aimed at Adir who was asking how the html and swf interacted. – Chris Jan 06 '11 at 09:29
0

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

vectran
  • 1,961
  • 1
  • 14
  • 17
0

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..

Fergal Moran
  • 4,525
  • 5
  • 39
  • 54