A music player for your website or blog.
Stratus is a jQuery powered SoundCloud player that lives at the bottom (or top) of your website and enables visitors to listen to SoundCloud tracks & sets.
Add the following code to the <head> section of your HTML.
<link type="text/css" rel="stylesheet" href="http://stratus.heroku.com/css/stratus.css"/>Add the following code right before the closing </body> tag of your HTML.
<script type="text/javascript" src="http://stratus.heroku.com/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://stratus.heroku.com/js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="http://stratus.heroku.com/js/soundcloud.player.api.js"></script>
<script type="text/javascript" src="http://stratus.heroku.com/js/stratus.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.stratus({
color: '000000',
links: [ { url: 'http://soundcloud.com/seams' } ]
});
})
</script>You can customize Stratus by passing the appropriate options to the stratus function. For example:
<script type="text/javascript">
$(document).ready(function(){
$.stratus({
auto_play: true,
links: [
{ url: 'http://soundcloud.com/seams' },
{ url: 'http://soundcloud.com/foofighters' }
],
randomize: true
});
})
</script>The above code will cause the player to auto play a random Seams or Foo Fighters track.
Refer to the table below to see all configuration options.
| Key | Default value | Description |
|---|---|---|
| align | "bottom" | Stratus can appear at either the top or bottom of the page. Acceptable values "bottom" or "top". |
| animate | "slide" | How (and if) Stratus should animate when it opens. Acceptable values: "slide", "fade", or "false". |
| auto_play | false | Whether the player should start automagically. |
| buying | true | Whether the "buy" button should appear on the player. |
| color | "ff7700" | The color of the play button and other controls. Acceptable value: (hex code without #, like 33ff00) |
| download | true | Whether the "download" button should appear on the player. |
| links | An array of SoundCloud links you wish the player to play. Can be a user, track, group, and/or set url. | |
| offset | 0 | This will position the player x pixels from the top or bottom of the page depending on alignment. |
| position | "fixed" | Change to "absolute" if you do not want the player to scroll with the page. |
| randomize | false | Setting this value to "true" will shuffle the tracks on player load. |
| show_playcount | true | Whether the amount of track plays should appear on the player. |
| show_user | true | Show or hide the track artist. |
| volume | 50 | The default volume level. Acceptable value: 0-100 |
If you'd like to change the aesthetic of Stratus beyond the coloring provided in the configuration options, all you need to do is add your adjusted CSS after the stratus.css include.
Check out theme.css to help you find out which CSS tags should be edited.
And for the more adventurous types, I've provided the Sassy CSS for rapid theme development
Stratus is already being used by some great websites and blogs! If you have one to add to the list, please send me an email and I'll add it.
Got a suggestion? Found a bug? Deployed the player on your site? Let me know @leemartin
Can I keep Stratus playing even when the page reloads?
Not currently. Your site would need to be built so that it doesn't reload rather than the player. Stratus V2 will include a pop-out function that will resolve this problem.
How do I make the player transparent?
Just add the appropriate CSS info after the stratus.css include. .sc-stratus{ opacity: 0.5; } should do the trick.