David Stratus – a horizontal player for your website or blog

Attention! Stratus has been updated to 2.0. Learn more about it here!

“A stratus cloud is a cloud belonging to a class characterized by horizontal layering with a uniform base…” – Wikipedia

(Finally.. an opportunity to use a “cloud” reference in one of my open source apps.)

Stratus is a jQuery powered SoundCloud player that lives at the bottom (or top) of your website or blog and enables visitors to listen to SoundCloud tracks & sets. The best way to explain how Stratus works is to simply see it in action. Head over to stratus.heroku.com or just click play on the video below:

Simple and effective. So what makes Stratus so special? Three things:

1. Installation

Installing Stratus on your website or blog is as easy as including a stylesheet and a few javascript files. Check stratus.heroku.com for the bits of code you’ll need to add, as well as Tumblr and Ning specific instructions. (WordPress incoming)

2. Customization

Stratus has a slew of built in customization options that range from whether it auto plays to if it appears at the top or bottom of the page. Refer to the chart on stratus.heroku.com to see all configuration options.

Also, since Stratus is constructed in HTML and CSS you can completely customize the look of it. I’d suggest looking at the outputted source code for starts. And for those of you who are really adventurous, you’ll find the source SCSS here. Just include your adjustments after the included stratus.css stylesheet.

3. Accessibility

In addition to SoundCloud track and set urls, Stratus can also play links to user accounts and favorites. Simply include the appropriate links in your installation: soundcloud.com/leemartin, soundcloud.com/matas/favorites.

Finally, the player is smart enough to know your browser/os environment and choose the best playback for each. Which means it works well on iPhones and iPads. Yay for universal accessibility!

Stratus is already being used by some great websites and blogs like seamsmusic.com. If you have one to add to the list, a suggestion, or a bug, please send me an email or contact me on Twitter @leemartin.

I really hope you guys enjoy this one. Happy Holidays!

P.S. Special thanks goes out to Matas Petrikas for his work on our custom player library and Bear Bibeault & Yehuda Katz for jQuery in Action, Second Edition. Both of which were crucial in the creation of this player.

  • Very cool

  • Great player. I really like slick and minimal design with easy intergration. Will use it on one of my projects;). There is no way playing own mp3 files right?

  • Anyway to have a short cut system built in`?´

    Like Youtube, 4:15 is linked to 4:15 in the musicplayer, so it jumps there when clicked on?

    Would be awesome for my Tracklist / Cuesheet site.

  • Anyway to have a short cut system built in`?´

    Like Youtube, 4:15 is linked to 4:15 in the musicplayer, so it jumps there when clicked on?

    Would be awesome for my Tracklist / Cuesheet site.

  • Love the idea, will research :)

  • The current setup streams SoundCloud tracks only. StreamPad is similar and works well for mp3 files.

  • Thanks!

  • Great job Lee! Looks awesome

  • sprlnr

    looks great. This might be a daft question but how do I get the text to scroll behind the player? At the moment it scrolls behind and looks messy. cheers

  • sprlnr

    Ah, this was meant to say scrolls behind the player which is transparent and looks messy

  • Thanks Dan!

  • Send a screenshot and your browser/os configuration to lee@soundcloud.com. Thanks :)

  • sprlnr

    Ok, Cheers

  • Great! Looking forward to see this happening as a WordPress plugin soon! :)

  • Will research over the holidays. Definitely want to make a WordPress integration super easy!

  • Combining the two (the ability for a Soundcloud player like this to stream both Soundcloud and mp3 links) would be a killer integration and one that I could see helping Soundcloud gain more permanent integration on blogs. The upside for Soundcloud would be that labels/artists would see a wider adoption of Soundcloud on blogs, motivating them to upload their tracks SC and then be able to justify the cost of premium account to access stats that would paint a much clearer picture of where and many times their tracks are being listened accross the web.

  • Is there a way to make this work asynchronously – i.e., so you can click normal links on the page (without opening a new tab) and keep the music playing?

  • The site itself would have to be built asynchronously I believe. Kinda like Blip.fm.

  • Well the use of mp3 links wouldn’t motivate them to sign-up for SoundCloud, it would motivate them to use mp3 links! ;-)

    But I hear you, and this is an /unofficial/ SoundCloud hack so who knows.

  • I don’t believe so, as someone who blogs and works at a label, I would be more likely to use SoundCloud professionally if I saw more blogs using SC. And as a blogger, I would love a unified system, and would be more apt to post SC links if they integrated into my current site player, StreamPad.

    Label people want stats and so do bloggers.

  • Well you’ll be happy to know we’re working on an integration with StreamPad!

  • I absolutely love love love that it’s smart enough to detect when my readers push play on an already-embedded Soundcloud player! Way to go! :) Dance Is A Feeling (http://danceisafeeling.com) loves you for that!

  • WordPress plugin! Color Customization. Native functionality like we find in the soundcloud website and apps. i.e. share, comment in track, rate, favorite, etc.

  • That is great, can’t wait to see it, as I think this will be perfect for a project I have in the pipe. Thanks Lee.

  • Circe Link

    Yep, us WordPress kids will enjoy this to be sure!