15

This may be too broad a question, but how is soundcloud actually programmed?

To be more specific,

  1. What language was used to program it?

  2. How does it display the frequency data?

  3. If user uploads a file in a format different from MP3, is it converted MP3 or gets played as is? If former, how does the conversion work?

  4. How does it "graphically" appear on a browser as it does? Is it also HTML 5 thing which I don't know anything about?

I'm a big fan of the soundcloud and couldn't stop wondering how all of these work! Please help me out :)

Florent
  • 12,310
  • 10
  • 49
  • 58
CosmicRabbitMediaInc
  • 1,165
  • 4
  • 21
  • 32
  • Don´t know for sure, but I think it uses Flash. Also it may use ffmpeg for converting different formats to mp3 on the server - like youtube(?). http://multimedia.cx/eggs/googles-youtube-uses-ffmpeg/ – HectorLector Sep 04 '12 at 12:44
  • Official statement from 2013 [here](http://www.youtube.com/watch?v=W8B9xT1QRb0): SoundManager2 ! – Sliq Feb 12 '14 at 21:49

2 Answers2

40

SoundCloud developer here,

  1. The API and the current website are built with Rails. For information about the architecture/infrastructure and how it evolved over the last 5 years, check out Evolution of SoundCloud's Architecture. The "next" version of the website (still in private beta) is built entirely with Javascript, and just uses the API to get its data. There's a lot more detail available in Building The Next SoundCloud.

  2. I'm not sure exactly what language/libraries are used to process the audio, but many audio libraries do provide frequency data, and we just extract that.

  3. Users can upload AIFF, WAVE (WAV), FLAC, OGG, MP2, MP3, AAC, AMR or WMA files. The originals are kept exactly as is for the download option, but for streaming on the site, they're converted to 128kbps MP3 files. Again, I'm not sure of the software/libraries, but I'm pretty sure it'd be ffmpeg.

  4. For displaying the waveforms, on the back-end when the audio files are processed when they're uploaded, the waveform data is saved into a PNG file. On the current version of the website, we simply load that file. On Next, the png is processed to get the original data back out, and then it is drawn to a canvas at the exact dimensions needed (which keeps the image crisp). We're currently experimenting with getting waveform data in a JSON format to speed up this process.

nickf
  • 537,072
  • 198
  • 649
  • 721
  • wow, thank you so much for your detailed answer! I was also wondering if you make use of sound manager 2 at all? – CosmicRabbitMediaInc Sep 05 '12 at 06:45
  • 2
    How does it load new URL and preserves the "frame" with player in the bottom part of the screen? Is it Angular.js UI-routing, or Backbone, or something else? – Dalibor Jun 29 '15 at 20:44
  • @nickf do you know if there's a way to use audio waves to detect similar sounding songs? I've always wondered that – Daniel Sep 05 '15 at 05:56
0

I am copying the following info posted by David Noël somewhere else in 2010.

Web tier: Varnish, nginx, haproxy, thin

Data Management: Cassandra, MongoDB, mySQL master/slave cluster, memcached

Web framework: Ruby on Rails

CDN: Akamai and Edgecast

Transcoding/storage: AWS EC2/S3

Community
  • 1
  • 1
emre
  • 324
  • 2
  • 6