Question

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 🙂

Answer 1

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.