SOUNDCLOUD-REMIX HAS BEEN REPLACED BY SOUNDCLOUD-COMPETITION
We've recently redeveloped the SoundCloud Remix system into SoundCloud-Competition and won't be supporting / updating this app anymore. Check out the new solution, it's rad.
This app allows you to easily throw a SoundCloud Remix competition on your website. The default application has plenty of customization options but feel free to adjust and fork as needed. You can see an example of the default app running here.
1. Install Ruby, RubyGems, & Rails
Mac OS X: Ruby and Rails comes pre-installed on Mac OS X, but you'll want to upgrade it by following these instructions.
Windows: Follow these instructions to install Ruby and Rails on Windows.
2. Install Git & Generate SSH Key
Git is a free & open source, distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
- Install Git: On a Mac, Windows, or UNIX/Linux
- Sign up for Github
- Follow these instructions to generate an SSH key & add the key to your Github account.
- Set user name and email globally on git by following these instructions
3. Register a new SoundCloud application
- Make sure you're signed up for SoundCloud and logged in.
Go here, name your app, and click
- Copy your Consumer Key and Consumer Secret for later
4. Create a new Group on SoundCloud
- Go here and name your group (eg. My Band's Remix Contest)
- Add a description about your contest, make sure "Automatically approve tracks" is checked, and click
- Copy your group url from the address bar for later (eg. http://soundcloud.com/groups/soundcloud-remix)
Clone the application on your local computer by running the following command in your Terminal emulator. (Terminal on Mac, Console on Windows)
git clone email@example.com:soundcloud/soundcloud-remix.git
Now you're ready to do some configuring.
Configuring the application is simply done by editing the following files
instructions.txt in the config folder.
If you're looking for a decent text editor, try TextMate
1. Connect with your SoundCloud app
Input your Consumer Key and Consumer Secret to the prokey and prosecret fields at the bottom of
2. Adjust Main Settings
- Input the following into
- Your competition title, description, admin user url, and group url
- A link to your terms, if needed. Otherwise, leave blank.
- Customize the embedded player_params as needed. (You can view a full list of parameters here)
- See Facebook Like Button below for more information regarding facebook_id
- Set the upload_limit size in Kilobytes. (Set to 10MBs by default for easy deployment on Heroku.)
- Adjust the default remix description, tag_list, and downloadable parameters. (These will be automagically applied to all remixes uploaded.)
3. Add Some Instructions
The frontpage includes a prominent block that should be used to instruct your users on the contest rules, submission guidelines, deadlines, where to get the stems, etc. You have complete control over this block by simply editing
4. Facebook Like Button (optional)
If you'd like to use the Facebook "Like" button on your application, you'll need to create a new Facebook App, copy its ID, and add it to your
config/settings.yml. Here's how you do that:
Go here, name your app, agree to the terms, and click
- Copy your Application ID and paste it into the facebook_id field of
- Back on your Facebook app's edit page, click
Connectin the left column
- Input the url to where your deployed app will reside into the Connect URL field (eg. http://soundcloud-remix.heroku.com)
Customize CSS and Images
Replace default images
Replace the following images with something that relates to your competition.
public/images/bg.jpg: background image used throughout the app. Replace with something around 1280 x 960 pixels
public/images/logo.png: logo that appears in the top left corner of your app. Replace with another transparent png of your choosing.
public/images/artwork.jpg: a square 200 x 200 pixel image that is applied to every remix upload.
Adjust default CSS
You can further customize the aesthetics of your application by adjusting
public/stylesheets/application.css. Here's a few ideas:
- Change the color and font of text in the
- Change the color of links and their hover effect in the
- Change the color of headlines in the
- Change the background gradient of the upload progress bar in the
Adjust player CSS
- Change the background-color in the
sc-controlsselector to adjust the color of the play/pause button
- Change the background gradient in the
sc-playedselector to adjust the play bar color
Deploying on Heroku
Tips and Tricks
- Add .vote to the end of any remix link to make a voting link. Great for Twitter. "Vote for my remix http://soundcloud-remix.heroku.com/1**.vote**"
- Remixes are automatically added to the Group you specified in settings. You can go there to grab an embed of all the submissions.
- A button to "Vote For Remix" is added to the player embed via a customized 'buy' button. More on that hack here.
- The app is automagically formatted for the iPhone. You can even listen to the remixes via HTML5 powered audio.