SoundCloud Backstage « The official SoundCloud developer blog SoundCloud Backstage. The site soundcloud.com is a single-page application that displays a multitude of users’ images. At SoundCloud, we use a technique to make the loading of an image appear smooth and fast. When displaying an image on screen, we want it to display to the user as fast as possible. The images display in multiple locations from a tiny avatar on a waveform to a large profile image.
For this reason, we create each image in several sizes. The technique uses the browser’s cache of previously loaded images. The HTML looks like this: The CSS looks like this: For the sake of brevity, the positioning code is not included in the preceding snippet. Finally, the JavaScript code looks like this: var fullImage = $('.fullImage'), placeholder = $('.placeholder'); fullImage .css('opacity', 0) .on('load', function () { this.style.opacity = 1; setTimeout(placeholder.remove.bind(placeholder), 500); }); Thus far, it’s not too complicated, and it gives a nice effect to the loading of images. Soundcloud. New Media Economics. SoundCloud Case Study. SoundCloud is quickly becoming the musician’s venue of choice for instant artistic collaboration, helping millions of artists and music lovers promote, distribute, and create their own music via the cloud. System Specifications Bandwidth (Why High?)
: SoundCloud requires a large amount of bandwidth due to the high amounts of content being submitted by users and the heavy content that is being streamed to those users.CPU (Why Medium?) : SoundCloud uses a fair amount of processing power in their editing software, and to play and receive music, etc, but the interface features of the website are still fairly basic.Disk (Why High?) : Users can store thousands of songs at a good quality, which uses up quite a bit of disk space.RAM (Why Medium?) Overview History Before 2007 and the invention of SoundCloud, it was difficult to send or receive large music files over the Internet.
Only a few months after its creation, SoundCloud rivaled Myspace’s dominance as an audio sharing platform. Features System. Itp.nyu.edu/~ad1790/ifm/soundcloud_casestudy.pdf. Groupes-premier-degre-36.tice.ac-orleans-tours.fr/eva/sites/groupes-premier-degre-36/IMG/pdf/TutorielSoundcloud.pdf. SoundCloud: The Go-To Site for Musicians and Music Lovers. SoundCloud sets the stage for aspiring musicians across the globe. In a recent case study, NetHosting examines the musician’s social network: SoundCloud. Taking the throne in 2007 as the go-to site for musicians and music fans all over the world, SoundCloud provides an online amphitheater of sorts for artists and music listeners to share and collaborate on music. Essentially, SoundCloud is the Facebook for aspiring musicians. Alex Ljung, a self-proclaimed “Swede/UK Entrepreneur,” and artist Eric Wahlforss both saw a niche in the social networking space that needed to be filled.
Within months, SoundCloud was racing up the traffic rankings, even rivaling MySpace’s capabilities in audio sharing. SoundCloud provides features to upload, record, and listen to all the tracks available on SoundCloud. A feature that makes SoundCloud especially appealing to musicians and music fans is the comment feature. The future of SoundCloud still remains to be decided. About Andy Chapman. SoundCloud Threatens MySpace as Music Destination for Twitter Era | Wired Business. In a few short months SoundCloud has begun to give mighty MySpace a run for the hearts and minds of recording artists eager to interact more nimbly with fans than is possible on the giant social network which has, for the past five years, been the de facto online platform for musicians.
Sonic Youth used SoundCloud to stream their latest album via Twitter while Moby uses it to promote his latest tracks on his site rather than on MySpace. And when Beck decided to trash his so-five-years-ago Flash-based site and start over with simple pages heavy on high-quality content and light on everything else, he too turned to SoundCloud. SoundCloud sounds like an obvious idea — like every good one does once somebody else has it.
The necessity that was the mother to this particular invention was the absence of a truly collaborative online environment that could replicate the kind of back-and-forth spontaneity that musicians need to feed on and which proximity uniquely enables. Is Back Online And Faster. First, let us give you the good news: SoundCloud is back up on a monster server setup based on a bunch of state-of-the-art Sun servers hosted by London-based hosting experts EveryCity. Also big thanks to Sun Startup Essentials for helping out. Performance is a lot better now. It’s been a long and sweaty day for all of us at the SoundCloud office, with a totally non-excusable downtime extending over 12 hours. The downtime was mainly caused by the disks of our main database server completely giving up right in the middle of things as we were migrating to the new data center.
This essentially killed our old server setup. So there was nothing else to do but to look forward and move on, as fast as humanly possible. The good news is we made it in a day. But the downtime is of course far from acceptable. Hopefully this should never happen again. Now we hope you will enjoy the new, faster SoundCloud! Mobile - Proxies « SoundCloud Backstage SoundCloud Backstage. The Problem The mobile version of SoundCloud is a consumer of our own API dog food. That decision was made with the intention to deploy a self-sufficient client application that depends only on a static provider.
Our early experiements showed that the attempt we made had some downsides. For example, the implementation of redirects in CORS is not behaving properly and therefore can’t be used with many of the endpoints in our API where we rely on the correct handling. Also classic XHR communication with the API is not an option due to the same origin policy implications that apply even on subdomains. The Idea In another internal project we handled that problem with an iFrame hack for all non GET/HEAD HTTP methods. The Nginx Solution With Nginx being one of the most important tiers in our http stack, it was natural to lean in that direction first.
You can find all in-depth documentation for the used directives in the proxy module wiki page. The Node Solution The Conclusion.